Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
of 46
/46
-
Upload
ernie-hsiung -
Category
Technology
-
view
4.142 -
download
0
Embed Size (px)
description
Given at WordCamp Miami 2013.
Transcript of Impact Makes the Baby Jesus Cry (or: Font usage in WordPress Blogs)
IMPACT FONTbaby jesus
It makes the
CRY(Alternate title: Font usage in WordPress Blogs)
Ernie Hsiung, WordCamp MiamiApril, 2013
WHO AM I?
(Source: http://bit.ly/GBhFaj)
WHAT HAS IMPACT EVER DONE TO YOU
The baby Jesus should never cry over a font
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.
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.
CONTRAST REPETITIONALIGNMENTPROXIMITY
CRAP
FEDM font: Bevan (Google fonts)Caption font: Condiment (Google fonts)
After kerning (CSS property: letter-spacing)
We used table tags and Times New Roman and we liked it
BACK IN THE OLD DAYS
The project manager said to the developers, as they wept and wept.
LET’S JUST USE IMAGES
<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>
Issues with screen readers or no-image settings?Blindness schmindness!
OKAY THEN, HOW ABOUT USING CSS
<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;}
SIFR & CUFON
THE AMERICAN JUNIORS OF WEB REPLACEMENT TECHNIQUES
@FONT-FACE
<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;}
For the love of all things Holy,
SHOW ME SOME LINKS
ALREADY
MORE “DESIGNERY” STUFF
ANY QUESTIONS?Thanks for tuning in!
Ernie Hsiung ([email protected])Website: erniehsiung.comTwitter: @ErnieAtLYD
