Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
-
Upload
ernie-hsiung -
Category
Technology
-
view
4.142 -
download
0
description
Transcript of Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
![Page 1: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/1.jpg)
IMPACT FONTbaby jesus
It makes the
CRY(Alternate title: Font usage in WordPress Blogs)
Ernie Hsiung, WordCamp MiamiApril, 2013
![Page 2: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/2.jpg)
WHO AM I?
![Page 3: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/3.jpg)
(Source: http://bit.ly/GBhFaj)
![Page 4: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/4.jpg)
WHAT HAS IMPACT EVER DONE TO YOU
The baby Jesus should never cry over a font
![Page 5: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/5.jpg)
UNIQUE, BUT APPROPRIATE
Actually, surprise! Most of this presentation will be in Impact.
But the point of it is is that in worlds of design and font selection: make sure whatever fonts you make are appropriate for whatever mood you design.
![Page 6: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/6.jpg)
![Page 7: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/7.jpg)
![Page 8: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/8.jpg)
It’s ironic that I am giving a presentation on fonts and design that I actually won’t be talking much about typography on a talk for fonts. There are probably talks better suited. Instead I’ll leave you with some quick thoughts.
![Page 9: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/9.jpg)
![Page 10: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/10.jpg)
CONTRAST REPETITIONALIGNMENTPROXIMITY
![Page 11: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/11.jpg)
CRAP
![Page 12: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/12.jpg)
![Page 13: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/13.jpg)
![Page 14: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/14.jpg)
FEDM font: Bevan (Google fonts)Caption font: Condiment (Google fonts)
![Page 15: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/15.jpg)
After kerning (CSS property: letter-spacing)
![Page 16: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/16.jpg)
![Page 17: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/17.jpg)
We used table tags and Times New Roman and we liked it
BACK IN THE OLD DAYS
![Page 18: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/18.jpg)
![Page 19: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/19.jpg)
The project manager said to the developers, as they wept and wept.
LET’S JUST USE IMAGES
![Page 20: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/20.jpg)
![Page 21: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/21.jpg)
<h1> <img src=”its-an-image-made-of-words.gif”></h1>
<font face=”Arial” size=”4”> <p>It’s a great day in 1996! I’m wearing my bucket hat and listening to my new Jordan Knight single!</p></font>
![Page 22: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/22.jpg)
Issues with screen readers or no-image settings?Blindness schmindness!
OKAY THEN, HOW ABOUT USING CSS
![Page 23: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/23.jpg)
<h1>Today’s thought of the day</h1>
<p>In 2035, we’ll turn to an oldies station and hear “Toxic” by Britney Spears.</p>
h1 { background: url(‘thought-of-day-img.gif’); background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px;}
![Page 24: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/24.jpg)
SIFR & CUFON
THE AMERICAN JUNIORS OF WEB REPLACEMENT TECHNIQUES
![Page 25: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/25.jpg)
@FONT-FACE
![Page 26: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/26.jpg)
<h1>Today’s thought of the day</h1>
<p>In 2035, we’ll turn to an oldies station and hear “Toxic” by Britney Spears.</p>
@font-face {! font-family: 'MyWebFont';! src: url('webfont.eot'); /* IE9 Compat Modes */! src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */! url('webfont.woff') format('woff'), /* Modern Browsers */! url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */! url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}
h1 { font-family: 'MyFontFamily', Fallback, sans-serif;}
![Page 27: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/27.jpg)
![Page 28: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/28.jpg)
![Page 29: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/29.jpg)
![Page 30: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/30.jpg)
For the love of all things Holy,
SHOW ME SOME LINKS
ALREADY
![Page 31: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/31.jpg)
![Page 32: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/32.jpg)
![Page 33: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/33.jpg)
![Page 34: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/34.jpg)
![Page 35: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/35.jpg)
![Page 36: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/36.jpg)
![Page 37: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/37.jpg)
![Page 38: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/38.jpg)
![Page 39: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/39.jpg)
![Page 40: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/40.jpg)
![Page 41: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/41.jpg)
MORE “DESIGNERY” STUFF
![Page 42: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/42.jpg)
![Page 43: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/43.jpg)
![Page 44: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/44.jpg)
![Page 45: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/45.jpg)
![Page 46: Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)](https://reader033.fdocuments.us/reader033/viewer/2022051611/54b4c38f4a795967178b463f/html5/thumbnails/46.jpg)
ANY QUESTIONS?Thanks for tuning in!
Ernie Hsiung ([email protected])Website: erniehsiung.comTwitter: @ErnieAtLYD