Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)

5,086 views

Published on

Given at WordCamp Miami 2013.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,086
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)

  1. 1. IMPACT FONT It makes the baby jesus CRY(Alternate title: Font usage in WordPress Blogs) Ernie Hsiung, WordCamp Miami April, 2013
  2. 2. WHO AM I?
  3. 3. (Source: http://bit.ly/GBhFaj)
  4. 4. The baby Jesus should never cry over a font WHAT HAS IMPACT EVER DONE TO YOU
  5. 5. 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.UNIQUE, BUTAPPROPRIATE
  6. 6. It’s ironic that I amgiving a presentationon fonts and designthat I actually won’t betalking much abouttypography on a talkfor fonts. There areprobably talks bettersuited. Instead I’ll leaveyou with some quickthoughts.
  7. 7. CONTRASTREPETITIONALIGNMENTPROXIMITY
  8. 8. CRAP
  9. 9. FEDM font: Bevan (Google fonts)Caption font: Condiment (Google fonts)
  10. 10. After kerning (CSS property: letter-spacing)
  11. 11. BACK IN THE OLD DAYS We used table tags andTimes New Roman and we liked it
  12. 12. LET’S JUST USE IMAGESThe project manager said to the developers, as they wept and wept.
  13. 13. <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 mybucket hat and listening to my new Jordan Knightsingle!</p></font>
  14. 14. OKAY THEN, HOW ABOUT USING CSSIssues with screen readers or no-image settings? Blindness schmindness!
  15. 15. h1 { background: url(‘thought-of-day-img.gif’); background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px;}<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>
  16. 16. SIFR & CUFON THE AMERICAN JUNIORS OFWEB REPLACEMENT TECHNIQUES
  17. 17. @FONT-FACE
  18. 18. @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;}<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>
  19. 19. For the love of all things Holy, SHOW MESOME LINKS ALREADY
  20. 20. MORE “DESIGNERY” STUFF
  21. 21. Thanks for tuning in!ANY QUESTIONS? Ernie Hsiung (e@erniehsiung.com) Website: erniehsiung.com Twitter: @ErnieAtLYD

×