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 (e@erniehsiung.com)Website: erniehsiung.comTwitter: @ErnieAtLYD