Typography:Internet::Butter:Southern Cooking

We, as people of the internet, all share one thing in common: typography. Regardless of job titles, geography, or language, the web is a typographic medium that has finally come of age. More people know about the existence of fonts outside Times New Roman, Papyrus or Comic Sans than ever before, even having a few favorites! It's easy to get caught up in colors, images and videos jostling for our attention and overlook the subtle role words and prose play in our everyday lives.

I presented some foundations of typography, thoughts on how to design with it, and techniques/tools to use, design and improve your typography skills. You'll hear strange words like slugs, kerning, pangolins and grids. Whether you're new to the whole "font" thing or a seasoned typographic designer, there's something here for you.

Presented at Refresh the Triangle, at Bronto Headquarters in Durham, North Carolina and at WordCamp Raleigh in 2012.

Transcript

1. 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
2. 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
3. typography is to the internet as butter is to southern cooking 3 Georgia Tahoma Arial Times New Roman Courier Lucida Lucida Console Impact
4. typography is to the internet as butter is to southern cooking 4 Vandercook Letterpress circa 1930 SRC http://vandercookpress.info/vanderblog/
5. 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/
6. 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
7. 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!
8. 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.
9. 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
10. 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?!
11. 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
12. 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
13. 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
14. 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
15. 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
16. 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.
17. 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
18. 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
19. typography is to the internet as butter is to southern cooking 19 Serif Garamond Helvetica Rockwell Inconsolata Becker Sans-serif Slab serif Blackletter Monospace
20. 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.
21. 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
22. 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
23. typography is to the internet as butter is to southern cooking 23 SRC http://xkcd.com/1015/, https://thebadkerningblog.wordpress.com/ Kerning
24. 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
25. typography is to the internet as butter is to southern cooking 25 Kerning != letter-spacing *Also try the word-spacing property
26. 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
27. 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
28. typography is to the internet as butter is to southern cooking 28 Tall x-height x x x x x
29. 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
30. 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
31. 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.
32. typography is to the internet as butter is to southern cooking 32
33. typography is to the internet as butter is to southern cooking 33 Categorization
34. typography is to the internet as butter is to southern cooking 34 Categorization What’s available in the family?
35. typography is to the internet as butter is to southern cooking 35 Categorization What’s available in the family? Contrast
36. typography is to the internet as butter is to southern cooking 36 Categorization History of the face What’s available in the family? Contrast
37. 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
38. 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
39. typography is to the internet as butter is to southern cooking 39 Macro typography Readability
40. typography is to the internet as butter is to southern cooking 40 Macro typography Readability Layout
41. 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.
42. 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
43. typography is to the internet as butter is to southern cooking 43 Micro typography Legibility Letter-spacing Word-spacing
44. 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.
45. 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
46. typography is to the internet as butter is to southern cooking 46
47. 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.
48. 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.
49. 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.
50. 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
51. 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
52. typography is to the internet as butter is to southern cooking 52
53. 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
54. 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 <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.” SRC http://www.zachleat.com/web/fittext-and-bigtext/
55. 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
56. 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
57. 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
58. 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
59. 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.
60. 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.
61. typography is to the internet as butter is to southern cooking 61 thank you. Slides at: http://bit.ly/RtifdC @elnatnal
62. 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
63. 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