typography is to the internet as butter is to southern cooking 1 SRC http://letterpressdaughter.blogspot.com/2010/09/upper-case-lower-case.html TYPOGRAPHY is to the INTERNET as BUTTER is to SOUTHERN COOKING @elnatnal 

typography is to the internet as butter is to southern cooking 2 01 HIstory 02 does it really matter? 03 defIning a few words 04 how to choose?! 05 macro and micro 06 thinking in systems 07 modern tools 08 in closing 

typography is to the internet as butter is to southern cooking 3 Georgia Tahoma Arial Times New Roman Courier Lucida Lucida Console Impact 

typography is to the internet as butter is to southern cooking 4 Vandercook Letterpress circa 1930 SRC http://vandercookpress.info/vanderblog/ 

typography is to the internet as butter is to southern cooking 5 Typesetting example SRC http://spiritcreative.wordpress.com/2010/06/26/the-letterpress-typesetting-printing-process/ 

typography is to the internet as butter is to southern cooking 6 SRC http://letterpressdaughter.blogspot.com/2010/09/upper-case-lower-case.html Fun Fact Uppercase & Lowercase 

typography is to the internet as butter is to southern cooking 7 SRC http://williambottini.blogspot.com/2011_11_01_archive.html InDesign Screenshot Golden Ratio and calculations! 

typography is to the internet as butter is to southern cooking 8 Typography is one of the most essential ways human beings communicate to each other. It should be given its due. 

typography is to the internet as butter is to southern cooking 9 01 history 02 does it really matter? 03 defIning a few words 04 how to choose?! 05 macro and micro 06 thinking in systems 07 modern tools 08 in closing 

typography is to the internet as butter is to southern cooking 10 SRC http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson Higgs Boson announcement Comic Sans, how dare they?! 

typography is to the internet as butter is to southern cooking 11 SRC https://twitter.com/BadAstronomer/status/220428535037304832 Y’all can make fun of Comic Sans all you want when *you* discover a fundamental new particle that’s a key to modern physics. Phil Plait, @badastronomer 

typography is to the internet as butter is to southern cooking 12 SRC http://www.typographyforlawyers.com Typography for Lawyers Focused on improving legal typography 

typography is to the internet as butter is to southern cooking 13 SRC http://www.typographyforlawyers.com Typography for Lawyers Focused on improving legal typography 

typography is to the internet as butter is to southern cooking 14 SRC http://www.typographyforlawyers.com Typography for Lawyers Focused on improving legal typography 

typography is to the internet as butter is to southern cooking 15 RESRC http://informationarchitects.net/blog/the-web-is-all-about-typography-period/ IA Writer Simple interfaced writing application 

typography is to the internet as butter is to southern cooking 16 The freedom from distractions forces focus on the important stuff: content. And it’s delightful. 

typography is to the internet as butter is to southern cooking 17 01 history 02 DOES IT REALLY MATTER? 03 defIning a few words 04 how to choose?! 05 macro and micro 06 thinking in systems 07 modern tools 08 in closing 

typography is to the internet as butter is to southern cooking 18 Font Typeface Droid Serif, Regular 70pt Droid Serif, Regular Droid Serif, Italic Droid Serif, Bold Droid Serif, Bold Italic RESRC http://v1.jontangerine.com/log/2008/08/typeface--font 

typography is to the internet as butter is to southern cooking 19 Serif Garamond Helvetica Rockwell Inconsolata Becker Sans-serif Slab serif Blackletter Monospace 

typography is to the internet as butter is to southern cooking 20 SRC The Phantom Tollbooth by Norton Juster. Published 1961. pgs49-50. Milo nibbled carefully at the letter and discovered it was quite sweet and delicious—just the way you’d expect an A to taste. “I knew you’d like it,” laughed the letter man, popping to G’s and an R into his mouth and letting the juice drip down his chin. “A’s are one of our most popular letters. All of them aren’t that good,” he confided in a low voice. “Take the Z, for instance—very dry and sawdusty. And the X? Why, it tastes like a trunkful of stale air. That’s why people hardly ever use them. But most of the others are quite tasty. Try some more.” He gave Milo an I, which was icy and refreshing, and Tock took a crisp, crunchy C. “Most people are just too lazy to make their own words,” he continued, “but it’s much more fun.” “Is it difficult? I’m not much good at making words,” admitted Milo, splitting the pits from a P. 

typography is to the internet as butter is to southern cooking 21 SRC The Phantom Tollbooth by Norton Juster. Published 1961. pgs49-50. Milo nibbled carefully at the letter and discovered it was quite sweet and delicious—just the way you’d expect an A to taste. “I knew you’d like it,” laughed the letter man, popping to G’s and an R into his mouth and letting the juice drip down his chin. “A’s are one of our most popular letters. All of them aren’t that good,” he confided in a low voice. “Take the Z, for instance—very dry and sawdusty. And the X? Why, it tastes like a trunkful of stale air. That’s why people hardly ever use them. But most of the others are quite tasty. Try some more.” He gave Milo an I, which was icy and refreshing, and Tock took a crisp, crunchy C. “Most people are just too lazy to make their own words,” he continued, “but it’s much more fun.” “Is it difficult? I’m not much good at making words,” admitted Milo, splitting the pits from a P. Leading 

typography is to the internet as butter is to southern cooking 22 SRC The Phantom Tollbooth by Norton Juster. Published 1961. pgs49-50. Milo nibbled carefully at the letter and discovered it was quite sweet and delicious—just the way you’d expect an A to taste. “I knew you’d like it,” laughed the letter man, popping to G’s and an R into his mouth and letting the juice drip down his chin. “A’s are one of our most popular letters. All of them aren’t that good,” he confided in a low voice. “Take the Z, for instance—very dry and sawdusty. And the X? Why, it tastes like a trunkful of stale air. That’s why people hardly ever use them. But most of the others are quite tasty. Try some more.” He gave Milo an I, which was icy and refreshing, and Tock took a crisp, crunchy C. “Most people are just too lazy to make their own words,” he continued, “but it’s much more fun.” “Is it difficult? I’m not much good at making words,” admitted Milo, splitting the pits from a P. Line-height 

typography is to the internet as butter is to southern cooking 23 SRC http://xkcd.com/1015/, https://thebadkerningblog.wordpress.com/ Kerning 

typography is to the internet as butter is to southern cooking 24 Kerning != letter-spacing img SRC http://itssimplelove.blogspot.com/2010/07/flea-market-at-easter-market.html 

typography is to the internet as butter is to southern cooking 25 Kerning != letter-spacing *Also try the word-spacing property 

typography is to the internet as butter is to southern cooking 26 01 history 02 DOES IT REALLY MATTER? 03 DEFINING A FEW TERMS 04 HOW TO CHOOSE?! 05 macro and micro 06 thinking in systems 07 modern tools 08 in closing 

typography is to the internet as butter is to southern cooking 27 SRC From Metaphor to Maturity, Erik Spiekerman. Codex, Journal of Typography. pg.125 “The typographer, therefore, who did not hit upon the specially appropriate type, will not have done actual harm to the transmission of the meaning of the text, but he missed the opportunity to intensify the force of impression of the text in a considerable degree.” G.W. Ovink, Dutch typographer & historian, 1938 

typography is to the internet as butter is to southern cooking 28 Tall x-height x x x x x 

typography is to the internet as butter is to southern cooking 29 Tall x-height Slightly wider em width, not condensed em em em em em em em em em Droid Sans proxima nova condensed din engschrift georgia tahoma futura gill sans league gothic arno pro 

typography is to the internet as butter is to southern cooking 30 Tall x-height Slightly wider em width, not condensed Mostly devoid of style Hello World Bodoni Bodoni 

typography is to the internet as butter is to southern cooking 31 SRC http://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/ Tall x-height Slightly wider em width, not condensed Mostly devoid of style Serifs for larger type, sans for smaller Big Header Some body copy would typically go here. These are close approximations of the typography on Smashing Magazine. They use Skolar Bold and Proxima Nova. This is Meta Serif Bold and Museo Sans 300. 

typography is to the internet as butter is to southern cooking 32 

typography is to the internet as butter is to southern cooking 33 Categorization 

typography is to the internet as butter is to southern cooking 34 Categorization What’s available in the family? 

typography is to the internet as butter is to southern cooking 35 Categorization What’s available in the family? Contrast 

typography is to the internet as butter is to southern cooking 36 Categorization History of the face What’s available in the family? Contrast 

typography is to the internet as butter is to southern cooking 37 Categorization History of the face What’s available in the family? Contrast Hinting? img SRC http://www.grc.com/ct/ctwhat.htm 

typography is to the internet as butter is to southern cooking 38 01 history 02 DOES IT REALLY MATTER? 03 DEFINING A FEW TERMS 04 HOW TO CHOOSE?! 05 MACRO AND MICRO 06 thinking in systems 07 modern tools 08 in closing 

typography is to the internet as butter is to southern cooking 39 Macro typography Readability 

typography is to the internet as butter is to southern cooking 40 Macro typography Readability Layout 

typography is to the internet as butter is to southern cooking 41 Macro typography Readability Layout Widows and rivers Some body copy would typically go here. These are close approximations of the typography on Smashing Magazine. They use Skolar Bold and Proxima Nova. This is Meta Serif Bold and Museo Sans 300. Some body copy would typically go here. These are close approximations of the typography on Smash- ing Magazine. They use Skolar Bold and Proxima Nova. This is Meta Serif Bold and Museo Sans 300. 

typography is to the internet as butter is to southern cooking 42 *Shorter the line length, the “tighter” the line-height. The longer, the “looser.” Macro typography Readability Layout Widows and rivers Line length (45-85 chars.) Line-height 

typography is to the internet as butter is to southern cooking 43 Micro typography Legibility Letter-spacing Word-spacing 

typography is to the internet as butter is to southern cooking 44 Micro typography Legibility Letter-spacing Word-spacing Hyphens, en dashes and em dashes letter-spacing | 7–10 days | I wish you would—oh, never mind. 

typography is to the internet as butter is to southern cooking 45 01 history 02 DOES IT REALLY MATTER? 03 DEFINING A FEW TERMS 04 HOW TO CHOOSE?! 05 MACRO AND MICRO 06 THINKING IN SYSTEMS 07 modern tools 08 in closing 

typography is to the internet as butter is to southern cooking 46 

typography is to the internet as butter is to southern cooking 47 Start with the typography. Making it the foundation of a system will intertwine the content and design. 

typography is to the internet as butter is to southern cooking 48 Find a grid that works. Grids are wonderful inventions. A well designed grid allows many layouts within the contained system. A 24, 16, 12 out-of-the-box solution allows too much variability, ending up with a disjointed framework. 

typography is to the internet as butter is to southern cooking 49 It’s a malleable process. As you design your layouts based on the grid you created from the base font, your grid could change. That’s okay! You can have compound grids, multiple grids, hanging grids, etc. 

typography is to the internet as butter is to southern cooking 50 SRC https://twitter.com/CrowChick/status/239902550642536448 Today I said, “Fuck it. Design it in the browser.” And it came out pretty damn fine. Thanks, pre-existing grids and fonts! Now to populate. Rachel Nabors, @CrowChick 

typography is to the internet as butter is to southern cooking 51 01 history 02 DOES IT REALLY MATTER? 03 DEFINING A FEW TERMS 04 HOW TO CHOOSE?! 05 MACRO AND MICRO 06 THINKING IN SYSTEMS 07 MODERN TOOLS 08 in closing 

typography is to the internet as butter is to southern cooking 52 

typography is to the internet as butter is to southern cooking 53 Widow Tamer by Nathan Ford A Javascript to automatically fix typographic widows on your web pages. It is designed to work with responsive sites, fixing widows as it finds them on resize or orientation change . SRC https://github.com/nathanford/widowtamer 

typography is to the internet as butter is to southern cooking 54 Fit Text and Big Text “FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.” “At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child

typography is to the internet as butter is to southern cooking 55 FTColumnFlow by FT Labs A polyfill that fixes the inadequacies of CSS column layouts . SRC https://github.com/ftlabs/ftcolumnflow 

typography is to the internet as butter is to southern cooking 56 Bibliotype by Craig Mod A base for longform tablet typography in HTML. I think this might be good to play with and feel the intricacies of typography trying to set in book form. . SRC https://github.com/cmod/bibliotype 

typography is to the internet as butter is to southern cooking 57 Lettering.JS A lightweight, easy to use Javascript span injector for radical Web Typography Kern.JS A super-simple bookmarklet for designers that finally puts you back in control of your website’s typography SRC https://github.com/davatron5000/Lettering.js, https://github.com/bstro/kern.js 

typography is to the internet as butter is to southern cooking 58 01 history 02 DOES IT REALLY MATTER? 03 DEFINING A FEW TERMS 04 HOW TO CHOOSE?! 05 MACRO AND MICRO 06 THINKING IN SYSTEMS 07 MODERN TOOLS 08 IN CLOSING 

typography is to the internet as butter is to southern cooking 59 As the web matures and improves, the typographic divide between print and web will decrease. 

typography is to the internet as butter is to southern cooking 60 Typography is integral to communication and the foundation of the web. Let’s use it well. 

typography is to the internet as butter is to southern cooking 61 thank you. Slides at: http://bit.ly/RtifdC @elnatnal 

typography is to the internet as butter is to southern cooking 62 typography resources The Elements of Typographic Style by Robert Bringhurst Detail in Typography by Jost Hochuli Type & Typography by Phil Banes and Andrew Haslam The Art of Looking Sideways by Adam Fletcher Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann 

typography is to the internet as butter is to southern cooking 63 Griddy resources Grid Systems in Graphic Design by Josef Muller-Brockmann Grid Systems: Principles of Organizing Type (Design Briefs) by Kimberly Elam Thinking with Type by Ellen Lupton, and accompanying webste: http://www.thinkingwithtype.com/ Making and Breaking the Grid by Timothy Samara