Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Wonderful World of (web) Typography

553 views

Published on

Typography is the foundation of any website. We are increasingly aware of typography all around us. We avoid or spend less time on sites with hard-to-read text. We have favorite fonts (and will passionately defend them)! No matter your role on a project, having a better understanding of typography will help you to communicate with clarity.

There are more ways than ever to implement custom, beautiful typography on your websites (and beyond). But a new plethora of options can make the selection process even more difficult. This session will teach you the foundations of typography, help you navigate this sea of typographic possibilities, and understand why good type should be your primary focus. We'll also explore ways that typography affects your user experience on the web and beyond.

Published in: Design
  • Be the first to comment

  • Be the first to like this

The Wonderful World of (web) Typography

  1. 1. The wonderful world Garret Voorhees DrupalCon Los Angeles / May 12, 2015 Senior Designer & UX Strategist, Chapter Three of typography[web]
  2. 2. chapter_three
  3. 3. Typography: a primer
  4. 4. What is typography?
  5. 5. WARNING! What you are about to see cannot be unseen.
  6. 6. nicolasdamiens.com/project/tokyo-no-ads/
  7. 7. nicolasdamiens.com/project/tokyo-no-ads/
  8. 8. flickr.com/groups/trajanfilmposter
  9. 9. flickr.com/groups/trajanfilmposter
  10. 10. flickr.com/groups/trajanfilmposter
  11. 11. flickr.com/groups/trajanfilmposter
  12. 12. flickr.com/groups/trajanfilmposter
  13. 13. flickr.com/groups/trajanfilmposter
  14. 14. flickr.com/groups/trajanfilmposter
  15. 15. nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html
  16. 16. nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html
  17. 17. nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html
  18. 18. instagram.com/seblester
  19. 19. instagram.com/seblester
  20. 20. Old Style Hamburgefonstiv 12345 Hamburgefonstiv 12345 Hamburgefonstiv 12345 Hamburgefonstiv 12345 Transitional Modern Egyptian/Slab Sabon Baskerville Bodoni Glypha SERIF
  21. 21. Hamburgefonstiv 12345 Hamburgefonstiv 12345 Hamburgefonstiv 12345 Hamburgefonstiv 12345 Grotesque Neo Grotesque Geometric Sans Humanist Sans Franklin Gothic Helvetica Neue Futura Frutiger SANS SERIF
  22. 22. g g g g g g Old Style Transitional Modern Egyptian/Slab Geometric Sans Humanist Sans g g Grotesque Neo Grotesque
  23. 23. Anatomy
  24. 24. acounter bowl stem arm serif another counter terminal
  25. 25. xBlingbaseline cap height meanline ascender descender x-height serif
  26. 26. Helvetica Light Light Oblique Roman Oblique Bold Bold Oblique Black Black Oblique Font Family Typeface
  27. 27. 12 pt Point Size
  28. 28. these pretzels are making me thirsty!
  29. 29. 14 pt Leading/Linespacing think different
  30. 30. 12 pt turkey pesto wrap 12 pt 12 pt 15 pt 15 pt 12/15 “Twelve
 on fifteen”
  31. 31. RECOMMENDED READING The Laws of Simplicity John Maeda Stop Stealing Sheep &
 find out how type works Erik Spiekermann Thinking With Type Ellen Lupton Grid Systems in Graphic Design Josef Müller-Brockman The Elements of
 Typographic Style Robert Bringhurst On Web Typography Jason Santa Maria
  32. 32. Helvetica or Arial?
  33. 33. a a Helvetica Arial
  34. 34. r r Helvetica Arial
  35. 35. t t Helvetica Arial
  36. 36. s s Helvetica Arial
  37. 37. R R Helvetica Arial
  38. 38. G G Helvetica Arial
  39. 39. Q Q Helvetica Arial
  40. 40. Y Y Helvetica Arial
  41. 41. wizard wizard
  42. 42. school school
  43. 43. potato potato
  44. 44. monkey monkey
  45. 45. BUFFALO BUFFALO
  46. 46. Selecting a typeface
  47. 47. Do I need a 
 large family? Will it be used 
 for print? How will it display
 cross-platform? Does it convey 
 the right tone? What sort of content 
 will it be used for? What style of numerals
 are included? https://flic.kr/p/5cFp9s Do I need to support non-Latin characters?
  48. 48. Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv
  49. 49. The quick brown fox jumps over the lazy dog. www.clagnut.com/blog/2380
  50. 50. Pack my box with five dozen liquor jugs. www.clagnut.com/blog/2380
  51. 51. Jackdaws love my big sphinx of quartz. www.clagnut.com/blog/2380
  52. 52. Grumpy wizards make toxic brew for the evil queen and jack. www.clagnut.com/blog/2380
  53. 53. Skillets served sizzlin’ hot. Three-egg omelettes are served with hash browns and choice of bread. NEW! pancakes Sides Philly Cheesesteak Omelette Hearty Breakfast Skillet Santa Fe Skillet Cinnamon Pancake Breakfast Banana Pecan Pancake Breakfast Country-Fried Steak & Eggs T-Bone Steak & Eggs OMELETTES & SKILLETSOMELETTES & SKILLETS FAVORITESFAVORITES Meat Lover’s Omelette Grilled prime rib, crumbled chorizo sausage, bacon, fire-roasted bell peppers and onions, and Cheddar cheese covered with Pepper Jack queso. Ham & Cheese Omelette Diced ham, melted Swiss and American cheeses. Philly Cheesesteak Omelette Grilled prime rib, fire-roasted bell peppers and onions, sautéed mushrooms and melted Swiss cheese. Loaded Veggie Omelette Fresh spinach, mushrooms, sautéed zucchini and squash, diced tomatoes and melted Swiss cheese. Ultimate Omelette® Crumbled sausage, bacon, fire-roasted bell peppers and onions, mushrooms, diced tomatoes and shredded Cheddar cheese. Over 20g of protein when you choose egg whites, seasonal fruit and an English muffin as your side choices Under 15g of fat Start your day off right with a large, refreshing glass of Minute Maid ® Orange Juice. Add toast or tortillas to any skillet pancake Puppies® Add six delicious bite-sized round pancakes rolled in cinnamon sugar and served with warm syrup. *Eggs servedover-easy, poached, sunny-side-up or soft-boiledandsteaksthatareservedrare or medium-raremaybeundercookedandwill onlybe servedupontheconsumers’ request. NOTICE: Consuming raworundercookedmeats, poultry,seafood,shellfish oreggs mayincrease your riskoffoodborne illness, especiallyifyouhavecertain medicalconditions. CAUTION: Skillets are hot. Handle with care. Fit Fare® Veggie Skillet Seasoned red-skinned potatoes, fire-roasted bell peppers and onions, mushrooms and broccoli topped with two egg whites scrambled with spinach and grape tomatoes. Served with a side of salsa. Ultimate Skillet Grilled sausage, fresh spinach, fire-roasted bell peppers and onions, mushrooms, grape tomatoes and seasoned red-skinned potatoes. Topped with Cheddar cheese and two eggs.* Hearty Breakfast Skillet A hearty breakfast sausage with seasoned red-skinned potatoes, sautéed mushrooms and fire-roasted bell peppers and onions. Topped with shredded Cheddar cheese and two eggs.* Under 550 calories Cinnamon Pancake Breakfast Cinnamon sauce and cream cheese icing drizzled over two buttermilk pancakes. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup. Red-Skinned Potatoes Hash Browns Cheddar Cheese Hash Browns Everything Hash Browns (Onions, Cheddar cheese & country gravy) Grits (6 am - 2 pm only) Oatmeal (6 am - 2 pm only) Yogurt Seasonal Fruit (Selection may vary.) Bacon Strips (4) Turkey Bacon Strips (4) Sausage Links (4) Hearty Breakfast Sausage (1) Chicken Sausage Patties (2) Grilled Ham Slice Eggs* (Each) Slices of Toast (2) Buttermilk Biscuits (2) English Muffin Moons Over My Hammy® Our classic ham and scrambled egg sandwich with Swiss and American cheeses on grilled sourdough. Served with hash browns. T-Bone Steak* & Eggs* A tender 13 oz. seasoned T-Bone steak* served with two eggs,* hash browns and choice of bread. Country-Fried Steak & Eggs* A golden-fried chopped beef steak smothered in rich country gravy. Served with two eggs,* hash browns and choice of bread. Peanut Butter Cup Pancake Breakfast Chocolate chips and white chocolate chips inside two buttermilk pancakes, topped with hot fudge and drizzled with peanut butter sauce. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup. Banana Pecan Pancake Breakfast Glazed pecans cooked inside two hearty wheat pancakes and topped with fresh banana slices. Served with two scrambled egg whites, two strips of turkey bacon and a side of warm syrup. Blueberry Pancake Breakfast Juicy blueberries cooked inside two buttermilk pancakes. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup. Under 15g of fat Over 8g of fiber Over 20g of protein Santa Fe Skillet Crumbled chorizo sausage, fire-roasted bell peppers and onions, mushrooms and seasoned red-skinned potatoes. Topped with Cheddar cheese and two eggs.* Under 550 calories Hearty Breakfast Skillet Fit Fare® Veggie Skillet Seasoned red-skinned potatoes, fire-roasted bell peppers and onions, mushrooms and broccoli topped with two egg whites scrambled with spinach and grape tomatoes. Served with a side of salsa. Over 20g of protein Santa Fe Skillet Under 550 calories T-Bone Steak & Eggs pancake Puppies® Add six delicious bite-sized round pancakes rolled in cinnamon sugar and served with warm syrup. Moons Over My Hammy® Our classic ham and scrambled egg sandwich withSwiss and American cheeses on grilled sourdough.Served with hash browns.
  54. 54. central kitchen may 7, 2015 DUCK BREAST & CONFIT smoked foie gras. pickled ramps. 33 LAMB ROAST garbanzo. chermoula. snow peas. 35 KING SALMON artichoke. borage. fiddleheads. 32 PORCHETTA for two pickles. condiments. relishes. 80 CHICKPEA PANISSE yogurt. sunflower seed. cilantro. 8 LIVER MOUSSE hazelnut. cherry gelée. 11 PORK COUNTRY PÂTÉ avocado. horseradish. 12 THREE CHEESES* lavosh. rhubarb jam. walnut. 18 LET THE KITCHEN DECIDE 75/per person BEVERAGE pairing 45/per person bread upon request *consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illness a 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff FENNEL & STRAWBERRY fresh ricotta. pistachio. 13 WAGYU BEEF TARTARE grilled sourdough. anchovy. nasturtium. 17 OCTOPUS TERRINE peas. miso. basil. 18 CHARRED ASPARAGUS trout roe. spring onion. pullet egg. 18 PORCINI SPAGHETTI speck. morels. ramp greens. 22 PORK AGNOLOTTI fava bean. preserved lime. 21 JOIN US FOR SUNDAY BRUNCH 10:30AM – 2:00PM smoked foie gras. pickled ramps. 33 LAMB ROAST garbanzo. chermoula. snow peas. 35 KING SALMON artichoke. borage. fiddleheads. 32 PORCHETTA for two pickles. condiments. relishes. 80 F fresh ricotta. pistachio. 13 WAGYU BEEF TARTARE grilled sourdough. anchovy. nasturtium. 17 OCTOPUS TERRINE peas. miso. basil. 18 CHARRED ASPARAGUS trout roe. spring onion. pullet egg. 18 PORCINI SPAGHETTI speck. morels. ramp greens. ar p PORK COUNTRY PÂTÉ avocado. horseradish. 12 THREE CHEESES* lavosh. rhubarb jam. walnut. 18 LET THE KITCHEN DECIDE 75/per person BEVERAGE pairing 45/per person OCTOPUS TERRINE peas. miso. basil. 18 CHARRED ASPARAGUS trout roe. spring onion. pullet egg. 18 PORCINI SPAGHETTI speck. morels. ramp greens. 22 PORK AGNOLOTTI fava bean. preserved lime. 21 JOIN US FOR SUNDAY BRUNCH 10:30AM – 2:00PM
  55. 55. Skillets served sizzlin’ hot. Three-egg omelettes are served with hash browns and choice of bread. NEW! pancakes Sides Philly Cheesesteak Omelette Hearty Breakfast Skillet Santa Fe Skillet Cinnamon Pancake Breakfast Banana Pecan Pancake Breakfast Country-Fried Steak & Eggs T-Bone Steak & Eggs OMELETTES & SKILLETS OMELETTES & SKILLETS FAVORITESFAVORITES Meat Lover’s Omelette Grilled prime rib, crumbled chorizo sausage, bacon, fire-roasted bell peppers and onions, and Cheddar cheese covered with Pepper Jack queso. Ham & Cheese Omelette Diced ham, melted Swiss and American cheeses. Philly Cheesesteak Omelette Grilled prime rib, fire-roasted bell peppers and onions, sautéed mushrooms and melted Swiss cheese. Loaded Veggie Omelette Fresh spinach, mushrooms, sautéed zucchini and squash, diced tomatoes and melted Swiss cheese. Ultimate Omelette® Crumbled sausage, bacon, fire-roasted bell peppers and onions, mushrooms, diced tomatoes and shredded Cheddar cheese. Over 20g of protein when you choose egg whites, seasonal fruit and an English muffin as your side choicesUnder 15g of fat Start your day off right with a large, refreshing glass of Minute Maid ® Orange Juice. Add toast or tortillas to any skillet pancake Puppies® Add six delicious bite-sized round pancakes rolled in cinnamon sugar and served with warm syrup. *Eggsservedover-easy, poached,sunny-side-up orsoft-boiledandsteaksthatareservedrareor medium-raremaybeundercookedandwillonlybe servedupontheconsumers’ request. NOTICE: Consumingraworundercookedmeats, poultry,seafood,shellfishoreggsmayincreaseyour riskoffoodborneillness,especiallyifyouhavecertain medicalconditions. CAUTION: Skillets are hot. Handle with care. Fit Fare® Veggie Skillet Seasoned red-skinned potatoes, fire-roasted bell peppers and onions, mushrooms and broccoli topped with two egg whites scrambled with spinach and grape tomatoes. Served with a side of salsa. Ultimate Skillet Grilled sausage, fresh spinach, fire-roasted bell peppers and onions, mushrooms, grape tomatoes and seasoned red-skinned potatoes. Topped with Cheddar cheese and two eggs.* Hearty Breakfast Skillet A hearty breakfast sausage with seasoned red-skinned potatoes, sautéed mushrooms and fire-roasted bell peppers and onions. Topped with shredded Cheddar cheese and two eggs.* Under 550 calories Cinnamon Pancake Breakfast Cinnamon sauce and cream cheese icing drizzled over two buttermilk pancakes. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup. Red-Skinned Potatoes Hash Browns Cheddar Cheese Hash Browns Everything Hash Browns (Onions, Cheddar cheese & country gravy) Grits (6 am - 2 pm only) Oatmeal (6 am - 2 pm only) Yogurt Seasonal Fruit (Selection may vary.) Bacon Strips (4) Turkey Bacon Strips (4) Sausage Links (4) Hearty Breakfast Sausage (1) Chicken Sausage Patties (2) Grilled Ham Slice Eggs* (Each) Slices of Toast (2) Buttermilk Biscuits (2) English Muffin Moons Over My Hammy® Our classic ham and scrambled egg sandwich with Swiss and American cheeses on grilled sourdough. Served with hash browns. T-Bone Steak* & Eggs* A tender 13 oz. seasoned T-Bone steak* served with two eggs,* hash browns and choice of bread. Country-Fried Steak & Eggs* A golden-fried chopped beef steak smothered in rich country gravy. Served with two eggs,* hash browns and choice of bread. Peanut Butter Cup Pancake Breakfast Chocolate chips and white chocolate chips inside two buttermilk pancakes, topped with hot fudge and drizzled with peanut butter sauce. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup. Banana Pecan Pancake Breakfast Glazed pecans cooked inside two hearty wheat pancakes and topped with fresh banana slices. Served with two scrambled egg whites, two strips of turkey bacon and a side of warm syrup. Blueberry Pancake Breakfast Juicy blueberries cooked inside two buttermilk pancakes. Served with two eggs* and hash browns, plus your choice of two strips of bacon or two sausage links and a side of warm syrup. Under 15g of fat Over 8g of fiberOver 20g of protein Santa Fe Skillet Crumbled chorizo sausage, fire-roasted bell peppers and onions, mushrooms and seasoned red-skinned potatoes. Topped with Cheddar cheese and two eggs.* Under 550 calories central kitchen may 7, 2015 DUCK BREAST & CONFIT smoked foie gras. pickled ramps. 33 LAMB ROAST garbanzo. chermoula. snow peas. 35 KING SALMON artichoke. borage. fiddleheads. 32 PORCHETTA for two pickles. condiments. relishes. 80 CHICKPEA PANISSE yogurt. sunflower seed. cilantro. 8 LIVER MOUSSE hazelnut. cherry gelée. 11 PORK COUNTRY PÂTÉ avocado. horseradish. 12 THREE CHEESES* lavosh. rhubarb jam. walnut. 18 LET THE KITCHEN DECIDE 75/per person BEVERAGE pairing 45/per person bread upon request *consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illnessa 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff FENNEL & STRAWBERRY fresh ricotta. pistachio. 13 WAGYU BEEF TARTARE grilled sourdough. anchovy. nasturtium. 17 OCTOPUS TERRINE peas. miso. basil. 18 CHARRED ASPARAGUS trout roe. spring onion. pullet egg. 18 PORCINI SPAGHETTI speck. morels. ramp greens. 22 PORK AGNOLOTTI fava bean. preserved lime. 21 JOIN US FOR SUNDAY BRUNCH 10:30AM – 2:00PM
  56. 56. Sentinel Gotham Proxima Nova
  57. 57. FontFace Ninja www.fontface.ninja
  58. 58. FontFace Ninja www.fontface.ninja
  59. 59. WhatTheFont www.myfonts.com/WhatTheFont
  60. 60. www.typecast.com/preview/google Typecast
  61. 61. File formats
  62. 62. PostScript .PS Developed by Adobe Released in 1984 TrueType .TTF Developed by Apple (and Microsoft later) Released in 1991 (Mac OS 7) (cubic bézier) (quadratic bézier)
  63. 63. OpenType .OTF Developed by Microsoft and Adobe Released 1997
  64. 64. wafflewaf lef
  65. 65. k � � � �
  66. 66. 1234567890 1234567890 TABULAR/LINING OLD STYLE 1234567890 1234567890
  67. 67. css-tricks.com/snippets/css/using-font-face
  68. 68. Web Open Font FormatWOFF Developed by Mozilla, Opera and Microsoft 1.0 spec released to W3C in 2010 All major browsers! Scalable Vector GraphicsSVG Developed by W3C Released in 2001 Webkit ONLY (Safari & Mobile Safari) Ŏ Embedded OpenTypeEOT Developed by Microsoft Released in 2007 (and rejected by W3C) Internet Explorer ONLYŏŏ TrueTypeTTF Developed by Apple Released in 1991 (Mac OS 7) All major browsers!Ŏ
  69. 69. Licensing
  70. 70. Subscription Pay as you go ‣ $50–120/year ‣ often include monthly pageview limits ‣ convenience and flexibility ‣ fonts hosted on their servers ‣ $35–55 per style ‣ 250,000 pageviews (and up) ‣ when you know exactly what you need ‣ option to host fonts yourself
  71. 71. Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 Proxima Nova Meta Meta Serif Adelle Tisa Futura Minion
  72. 72. Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890Sentinel Whitney Gotham Archer Gotham Narrow Forza Vitesse
  73. 73. HamburgefonstivOpen Sans HamburgefonstivSource Sans Pro HamburgefonstivFira Sans HamburgefonstivPT Serif HamburgefonstivLato HamburgefonstivDroid Serif HamburgefonstivRoboto 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 Source on Github! Source on Github! Fonts
  74. 74. ‣to involve others in your font project ‣to enable your fonts to be expanded 
 with new weights and improved writing system/language support ‣to allow your font to be included
 in Libre Software operating systems
 like Ubuntu ‣to educate students about
 quality typeface and font design ‣to expand your test base and
 get more useful feedback ‣to give back and contribute
 to a growing body of font sources http://scripts.sil.org/OFL SIL OPEN FONT LICENSE
  75. 75. 100daysoffonts.com
  76. 76. 100daysoffonts.com
  77. 77. 100daysoffonts.com
  78. 78. 100daysoffonts.com
  79. 79. The League of
 Moveable Type www.theleagueofmoveabletype.com
  80. 80. The -ilities
  81. 81. ReadabilityLegibility Usability Accessibility
  82. 82. Legibility
  83. 83. (Wolves in the Throne Room)
  84. 84. (Borknagar)
  85. 85. (Dark Throne)
  86. 86. milliliter milliliter milliliter milliliter milliliter milliliter thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed
  87. 87. Readability https://flic.kr/p/djgWR8
  88. 88. A visual mind is interested in anything that you see, and a literary mind is interested in anything you think. A literary mind is interested in people. A visual mind is interested in things, objects, nature. This doesn’t mean that you look and don’t think. Of course, you do that, too. But a literary mind is more prone to thinking than looking visually. They like to read. They like to analyze things from a psychological point of view. Writers like this write about isolation, and some write about being together. Each one investigates one action of the mind. And the mind, being as complex as it is, is an endless source of investigation. A visual mind is interested in anything that you see, and a literary mind is interested in anything you think. A literary mind is interested in people. A visual mind is interested in things, objects, nature. This doesn’t mean that you look and don’t think. Of course, you do that, too. But a literary mind is more prone to thinking than looking visually. They like to read. They like to analyze things from a psychological point of view. Writers like this write about isolation, and some write about being together. Each one investigates one action of the mind. And the mind, being as complex as it is, is an endless source of investigation. Can you even read this bro?
  89. 89. Text size Leading/line spacing Line length Text contrast Text alignment Vocabulary/syntax KEY FACTORS
  90. 90. Usability
  91. 91. https://flic.kr/p/5cUMt9
  92. 92. Accessibility
  93. 93. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee
 W3C Director and inventor 
 of the World Wide Web
  94. 94. webaim.org/resources/contrastchecker Although stylish, this one is probably more difficult to read than the text on the right, even if you have good eyesight. There’s probably someone in this room right now with worse eyesight than you and they deserve to read things too! 3.34 : 1 7.6 : 1
  95. 95. Accessibility supports social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries. www.w3.org/standards/webdesign/accessibility
  96. 96. Typography on the web
  97. 97. If you take away all of the text on a website…
  98. 98. Typography in gaming
  99. 99. Higher resolution screens mean higher quality typography.
  100. 100. NES 256x240 SNES 512x448 (max) N64 640x480 (max)
  101. 101. NES SNES N64256x240 512x448 (max) 640x480 (max)
  102. 102. Type is all around you.

×