Download - Web Typography, A Long Dark
![Page 1: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/1.jpg)
Web TypographyA Long Dark Rant
![Page 2: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/2.jpg)
95% of the information on the
web is written language
http://ia.net/blog/the-web-is-all-about-typography-period/
![Page 3: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/3.jpg)
Typography is the visual expression of
language
![Page 4: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/4.jpg)
![Page 5: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/5.jpg)
We are all typographersYes, you, internet people
![Page 6: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/6.jpg)
Ryan LaBouveUX • Designer • Typographer
me
@RyanLaBouve
![Page 7: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/7.jpg)
@RyanLaBouve
![Page 8: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/8.jpg)
HolyArchers
@RyanLaBouve
![Page 9: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/9.jpg)
Soon to be Dad
@RyanLaBouve
![Page 10: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/10.jpg)
@RyanLaBouve
![Page 11: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/11.jpg)
Why I’m personally interested in typography
Tim Brown’s More Perfect Typography
After watching this I
knew I was supposed to
be a designer.
http://vimeo.com/17079380
![Page 12: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/12.jpg)
3 Goals Today
• Show the impact of typography
• Show where typography is from and where its’ going
• Give you practical ways to practice (on as many platforms as possible)
![Page 13: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/13.jpg)
Obstacles
• Type is hard
• There are no rules
• There are a lot of variables
![Page 14: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/14.jpg)
Worth It
• Happier Users
• Represents Content Better
• Works on more platforms
![Page 15: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/15.jpg)
All typographic knowledge
Knowledge you need for proficiency
What you need to know to be good
Good News
![Page 16: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/16.jpg)
Our Project
http://publicdomainreview.org/collections/george-withers-emblem-book-1635/
Before
After
![Page 17: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/17.jpg)
History
![Page 18: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/18.jpg)
Where do letters come from?
![Page 19: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/19.jpg)
The history of typography reflects a continual tension between
hand and machine. Organic and the geometric, the human body
and the abstract system. These tensions, which marked the birth
of printed letters over five hundred years ago, continue to
energize typography today.
—Ellen Lupton in Thinking With Type
“
”
![Page 20: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/20.jpg)
Modern Writing Systems
Arabic (Abjad)
Hangul (Syllabic)
Latin (Alphabetic)
French Spanish Italian English Dutch German Irish Welsh Czech Polish
Chinese (Logographic)
![Page 21: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/21.jpg)
Ancient Egyptian
Abbreviated History of Our Alphabet
Phoenician Greek
(logographic with alphabetic elements)
4000 BC
Latin
1200 BC
800 BC
700 BC
(Essentially the “latin” or “roman” alphabet)
![Page 22: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/22.jpg)
Early Latin Writing
Uncial (400) Roman Capitals (Trajan)
![Page 23: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/23.jpg)
Blackletter (12th-15th)Carolingian (9th)
![Page 24: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/24.jpg)
Invention of Movable Type
![Page 25: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/25.jpg)
Evolution of Type
![Page 26: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/26.jpg)
Gutenberg’s Textura (1450) Garamond (1530)
Old StyleTextura
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
![Page 27: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/27.jpg)
Transitional
Caslon (1720) Bodoni (1798)
Modern
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
![Page 28: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/28.jpg)
Humanist Sans
Gill Sans (1926)
Egyptian/Slab Serif
1815
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
![Page 29: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/29.jpg)
Geometric Sans
FuturaHelvetica
Transitional Sans-serif
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
![Page 30: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/30.jpg)
Digital Type
![Page 31: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/31.jpg)
Bitmap Fonts Word Processing
![Page 32: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/32.jpg)
Now Everyone’s a Typography
Bleeding Cowboy Lobster
Payparus
![Page 33: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/33.jpg)
Digital fonts, human origins
![Page 34: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/34.jpg)
Demo
https://github.com/ryanlabouve/type-talk-demo
![Page 35: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/35.jpg)
Content + Reset
![Page 36: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/36.jpg)
Add Markup
![Page 37: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/37.jpg)
Organize
![Page 38: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/38.jpg)
Define Containers
![Page 39: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/39.jpg)
Choosing Typeface
![Page 40: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/40.jpg)
Choosing Typeface
![Page 41: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/41.jpg)
Choosing Typeface
![Page 42: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/42.jpg)
Typographic Scale
![Page 43: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/43.jpg)
Proofread, Edit, Augment
![Page 44: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/44.jpg)
Typographic Hierarchy
![Page 45: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/45.jpg)
Before/After
![Page 46: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/46.jpg)
Mechanics
![Page 47: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/47.jpg)
Quick Technical Disclaimer
![Page 48: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/48.jpg)
Examples assume level of html/css knowledge
#webTypography
![Page 49: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/49.jpg)
Additional Resources
Pixels vs EM vs REM (and vh, vw)
Mapping Typography to CSS (don’t fear web typography)
HTML/CSS Typography Primer
http://j.eremy.net/confused-about-rem-and-em/
http://adamschwartz.co/magic-of-css/chapters/5-typography/
http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-typography
http://css-tricks.com/viewport-sized-typography/
![Page 50: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/50.jpg)
Including web fontshttp://css-tricks.com/snippets/css/using-font-face/Self Hosting
Generating Fonts for the Webhttp://www.fontsquirrel.com/tools/webfont-generator
Using a Servicehttps://developers.google.com/fonts/docs/getting_started
![Page 51: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/51.jpg)
font-family
font-weight
font-font size
letter-spacing
max-width
line-height
Which Font
How Bold/Light
Font Size
Letter Spacing
Measure
Leading
CSS IRL
![Page 52: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/52.jpg)
Anatomy of a Typeface
![Page 53: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/53.jpg)
![Page 54: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/54.jpg)
![Page 55: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/55.jpg)
![Page 56: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/56.jpg)
![Page 57: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/57.jpg)
• X-height
• Stroke contrast
• Reading Test
!
Legibility
![Page 58: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/58.jpg)
![Page 59: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/59.jpg)
![Page 60: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/60.jpg)
![Page 61: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/61.jpg)
![Page 62: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/62.jpg)
Choosing a Typeface• Appropriate for Context
• Font Quality
• Legibility
• Affordable?
!
![Page 63: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/63.jpg)
Display vs Body
Poster vs Reading OR
Appropriate for Context
![Page 64: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/64.jpg)
Appropriate for Context
![Page 65: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/65.jpg)
via Typekit.com
Appropriate for Context
![Page 66: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/66.jpg)
What kind of party?
Appropriate for Context
![Page 67: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/67.jpg)
Appropriate for Context
________ Party
![Page 68: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/68.jpg)
Appropriate for Context
Cocktail Party
![Page 69: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/69.jpg)
________ Party
Appropriate for Context
![Page 70: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/70.jpg)
Slumber Party
Appropriate for Context
![Page 71: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/71.jpg)
Appropriate for Context
___ Party
![Page 72: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/72.jpg)
Appropriate for Context
LAN Party
![Page 73: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/73.jpg)
Appropriate for Context
___ Party
![Page 74: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/74.jpg)
Appropriate for Context
D&D Party
![Page 75: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/75.jpg)
Slumber Party
Appropriate for Context
LAN Party
D&D Party
Cocktail Party
![Page 76: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/76.jpg)
Set some type; in context
Read it. Like it?
Appropriate for Context
![Page 77: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/77.jpg)
Good InspirationWhat do other designers use?
Quality
![Page 78: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/78.jpg)
Font In Usehttp://fontsinuse.com/
![Page 80: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/80.jpg)
SuperfamiliesTypefaces with large families
Quality
![Page 81: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/81.jpg)
![Page 82: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/82.jpg)
weights & Styles Weight & Styles
![Page 83: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/83.jpg)
Character SupportDo you need something that supports other languages?
Quality
![Page 84: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/84.jpg)
https://www.google.com/fonts/specimen/PT+SansPT Sans, Characters
![Page 85: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/85.jpg)
Affordable?Purchasing/Procuring Fonts
![Page 86: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/86.jpg)
Free Web Fonts
![Page 87: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/87.jpg)
http://losttype.com/
theleagueofmoveabletype.com
![Page 88: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/88.jpg)
Not Free Web Fontsbut awesome
^
![Page 89: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/89.jpg)
FoundriesBuy from individuals. Possibly host yourself
![Page 90: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/90.jpg)
ServicesAggregate Fonts
Usually Host for You
![Page 91: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/91.jpg)
![Page 92: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/92.jpg)
For this DemoFree
Legible Book Club Party
![Page 93: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/93.jpg)
https://www.google.com/fonts
![Page 94: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/94.jpg)
Narrowed it down
![Page 95: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/95.jpg)
![Page 96: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/96.jpg)
Paragraphs
![Page 97: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/97.jpg)
Typesetting Tricks
![Page 98: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/98.jpg)
1. Leading 2. Measure 3. Kerning 4. Tracking 5. Word Spacing 6. Hyphenation
![Page 99: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/99.jpg)
LeadingThe Space between Lines
CSS: line-height
120%-140% of font size
1
![Page 100: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/100.jpg)
MeasureLength of Lines of Text
CSS: max-width
45-80 Character2
![Page 101: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/101.jpg)
K erningSpaces between letters
http://xkcd.com/1015/
http://letteringjs.com/
http://www.kernjs.com/
http://kerningjs.com/
3
![Page 102: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/102.jpg)
T r a c k i n geven spacing between every character
CSS: letter-spacing 4
![Page 103: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/103.jpg)
Word SpacingAvoid messing with wordspacing
CSS: word-spacing 5
![Page 104: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/104.jpg)
Hyphenation & JustificationLacking on the web
6
![Page 105: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/105.jpg)
Tempo The sum of leading, measure, kerning, tracking, word-spacing, and H&J
Narrow, Faster Tempo Wide, Slower Tempo
![Page 106: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/106.jpg)
Nothing Done
![Page 107: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/107.jpg)
Measure
![Page 108: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/108.jpg)
Leading, Letter spacing, Tracking…
![Page 109: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/109.jpg)
Hierarchy
![Page 110: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/110.jpg)
Hierarchy is simply creating
CONTRAST
![Page 111: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/111.jpg)
ContrastUse size, color, and space to differentiate content
![Page 112: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/112.jpg)
Typographic ScaleLike a music scale. Creates harmony.
![Page 113: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/113.jpg)
OrganizationGroup similar content. Make more important content more prominent
![Page 114: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/114.jpg)
EditCorrect grammar & remove unnecessary content
practicaltypography.comAdditional Resources
smartquotesforsmartpeople.com
![Page 115: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/115.jpg)
Strategies
![Page 116: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/116.jpg)
Media Queries + Relative Unites
Responsive Typography 101
![Page 117: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/117.jpg)
Why does our demo currently
fail?
![Page 118: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/118.jpg)
Phones.
![Page 119: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/119.jpg)
Solution
![Page 120: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/120.jpg)
PX -> (R)EM Use relative units
![Page 121: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/121.jpg)
/* Target / Context = Result */
![Page 122: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/122.jpg)
![Page 123: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/123.jpg)
Change font-size on body(%), rest of document resizes
mmmmmm…. relative units
![Page 124: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/124.jpg)
![Page 125: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/125.jpg)
Use media queries to establish breakpoints and make adjustments
![Page 126: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/126.jpg)
Adjust via breakpoints
![Page 127: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/127.jpg)
font-size: 100%>1100px
![Page 128: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/128.jpg)
90%<1100px
(Moved Aside to Bottom)<840px
![Page 129: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/129.jpg)
90%Before Now
<590
![Page 130: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/130.jpg)
Target Specific Problems
![Page 131: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/131.jpg)
Headlines are Still too Big Fix with Media Queries
![Page 132: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/132.jpg)
Before Now
![Page 133: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/133.jpg)
All kinds of things
Future of WebType
![Page 134: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/134.jpg)
http://fittextjs.com/http://letteringjs.com/
Javascript Steps In
![Page 135: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/135.jpg)
Molten Leading
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
![Page 136: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/136.jpg)
Face Detection
http://webdesign.maratz.com/lab/responsivetypography/realtime/
![Page 137: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/137.jpg)
Dynamic Resizing
![Page 138: Web Typography, A Long Dark](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547b9b3b5806b5f93f8b465a/html5/thumbnails/138.jpg)
http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0
Abril Text+Titling
The End