Web Typography
- 1. The History of Typography As told by a web designer
- 2. Who is this guy? Ryan Keairns ryankeairns.com twitter.com/ryankeairns dribbble.com/ryankeairns gofullstack.com
- 3. Typeface vs Font “...we choose and look at typefaces, just like we listen to songs. Fonts are the digital representation of a typeface that computers use to display our text, just like an mp3 file we use to play a song.” typogui.de
- 4. Web Safe Fonts In the beginning Most safe to use Arial / Helvetica Times New Roman / Times Courier New / Courier Usually work cross-platform Palatino Garamond Bookman Avant Garde Work on Windows and MacOS Verdana Georgia Comic Sans MS Trebuchet MS Arial Black Impact
- 5. Type as Graphics Glad that is (mostly) over PNG SWiFr Cufon
- 6. Pave the Cowpaths Universal web font formats TrueType OpenType WOFF SVG
- 7. @font-face which format? is it legal? it depends... @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?')format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }
- 8. Hosted Fonts Now we have the opposite problem Google Web Fonts Font-Squirrel LostTypeCoop fonts.com Adobe TypeKit Cloud.Typography MyFonts
- 9. How it Works Easy to implement HEADER <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> CSS p { font-family: ‘Montserrat’, Verdana, sans-serif; }
- 10. How it Works Difficult to roll your own “The CSS stylesheet provided by Google Web Fonts is a dynamic stylesheet which specifies the optimal file format for the visitors platform and browser. Why not inline the web font? Well, given the growing popularity of web fonts, the bet is that you already have a copy in your cache - no request is better than no request. Instead of storing N copies of Open Sans, one for each site, the browser maintains a single copy across all sites.” - Ilya Grigorik, Developer Advocate at Google
- 11. Tools Evaluate Web Fonts & Typography WhatFont (bookmarklet) TypeWonder.com fontsinuse.com type-scale.com letteringjs.com fittextjs.com font-to-width.com typecast.com sass.fffunction.co typeplate.com iosfonts.com Photoshop plugins
- 12. Mobile Web, iOS and Android iOS Helvetica Neue System 50+ embed Windows Segoe WP System 16+ embed Android Roboto System += Droid family embed
- 13. Tips A little bit goes a long way Start with one font or font family Look for variations in style, width and weight Use these variations along with color and size Try pairing one sans and one sans-serif Keep it readable
- 14. Learn Print design is coming to the web typogui.de Font pairings The Elements of Typographic Style webtypography.net
- 15. </ history of typography> @ryankeairns