Post on 27-Jan-2015
description
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