Typography for the Web

Josh Nichols @mrblank

95%Web design is

http://informationarchitects.net/blog/the-web-is-all-about-typography-period/

typography

Rules

Thou shalt• Always use sans-serif text for body copy

• Always use ems for sizing type

• Always use black text on a white background

• Always use web-safe colors

• Always use web-safe fonts

• Always make links blue and underlined

• Never use italics

Nonsense

http://lostworldsfairs.com/eldorado/

http://jasonsantamaria.com/articles/chunky-in-fury

http://holidays.virb.com/

Beautiful type

http://trentwalton.com/2011/05/10/fit-to-scale/

http://trentwalton.com/examples/cowpoke/

http://lostworldsfairs.com/atlantis/

is possible

http://mattt.me/

http://lostworldsfairs.com/moon/

http://www.strangenative.com/foldup/

on the Web

http://www.castirondesign.com/

http://lefft.com/

http://stationstreetpgh.com/

Learn

http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/

http://www.peachpit.com/store/product.aspx?isbn=0201782634

http://webtypography.net/

Markup

" ≠ “

-- ≠ –

http://www.tinymce.com/

TinyMCE

http://daringfireball.net/projects/smartypants/

SmartyPants

" » “-- » –

http://www.shauninman.com/archive/2006/08/22/widont_wordpress_plugin

Widon’twidow

The lonely life of an unlucky widow widon’t

The lonely life of an unlucky widow

http://code.google.com/p/typogrify/

Typogrify

http://kingdesk.com/projects/wp-typography/

WP Typography

Style

The old way

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Default system fonts

http://cssfontstack.com/

Font Stack

body { font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal; font-style: normal;}

The new way

https://typekit.com/

http://www.webink.com/

http://www.fontsquirrel.com/

http://www.google.com/webfonts/

Hosted<script type="text/javascript" src="http://use.typekit.com/lbp4ytj.js"> </script><script type="text/javascript"> try{Typekit.load();}catch(e){} </script>

body { font-family: "proxima-nova", Arial, sans-serif; font-weight: 400; font-style: normal;}

Self-hostedLink to all the various font formats.@font-face { font-family: 'DejaVuSans'; src: url('fonts/DejaVuSans-webfont.eot'); src: url('fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/DejaVuSans-webfont.woff') format('woff'), url('fonts/DejaVuSans-webfont.ttf') format('truetype'), url('fonts/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg'); font-weight: normal; font-style: normal;}

For weight & styles, FontSquirrel gets it wrong.

Keep the font-family name the same and change the src, font-weight and font-style.

@font-face { font-family: 'DejaVuSans'; src: url('fonts/DejaVuSans-Bold-webfont.eot'); src: url('fonts/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/DejaVuSans-Bold-webfont.woff') format('woff'), url('fonts/DejaVuSans-Bold-webfont.ttf') format('truetype'), url('fonts/DejaVuSans-Bold-webfont. svg#DejaVuSansBookBold') format('svg'); font-weight: bold; font-style: normal;}

Build your stack.

body { font-family: "DejaVuSans", Arial, sans-serif; font-weight: normal; font-style: normal;}

Scripts

http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/

http://letteringjs.com/

http://fittextjs.com/

Tips

Choose wisely• Only embed the fonts you need.

• Watch for weight & style versions. Browsers will fake them poorly if missing.

• Some fonts don’t have all glyphs needed.

• Check font rendering on both Windows and Mac before designing. Not all look the same cross platform.

• If using a wide or condensed font, make sure your fallback in the stack won’t break your layout. http://modernizr.com/ can help fix that.

CSS• You can use measurements in px again!

• Tell browsers to use kerning and ligatures:

.foo { text-rendering: optimizelegibility; }

• Font smoothing for reversed text in Webkit on the Mac:

.foo { -webkit-font-smoothing: antialiased; font-smoothing: antialiased;

}

Thanks!

Josh Nichols @mrblank