Crafting Efficient Type Systems for the Web

Typography on the Web has come a long way since font properties were first specified in CSS. Since then we've been facing new creative opportunities through @font-face and increasing OpenType support, but also new challenges, like managing webfont performance.

This talk re-evaluates the ways we select, combine and prepare fonts for the Web to create beautiful and performant typographic designs.

Transcript

1. Crafting Efficient Type Systems for the Web @fredericmarx
2. Typography on the web has come a long way (Screenshots via Typewolf)
3. Everybody loves webfonts
4. “It has a kind of abstract beauty I suppose.” — @seb_ly
5. Webfont loading, or: Why we can’t have nice things
6. Paragraph Up to 30 seconds Flash of Invisible Text FOIT
7. Flash of Unstyled Text FOUT Paragraph Paragraph
8. FOIT is the standard loading behaviour for CSS @font-face in most browsers
9. FOUT is achieved through loading fonts progressively with JavaScript
10. FOUT is not great but it’s better than up to 30 seconds without text content
11. “If even a small percentage of people don’t consume your content due to a use of webfonts, your typography is failing.” — Adam Morse
12. 3 Rules of Responsible Webfont Use 1. Use system fonts where possible 2. Keep your webfont payload as small as possible 3. Use a progressive font loading strategy
13. Rule 1 Use system fonts where possible
14. “System fonts can be beautiful. Webfonts are not a requirement for great typography.” — Adam Morse
15. Beautiful typography without webfonts: Jon Tan’s website from 2006
16. Some users block webfonts entirely to save bandwidth.
17. Every major operating system has a collection of fonts that are not entirely terrible.
18. Every major operating system has a font that is optimised for its user interface.
19. People are used to interacting with this UI font. It will feel instantly familiar.
20. How do we use system fonts?
21. “The font-family property value is a prioritized list of font family names and/or generic family names.” https://www.w3.org/wiki/CSS/Properties/font-family
22. Less common font, common font, generic family name
23. font-family: "Minion Pro", Georgia, serif;
24. Apple system font, Windows system font, Android system font, generic family name
25. font-family: "Avenir Next","Segoe UI", "Roboto", sans-serif;
26. Generic Family Names
27. Usable: serif, sans-serif, monospace Inconsistent: cursive, fantasy Bad browser support: caption, icon, menu, message-box, small-caption, status-bar
28. font-family: menu; /* Doesn’t work on mobile */
29. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans- serif;
30. “If text with InDesign is typesetting, a browser is more like typesuggesting.” — @jasonsantamaria
31. Web design: A set of suggestions for the browser to handle circumstances no designer can predict
32. Use OpenType features to customize fonts
33. Avenir Next: Old Style Numerals font-feature-settings: "onum" on;
34. Source Sans Pro: Stylistic Alternates font-feature-settings: "ss01", "ss02",…;
35. Notable System Fonts
36. Mac & iOS Seravek, 2007, Eric Olson (Mac OS only) Hoefler Text, 1991, Jonathan Hoefler Avenir, 1988, Adrian Frutiger
37. Windows Segoe UI, 2004, Steve Matteson Constantia, 2006, John Hudson Calibri, 2004, Lucas de Groot
38. Android Roboto, 2011, Christian Robertson Droid, 2007, Steve Matteson Noto, 2012–?, Various
39. 3 Rules of Responsible Webfont Use 1. Use system fonts where possible ✅ 2. Keep your webfont payload as small as possible 3. Use a progressive font loading strategy
40. Rule 2 Keep your webfont payload as small as possible
41. How much is too much?
42. Establish and keep a performance budget
43. Important metrics for performance budgets 1. Page Weight (kb/mb) 2. Start Render (s) 3. Fully Loaded (s) Source: https://speakerdeck.com/katiekovalcin/the-path-to-performance
44. If a feature or asset breaks the performance budget 1. Optimize an existing feature or asset on the page 2. Remove an existing feature or asset from the page. 3. Don’t add the new feature or asset. Source: http://fsm.bdconf.com/podcast/web-performance
45. A performance budget forces us to prioritize features and assets
46. A performance budget keeps the conversation going between designers and developers
47. “Our business is trading bytes for features, responsibly.” — @zachleat
48. Font is to typeface as MP3 is to song or DVD is to movie.
49. Every style and every weight of a typeface is another font, is another file
50. Rafg Rafg Rafg Rafg
51. Make every font count
52. Text Typeface Every typeface on a page exists in relation to the main text typeface
53. Emphasis Decoration Block Contrast Utility
55. Emphasis Decoration Block Contrast Utility Webfont
56. Emphasis Decoration Block Contrast Utility Webfont System Font System Font
57. Type systems emerge from relations between fonts
58. “But there are so many fonts. How do I find the right one?”
59. Step 0 Does the font fulfill all technical requirements? Are all characters present? Language specific special characters, currency symbols, etc. What are the licensing conditions?
60. If you’re not sure whether a font is good, … …find out the circumstances under which it was made …check if it was released by a reputable foundry …ask a consultant or your font retailer
61. 1 Serif Humanist, Realist, Rational, Variants, Decorative 2 Sans Humanist, Grotesque, Geometric, Variants, Decorative 3 Slab Humanist, Rational, Geometric, Variants, Decorative 4 Script Chancery, Roundhand, Handwritten, Decorative 5 Blackletter 6 Pi Classification
62. “Type classifications are useful, but the common ones are not.” — Indra Kupferschmid
63. User centric approach: Micro- classification or tagging
64. Ramburgefons Abril Fatface Serif, bold, high contrast, static contrast, headline, double storey a, double storey g
65. Ramburgefons Bree Serif Slab-serif, low contrast, single storey a, headline, single storey g, large x-height
66. Ramburgefons Alegreya Serif, medium contrast, dynamic contrast, text, double storey a, double storey g
67. Families & Superfamilies Robert Bringhurst: The Elements of Typographic Style
68. It’s easy to combine fonts that share the same form principles martinmajoor.com
69. “We don’t need all members of a large family; we need large families to pick the members that work for the project.” — Indra Kupferschmid 100besttypefaces.com
70. Thesis: Superfamily of typefaces sharing the same construction principles lucasfonts.com
71. Antithesis: Similar proportions, different weight and construction antithesis.de
73. Matching x-height and horizontal rhythm are crucial for combining inline fonts
74. Typography is the craft of endowing human language with a durable visual form. Merriweather with Merriweather Sans Bold
75. Typography is the craft of endowing human language with a durable visual form. Merriweather Sans with Merriweather Italic
76. Subsetting
77. Fontsquirrel Webfont Generator
80. 1234567890& Decorative subset of Playfair Display Bold
81. Subsetting can be used to hard-code OpenType settings into a font
82. File Formats
83. You can provide multiple files for one font. Always include the best format available (currently WOFF2)
84. 3 Rules of Responsible Webfont Use 1. Use system fonts where possible ✅ 2. Keep your webfont payload as small as possible ✅ 3. Use a progressive font loading strategy
85. Rule 3 Use a progressive font loading strategy
86. Loading fonts via CSS @font-face leads to Flash of Invisible Text
87. The Web is a time-based medium
88. The goal of progressive font loading strategies is orchestrating font loading over time
89. Progressive font loading 1. Apply basic styles without webfonts 2. Load webfonts progressively 3. Apply enhanced styles when webfonts become available
90. If you use a webfont service, always choose the JavaScript / async option
91. Font Face Observer JavaScript webfont loader by @bram_stein (Typekit) https://github.com/bramstein/fontfaceobserver
92. new window.FontFaceObserver("Source Sans Pro") .check() .then(function(){ window.document.documentElement.className += " fonts-loaded"; });
93. CSS Font Loading Module Level 3 W3C Standard for authoring font loading behavior (Editor’s Draft, 13 April 2016)
94. CSS Font Loading Module Level 3 Chrome 35 – 46, Firefox 41 – 42, Opera 22 – 33 http://stateofwebtype.com/#loading
95. Can be combined with other Web APIs like Service Worker or Local Storage to create custom font loading solutions
96. Webfont loading strategies https://www.bramstein.com/writing/web-font-loading-patterns.html https://www.filamentgroup.com/lab/font-events.html http://www.zachleat.com/web/critical-webfonts/
97. 3 Rules of Responsible Webfont Use 1. Use system fonts where possible ✅ 2. Keep your webfont payload as small as possible ✅ 3. Use a progressive font loading strategy ✅
98. “Proper measure. Appropriate leading. Accessible contrast. A well thought out type-scale. All more valuable to your readers than webfonts.” — Adam Morse
99. “Beauty, legibility, subtlety, these are the qualities that are possible with the help of web fonts and without them we are left with a dismal landscape devoid of visual grace or wit.” — Robin Rendle
100. Sustainable product design means forming a relationship with our audience over time
101. A visitor from a search result or social link has different needs than a regular visitor
102. We should not just ask whether we should use webfonts, but also when.
103. Thank you @fredericmarx