2011gdsadvertisingstudytravelclick 13265899836091-phpapp02-120114193149-phpapp02
Web Typography5 090725053013 Phpapp02
description
Transcript of Web Typography5 090725053013 Phpapp02
![Page 1: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/1.jpg)
Beautiful WebTypography
Simon Pascal Klein — @klepas
Letter, text, & page
Version 5
❦
![Page 2: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/2.jpg)
Beautiful Web Typography
![Page 3: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/3.jpg)
Intro…
Beautiful Web Typography
![Page 4: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/4.jpg)
I’m Pascal Klein.
Beautiful Web Typography
![Page 5: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/5.jpg)
I’m…
Beautiful Web Typography
![Page 6: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/6.jpg)
I’m…
a graphic & web designer;1.
Beautiful Web Typography
![Page 7: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/7.jpg)
I’m…
a graphic & web designer;1.
a bit of a UI and UX aficionado;2.
Beautiful Web Typography
![Page 8: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/8.jpg)
I’m…
a graphic & web designer;1.
a bit of a UI and UX aficionado;2.
and, incurably, a rampant ‘typophile’.3.
Beautiful Web Typography
![Page 9: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/9.jpg)
‘Typophiles’ are über gεεks who
♥ typography.
Beautiful Web Typography
![Page 10: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/10.jpg)
‘Typophiles’ are über gεεks who
♥ typography.
Hands up and make yourselves known.
Beautiful Web Typography
![Page 11: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/11.jpg)
ty•pog•ra•phy | tīˈpägrəfē | •n
Beautiful Web Typography
![Page 12: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/12.jpg)
ty•pog•ra•phy | tīˈpägrəfē | •n
Typography is the art of creating and setting type
with the purpose of honoring the text it sets.
Beautiful Web Typography
![Page 13: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/13.jpg)
Beautiful Web Typography
![Page 14: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/14.jpg)
Typography can bring aesthetic order to
information, helping users read & navigate.
Beautiful Web Typography
![Page 15: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/15.jpg)
Beautiful Web Typography
![Page 16: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/16.jpg)
i.e. make textual stuff look pretty.
☻
Beautiful Web Typography
![Page 17: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/17.jpg)
Beautiful Web Typography
![Page 18: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/18.jpg)
premise:
Beautiful Web Typography
![Page 19: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/19.jpg)
The intertubes today are
info-heavy.
premise:
Beautiful Web Typography
![Page 20: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/20.jpg)
The intertubes today are
info-heavy.
Much of it is textual.
premise:
Beautiful Web Typography
![Page 21: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/21.jpg)
The intertubes today are
info-heavy.
Much of it is textual.
premise:
Much of it is a pain to read.
Beautiful Web Typography
![Page 22: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/22.jpg)
Beautiful Web Typography
![Page 23: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/23.jpg)
Assumptions?
Beautiful Web Typography
![Page 24: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/24.jpg)
Assumptions?It sucks? It’s boring?
Beautiful Web Typography
![Page 25: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/25.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
It sucks? It’s boring?
Beautiful Web Typography
![Page 26: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/26.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
Only ‘web-safe’ fonts?2.
It sucks? It’s boring?
Beautiful Web Typography
![Page 27: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/27.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
Only ‘web-safe’ fonts?2.
Limited control—resort to Flash and other non-
standard technologies?
3.
It sucks? It’s boring?
Beautiful Web Typography
![Page 28: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/28.jpg)
Beautiful Web Typography
![Page 29: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/29.jpg)
Beautiful Web Typography
Not quite.
![Page 30: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/30.jpg)
Beautiful Web Typography
Not quite.
(Yay!)
![Page 31: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/31.jpg)
Beautiful Web Typography
![Page 32: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/32.jpg)
Letter (micro)1.
Beautiful Web Typography
![Page 33: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/33.jpg)
Letter (micro)1.
Page or grid (macro)3.
Beautiful Web Typography
![Page 34: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/34.jpg)
Letter (micro)1.
Text2.
Page or grid (macro)3.
Beautiful Web Typography
![Page 35: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/35.jpg)
Beautiful Web Typography
![Page 36: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/36.jpg)
Reset0.
Beautiful Web Typography
![Page 37: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/37.jpg)
Reset0.
All the browsers have their own default styling for
various (x)HTML elements. This makes it a pain for
cross-browser consistency.
Beautiful Web Typography
![Page 38: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/38.jpg)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;font-weight:normal;}ul,ol {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0;}
Googling “CSS reset stylesheets” should land you
with numerous examples. This one above is from
the Yahoo! UI library.
Beautiful Web Typography
![Page 39: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/39.jpg)
Beautiful Web Typography
![Page 40: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/40.jpg)
Letter & Text
Beautiful Web Typography
![Page 41: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/41.jpg)
Letter & Texttypeface (font) and style•
Beautiful Web Typography
![Page 42: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/42.jpg)
Letter & Texttypeface (font) and style•
spacing (tracking/letter-spacing)•
Beautiful Web Typography
![Page 43: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/43.jpg)
Letter & Texttypeface (font) and style•
spacing (tracking/letter-spacing)•
individual glyphs•
Beautiful Web Typography
![Page 44: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/44.jpg)
Beautiful Web Typography
![Page 45: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/45.jpg)
serifBeautiful Web Typography
![Page 46: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/46.jpg)
serifsans serif
Beautiful Web Typography
![Page 47: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/47.jpg)
serifsans serifscript
Beautiful Web Typography
![Page 48: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/48.jpg)
serifsans serifscript
blackletter
Beautiful Web Typography
![Page 49: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/49.jpg)
serifsans serifscript
blacklettermonospace
Beautiful Web Typography
![Page 50: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/50.jpg)
Beautiful Web Typography
![Page 51: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/51.jpg)
Mixing typefaces requires special attention. Try to
align x-heights and sizes. X-heights?
Beautiful Web Typography
![Page 52: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/52.jpg)
Mixing typefaces requires special attention. Try to
align x-heights and sizes. X-heights?
Beautiful Web Typography
Helvetica Regular 96pt & Minion Pro Regular 96pt.
x-height x-height
![Page 53: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/53.jpg)
Mixing typefaces requires special attention. Try to
align x-heights and sizes. X-heights?
Beautiful Web Typography
Helvetica Regular 96pt & Minion Pro Regular 96pt.
x-height x-height
Helvetica Regular 96pt & Minion Pro Regular 114pt.
x-heightx-height
![Page 54: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/54.jpg)
Beautiful Web Typography
![Page 55: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/55.jpg)
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
Beautiful Web Typography
![Page 56: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/56.jpg)
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
one sets the body, the other the headings;1.
Beautiful Web Typography
![Page 57: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/57.jpg)
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
one sets the body, the other the headings;1.
one sets primary content, the other UI controls.2.
Beautiful Web Typography
![Page 58: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/58.jpg)
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
one sets the body, the other the headings;1.
one sets primary content, the other UI controls.2.
We do this with the font-family property.
Beautiful Web Typography
![Page 59: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/59.jpg)
Beautiful Web Typography
![Page 60: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/60.jpg)
…but only ‘web safe’ fonts?
Beautiful Web Typography
![Page 61: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/61.jpg)
Beautiful Web Typography
![Page 62: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/62.jpg)
Beautiful Web Typography
ArialVerdanaCourier New
Times New RomanGeorgiaTrebuchet MS
![Page 63: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/63.jpg)
Options for setting fonts:
Beautiful Web Typography
![Page 64: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/64.jpg)
Options for setting fonts:
Beautiful Web Typography
Installed fonts (mostly web-safe)1.
![Page 65: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/65.jpg)
Options for setting fonts:
Beautiful Web Typography
sIFR or other JS and Flash replacement2.
Installed fonts (mostly web-safe)1.
![Page 66: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/66.jpg)
Options for setting fonts:
Beautiful Web Typography
Cufón et al. (http://tinyurl.com/git-cufon)3.
sIFR or other JS and Flash replacement2.
Installed fonts (mostly web-safe)1.
![Page 67: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/67.jpg)
Options for setting fonts:
Beautiful Web Typography
Cufón et al. (http://tinyurl.com/git-cufon)3.
sIFR or other JS and Flash replacement2.
webfonts: EOT/EOT Lite via @font-face4.
Installed fonts (mostly web-safe)1.
![Page 68: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/68.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
Beautiful Web Typography
Cufón et al. (http://tinyurl.com/git-cufon)3.
sIFR or other JS and Flash replacement2.
webfonts: EOT/EOT Lite via @font-face4.
Installed fonts (mostly web-safe)1.
![Page 69: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/69.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
Beautiful Web Typography
Cufón et al. (http://tinyurl.com/git-cufon)3.
sIFR or other JS and Flash replacement2.
webfonts: EOT/EOT Lite via @font-face4.
Installed fonts (mostly web-safe)1.
Typekit, Fontdeck, Kernest, et al.6.
![Page 70: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/70.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
Beautiful Web Typography
Cufón et al. (http://tinyurl.com/git-cufon)3.
sIFR or other JS and Flash replacement2.
webfonts: EOT/EOT Lite via @font-face4.
Installed fonts (mostly web-safe)1.
OpenType permissions extension?7.
Typekit, Fontdeck, Kernest, et al.6.
![Page 71: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/71.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
Beautiful Web Typography
Cufón et al. (http://tinyurl.com/git-cufon)3.
sIFR or other JS and Flash replacement2.
webfonts: EOT/EOT Lite via @font-face4.
Installed fonts (mostly web-safe)1.
OpenType permissions extension?7.
Typekit, Fontdeck, Kernest, et al.6.
.webfont proposal?8.
![Page 72: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/72.jpg)
Beautiful Web Typography
. Installed or web-safe fonts
![Page 73: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/73.jpg)
Simply call upon them directly in your font stack
declarations, e.g.:
Beautiful Web Typography
. Installed or web-safe fonts
![Page 74: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/74.jpg)
Simply call upon them directly in your font stack
declarations, e.g.:
font-family: Baskerville, Times,
'Times New Roman', serif;
Beautiful Web Typography
. Installed or web-safe fonts
![Page 75: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/75.jpg)
Simply call upon them directly in your font stack
declarations, e.g.:
font-family: Baskerville, Times,
'Times New Roman', serif;
Beautiful Web Typography
. Installed or web-safe fonts
font-family: 'Helvetica Neue', Helvetica,
'Arial', sans-serif;
![Page 76: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/76.jpg)
![Page 77: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/77.jpg)
Font stacks:
Beautiful Web Typography
![Page 78: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/78.jpg)
Font stacks:
desired•
Beautiful Web Typography
![Page 79: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/79.jpg)
Font stacks:
desired•
fallback•
Beautiful Web Typography
![Page 80: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/80.jpg)
Font stacks:
desired•
fallback•
Beautiful Web Typography
generic (e.g. serif, sans-serif, monospace)•
![Page 81: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/81.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Beautiful Web Typography
. s et al.
![Page 82: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/82.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Beautiful Web Typography
. s et al.
Not a feasible solution long-term:
![Page 83: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/83.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Beautiful Web Typography
. s et al.
Not a feasible solution long-term:
does subsetting;1.
![Page 84: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/84.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Beautiful Web Typography
. s et al.
Not a feasible solution long-term:
does subsetting;1.
non-standard solution—relies on both Flash and JS;2.
![Page 85: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/85.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Beautiful Web Typography
. s et al.
Not a feasible solution long-term:
does subsetting;1.
non-standard solution—relies on both Flash and JS;2.
high page load time—not feasible for body copy.3.
![Page 86: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/86.jpg)
These were the first JS-only implementations.
Cufón converts font paths to VML paths stored in
JSON, then rendering the font paths using JS.
Beautiful Web Typography
. Cufón & other implementations
![Page 87: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/87.jpg)
These were the first JS-only implementations.
Cufón converts font paths to VML paths stored in
JSON, then rendering the font paths using JS.
Beautiful Web Typography
. Cufón & other implementations
Various thoughts and concerns:
![Page 88: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/88.jpg)
These were the first JS-only implementations.
Cufón converts font paths to VML paths stored in
JSON, then rendering the font paths using JS.
Beautiful Web Typography
. Cufón & other implementations
Various thoughts and concerns:
not accessible but works in most browsers;1.
![Page 89: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/89.jpg)
These were the first JS-only implementations.
Cufón converts font paths to VML paths stored in
JSON, then rendering the font paths using JS.
Beautiful Web Typography
. Cufón & other implementations
Various thoughts and concerns:
not accessible but works in most browsers;1.
type foundries are/were skeptical—not a ‘service’;
limited palette of typefaces;
2.
![Page 90: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/90.jpg)
These were the first JS-only implementations.
Cufón converts font paths to VML paths stored in
JSON, then rendering the font paths using JS.
Beautiful Web Typography
. Cufón & other implementations
Various thoughts and concerns:
not accessible but works in most browsers;1.
type foundries are/were skeptical—not a ‘service’;
limited palette of typefaces;
2.
converter is often proprietary;3.
![Page 91: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/91.jpg)
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF. Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Beautiful Web Typography
. webfonts: / Lite
![Page 92: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/92.jpg)
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF. Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Beautiful Web Typography
. webfonts: / Lite
Not feasible as-is currently:
![Page 93: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/93.jpg)
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF. Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Beautiful Web Typography
. webfonts: / Lite
Not feasible as-is currently:
non-standard, proprietary solution;1.
![Page 94: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/94.jpg)
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF. Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Beautiful Web Typography
. webfonts: / Lite
Not feasible as-is currently:
non-standard, proprietary solution;1.
requires a proprietary converter (WEFT) to use;2.
![Page 95: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/95.jpg)
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF. Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Beautiful Web Typography
. webfonts: / Lite
Not feasible as-is currently:
non-standard, proprietary solution;1.
requires a proprietary converter (WEFT) to use;2.
proposal rejected by W3C & only supported by IE.3.
![Page 96: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/96.jpg)
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT/TTF file
which is downloaded and used to render the type.
Beautiful Web Typography
. webfonts: /
![Page 97: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/97.jpg)
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT/TTF file
which is downloaded and used to render the type.
Beautiful Web Typography
. webfonts: /
Feasible but:
![Page 98: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/98.jpg)
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT/TTF file
which is downloaded and used to render the type.
Beautiful Web Typography
. webfonts: /
Feasible but:
OT/TTF files can easily be downloaded;1.
![Page 99: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/99.jpg)
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT/TTF file
which is downloaded and used to render the type.
Beautiful Web Typography
. webfonts: /
Feasible but:
OT/TTF files can easily be downloaded;1.
supported in Safari 3.1+, Firefox 3.5+ (planned for
Opera 10 and Chrome 2.0 beta);
2.
![Page 100: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/100.jpg)
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT/TTF file
which is downloaded and used to render the type.
Beautiful Web Typography
. webfonts: /
Feasible but:
OT/TTF files can easily be downloaded;1.
supported in Safari 3.1+, Firefox 3.5+ (planned for
Opera 10 and Chrome 2.0 beta);
2.
subsetting or compression comes down to author.3.
![Page 101: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/101.jpg)
![Page 102: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/102.jpg)
![Page 103: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/103.jpg)
![Page 104: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/104.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
![Page 105: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/105.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Thoughts:
![Page 106: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/106.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Thoughts:
deemed ‘the solution’ (though still in-the-works);1.
![Page 107: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/107.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Thoughts:
deemed ‘the solution’ (though still in-the-works);1.
2. standards-based, good browser support, and easy;
![Page 108: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/108.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Thoughts:
deemed ‘the solution’ (though still in-the-works);1.
subsetting and/or compression service-side.3.
2. standards-based, good browser support, and easy;
![Page 109: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/109.jpg)
![Page 110: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/110.jpg)
![Page 111: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/111.jpg)
Beautiful Web Typography
![Page 112: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/112.jpg)
![Page 113: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/113.jpg)
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Beautiful Web Typography
. OpenType permissions extension?
![Page 114: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/114.jpg)
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Beautiful Web Typography
. OpenType permissions extension?
Thoughts:
![Page 115: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/115.jpg)
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Beautiful Web Typography
. OpenType permissions extension?
Thoughts:
simple: no change in the OT format, no wrapper;1.
![Page 116: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/116.jpg)
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Beautiful Web Typography
. OpenType permissions extension?
Thoughts:
simple: no change in the OT format, no wrapper;1.
2. standards-based, but no compression;
![Page 117: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/117.jpg)
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Beautiful Web Typography
. OpenType permissions extension?
Thoughts:
simple: no change in the OT format, no wrapper;1.
reverse-engineer-able (just edit the XML); 3.
2. standards-based, but no compression;
![Page 118: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/118.jpg)
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT, compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Beautiful Web Typography
. .webfont proposal
![Page 119: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/119.jpg)
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT, compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Beautiful Web Typography
. .webfont proposal
Considerations:
![Page 120: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/120.jpg)
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT, compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Beautiful Web Typography
. .webfont proposal
Considerations:
compact, simple, elegant, easily standards-based;1.
![Page 121: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/121.jpg)
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT, compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Beautiful Web Typography
. .webfont proposal
Considerations:
compact, simple, elegant, easily standards-based;1.
2. reverse-engineer-able; CORS in discussion;
![Page 122: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/122.jpg)
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT, compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Beautiful Web Typography
. .webfont proposal
Considerations:
compact, simple, elegant, easily standards-based;1.
…but (surprisingly) gaining huge support from
type designers and foundries alike.
3.
2. reverse-engineer-able; CORS in discussion;
![Page 123: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/123.jpg)
Beautiful Web Typography
<fontdata> name, file name, format
<creationdate> creation data stamp of font file
<vendor> vendor info; attr.: name, URL
<designer> designer info; attr.: name, URL, role
<license> license; attr.: URL, ID
<licenseename> name for the licensee of the font
<description> description for the font
<copyright> copyright for the font
<trademark> trademark for the font
<privatedata> additional arbitrary, private info.
![Page 124: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/124.jpg)
Beautiful Web Typography
![Page 125: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/125.jpg)
Beautiful Web Typography
Meanwhile:
![Page 126: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/126.jpg)
Beautiful Web Typography
Webfonts aren’t the holy grail of web
typography problems…
Meanwhile:
![Page 127: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/127.jpg)
– Jeff Cro
“Typography is not picking a ‘cool’ font.”
Beautiful Web Typography
Webfonts aren’t the holy grail of web
typography problems…
Meanwhile:
![Page 128: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/128.jpg)
Beautiful Web Typography
![Page 129: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/129.jpg)
Beautiful Web Typography
Also remember, most fonts available from
type foundries are not optimised for screen
usage; they’re for print.
![Page 130: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/130.jpg)
Beautiful Web Typography
![Page 131: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/131.jpg)
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
Beautiful Web Typography
![Page 132: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/132.jpg)
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
•
Beautiful Web Typography
![Page 133: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/133.jpg)
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
•
font-style controls… style. Accepts the descrip-
tive values (normal, italic, and oblique).
•
Beautiful Web Typography
![Page 134: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/134.jpg)
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
•
font-style controls… style. Accepts the descrip-
tive values (normal, italic, and oblique).
•
font-variant controls case and accepts the
values normal and small-caps.
•
Beautiful Web Typography
![Page 135: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/135.jpg)
Beautiful Web Typography
![Page 136: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/136.jpg)
roman (‘normal’)Beautiful Web Typography
![Page 137: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/137.jpg)
roman (‘normal’)Beautiful Web Typography
![Page 138: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/138.jpg)
roman (‘normal’)italic
Beautiful Web Typography
![Page 139: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/139.jpg)
roman (‘normal’)italic oblique≠
Beautiful Web Typography
![Page 140: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/140.jpg)
roman (‘normal’)italic oblique≠
Beautiful Web Typography
![Page 141: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/141.jpg)
roman (‘normal’)italic oblique≠
Beautiful Web Typography
![Page 142: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/142.jpg)
roman (‘normal’)italicultralight regular bold
oblique≠
Beautiful Web Typography
![Page 143: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/143.jpg)
roman (‘normal’)italicultralight regular bold
oblique≠
Beautiful Web Typography
![Page 144: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/144.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensed
oblique≠
Beautiful Web Typography
![Page 145: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/145.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensed
oblique≠
Beautiful Web Typography
![Page 146: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/146.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensedSMALL-CAPITALS
oblique≠
Beautiful Web Typography
![Page 147: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/147.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensedSMALL-CAPITALS
oblique≠
Beautiful Web Typography
![Page 148: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/148.jpg)
![Page 149: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/149.jpg)
Web Typography
![Page 150: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/150.jpg)
Web Typography
TRACKING
![Page 151: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/151.jpg)
Web Typography
TRACKINGTRACKING
![Page 152: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/152.jpg)
Web Typography
Letter-spacingTRACKINGTRACKING
![Page 153: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/153.jpg)
Web Typography
Letter-spacingLetter-spacingTRACKINGTRACKING
![Page 154: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/154.jpg)
Beautiful Web Typography
![Page 155: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/155.jpg)
Letʼs see some loose word-spacing in action…
Beautiful Web Typography
![Page 156: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/156.jpg)
Letʼs see some loose word-spacing in action…
And now both loose word-spacing and tracking featured together.
Beautiful Web Typography
![Page 157: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/157.jpg)
Beautiful Web Typography
![Page 158: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/158.jpg)
And finally, the recent popular trend of negative tracking.
Beautiful Web Typography
![Page 159: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/159.jpg)
Beautiful Web Typography
![Page 160: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/160.jpg)
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
Beautiful Web Typography
![Page 161: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/161.jpg)
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
E.g. setting acronyms or numerical tabular data.
Beautiful Web Typography
![Page 162: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/162.jpg)
Beautiful Web Typography
![Page 163: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/163.jpg)
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
Beautiful Web Typography
![Page 164: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/164.jpg)
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque; habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML sit lectus.
Beautiful Web Typography
![Page 165: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/165.jpg)
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque; habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML sit lectus.
Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque; habitant orci tristique senectus et , malesuada fames ac turpis egestas HTML sit lectus.
Beautiful Web Typography
![Page 166: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/166.jpg)
Beautiful Web Typography
![Page 167: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/167.jpg)
letter-spacing and word-spacing controls
tracking and word-spacing respectively. Both take
numerical values and normal.
•
Beautiful Web Typography
![Page 168: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/168.jpg)
letter-spacing and word-spacing controls
tracking and word-spacing respectively. Both take
numerical values and normal.
•
Sadly no property for controlling figure variants—
hopes set for CSS3. For now use Georgia which
(only) features hanging or ‘old-style’ figures.
Beautiful Web Typography
![Page 169: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/169.jpg)
Beautiful Web Typography
![Page 170: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/170.jpg)
font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents
(browsers) set default value at 16px.
•
Beautiful Web Typography
![Page 171: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/171.jpg)
font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents
(browsers) set default value at 16px.
•
Size font sizes relatively using ems or %.
Beautiful Web Typography
![Page 172: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/172.jpg)
font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents
(browsers) set default value at 16px.
•
Size font sizes relatively using ems or %.
An em is a relative unit best to be thought of as a
box. It is relative to the point size of a specific
font (i.e. 1 em in a 12 point typeface is 12 point).
Beautiful Web Typography
![Page 173: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/173.jpg)
Why?
Beautiful Web Typography
![Page 174: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/174.jpg)
Why?
Beautiful Web Typography
Some UAs don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
•
![Page 175: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/175.jpg)
Why?
Beautiful Web Typography
Some UAs don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
•
JS-based text resize widgets ≠ text accessibility.•
![Page 176: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/176.jpg)
Why?
Beautiful Web Typography
Some UAs don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
•
JS-based text resize widgets ≠ text accessibility.•
Many devices and many user agents—be careful in
making assumptions.
•
![Page 177: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/177.jpg)
Beautiful Web Typography
![Page 178: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/178.jpg)
Key: remember font sizes are inherited:
parents → children.
Beautiful Web Typography
![Page 179: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/179.jpg)
Key: remember font sizes are inherited:
parents → children.
To calculate, find what one pixel is in ems and
then multiply by the desired font size (in pixels):
Beautiful Web Typography
![Page 180: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/180.jpg)
Key: remember font sizes are inherited:
parents → children.
1 ÷ parent font-size × required pixel value= em value
To calculate, find what one pixel is in ems and
then multiply by the desired font size (in pixels):
Beautiful Web Typography
![Page 181: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/181.jpg)
.% trick
Beautiful Web Typography
![Page 182: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/182.jpg)
.% trickSimplify your calculations. Consider:
p { font-size: 80%; }blockquote { font-size: 80%; }
Beautiful Web Typography
![Page 183: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/183.jpg)
80% of 16px is 12.8px, so p and blockquote
elements will be that size, but what happens
when we put a p element inside a blockquote
element? The parent (blockquote) is 12.8px so the
p will be rendered at 80% of that: 10.42px.
.% trickSimplify your calculations. Consider:
p { font-size: 80%; }blockquote { font-size: 80%; }
Beautiful Web Typography
![Page 184: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/184.jpg)
.% trick (cont’d)
Beautiful Web Typography
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
![Page 185: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/185.jpg)
.% trick (cont’d)
browsers have common default size of 16px; thus:•
Beautiful Web Typography
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
![Page 186: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/186.jpg)
.% trick (cont’d)
browsers have common default size of 16px; thus:•
set body to 62.5% and reset all to 10px; thus:•
Beautiful Web Typography
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
![Page 187: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/187.jpg)
.% trick (cont’d)
browsers have common default size of 16px; thus:•
set body to 62.5% and reset all to 10px; thus:•
from here calculations are simpler for direct
descendants of the body, e.g. 12px = 1.2em; 8px =
0.8em. Further nested elements are (still) relative.
•
Beautiful Web Typography
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
![Page 188: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/188.jpg)
Beautiful Web Typography
![Page 189: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/189.jpg)
To find an element’s font size in absolute terms
(e.g. pixels) you can use the Firefox Web Develop
Extension, Information → Display Element
Information.
Beautiful Web Typography
![Page 190: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/190.jpg)
Don’t just arbitrarily set type; use a scale:
Stick it to a scale
Beautiful Web Typography
![Page 191: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/191.jpg)
Don’t just arbitrarily set type; use a scale:
Stick it to a scale
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72.the “classic scale”
9, 10, 11, 12, 13, 14, 18, 24, 36, 48, 64, 72, 96.another scale
8, 13, 21, 34, 55, 89.scale based on the Fibonacci sequence
Beautiful Web Typography
![Page 192: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/192.jpg)
Beautiful Web Typography
![Page 193: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/193.jpg)
Beautiful Web Typography
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
![Page 194: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/194.jpg)
Beautiful Web Typography
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
…consectetuer adipiscing elit…
…adipiscing elit…
![Page 195: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/195.jpg)
Beautiful Web Typography
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
…consectetuer adipiscing elit…
…adipiscing elit…
…consectetuer adipiscing elit…
…adipiscing elit…
![Page 196: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/196.jpg)
Beautiful Web Typography
![Page 197: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/197.jpg)
Correct glyphs
Beautiful Web Typography
![Page 198: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/198.jpg)
Correct glyphsConsider:
' "
Beautiful Web Typography
![Page 199: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/199.jpg)
Correct glyphsConsider:
' "1'61"
Beautiful Web Typography
![Page 200: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/200.jpg)
"is is a group of words surrounded by a bunch of tick marks."
Beautiful Web Typography
![Page 201: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/201.jpg)
“is is a quotation!”- Jeff Cro
Beautiful Web Typography
![Page 202: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/202.jpg)
‘ ’ “ ”’
Beautiful Web Typography
![Page 203: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/203.jpg)
Beautiful Web Typography
![Page 204: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/204.jpg)
- hyphen Mary-Anne, Dominique Strauss-Kahn
– en dash April–May, ages –, pp. –
— em dash Phrase marker—not spaced—like this.
– minus 5–4=1
Beautiful Web Typography
![Page 205: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/205.jpg)
Beautiful Web Typography
“ opening double quote “” closing double quote ”‘ opening single quote ‘’ closing single quote ’– en dash –— em dash —− minus −× multiplication ×… ellipsis …
![Page 206: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/206.jpg)
Smartypants et al.
Beautiful Web Typography
![Page 207: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/207.jpg)
Smartypants et al.‘Doing something repetitive? Likely you’re doing it wrong.’
Beautiful Web Typography
![Page 208: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/208.jpg)
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
Smartypants et al.‘Doing something repetitive? Likely you’re doing it wrong.’
Beautiful Web Typography
![Page 209: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/209.jpg)
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
Smartypants et al.‘Doing something repetitive? Likely you’re doing it wrong.’
Beautiful Web Typography
Smartypants (PHP, Perl, & Movable Type);•
![Page 210: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/210.jpg)
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
Smartypants et al.‘Doing something repetitive? Likely you’re doing it wrong.’
Beautiful Web Typography
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
![Page 211: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/211.jpg)
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
Smartypants et al.‘Doing something repetitive? Likely you’re doing it wrong.’
Beautiful Web Typography
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
wp-typogrify (WordPress);•
![Page 212: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/212.jpg)
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
Smartypants et al.‘Doing something repetitive? Likely you’re doing it wrong.’
Beautiful Web Typography
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
wp-typogrify (WordPress);•
Markdown et al., …•
![Page 213: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/213.jpg)
Beautiful Web Typography
![Page 214: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/214.jpg)
Give ampersands love
Beautiful Web Typography
![Page 215: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/215.jpg)
Give ampersands love
Beautiful Web Typography
Italic ampersand variants are often much prettier
than their common roman counterparts:
![Page 216: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/216.jpg)
Give ampersands love
& & & & &
Beautiful Web Typography
Italic ampersand variants are often much prettier
than their common roman counterparts:
![Page 217: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/217.jpg)
Give ampersands love
& & & & &
Beautiful Web Typography
& & & & &
Italic ampersand variants are often much prettier
than their common roman counterparts:
![Page 218: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/218.jpg)
Marking paragraphs
Beautiful Web Typography
![Page 219: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/219.jpg)
Don’t be afraid to mark new paragraphs with
indents, outdents, a plain white-line, a pilcrow (¶)
or other ornament, versal and/or headers…
Marking paragraphs
Beautiful Web Typography
![Page 220: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/220.jpg)
Don’t be afraid to mark new paragraphs with
indents, outdents, a plain white-line, a pilcrow (¶)
or other ornament, versal and/or headers…
Marking paragraphs
Beautiful Web Typography
…or a combination thereof.
![Page 221: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/221.jpg)
Don’t be afraid to mark new paragraphs with
indents, outdents, a plain white-line, a pilcrow (¶)
or other ornament, versal and/or headers…
Marking paragraphs
Beautiful Web Typography
…or a combination thereof.
See: http://tinyurl.com/para-typography.
![Page 222: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/222.jpg)
Beautiful Web Typography
MeasuresThe measure is the length of a single line. It is important to select a good measure for running text. Do this with the width property.
![Page 223: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/223.jpg)
Beautiful Web Typography
MeasuresThe measure is the length of a single line. It is important to select a good measure for running text. Do this with the width property.
Ideally these should be relative to the font size, such that the type scales proportionately to the measure; use ems or percentages.
![Page 224: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/224.jpg)
Beautiful Web Typography
Measures (cont’d)
![Page 225: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/225.jpg)
Beautiful Web Typography
Measures (cont’d)
Web type generally benefits from smaller measures than those in print. A good ballpark is 10–15 words/75–100 characters per line for body copy, single column.
![Page 226: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/226.jpg)
Beautiful Web Typography
Measures (cont’d)
Web type generally benefits from smaller measures than those in print. A good ballpark is 10–15 words/75–100 characters per line for body copy, single column.
Generally use flush-left (text-align: left;) for
running text, particularly when set in a narrow
measure. Justification can work at ample
measures and better with serif typefaces.
![Page 227: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/227.jpg)
Beautiful Web Typography
Leading (line-height)
![Page 228: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/228.jpg)
Beautiful Web Typography
Leading (line-height)Don’t forget to set an ample leading for running text! Done using the line-height property and
you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size);
![Page 229: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/229.jpg)
Beautiful Web Typography
Leading (line-height)Don’t forget to set an ample leading for running text! Done using the line-height property and
you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size);
Leading spans from baseline to baseline… and I
need some more text to illustrate the point. :)
![Page 230: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/230.jpg)
Beautiful Web Typography
Hanging punctuationTraditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin.
![Page 231: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/231.jpg)
Beautiful Web Typography
Hanging punctuationTraditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio. Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie et imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam at turpis non massa rhoncus sodales.)”
“
(
![Page 232: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/232.jpg)
Beautiful Web Typography
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
![Page 233: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/233.jpg)
Beautiful Web Typography
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
Possible for opening punctuation marks using background-image or a negative text-indent.
CSS3 will hopefully support hanging punctuation with a proposed hanging-punctuation property.
![Page 234: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/234.jpg)
Beautiful Web Typography
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
Possible for opening punctuation marks using background-image or a negative text-indent.
CSS3 will hopefully support hanging punctuation with a proposed hanging-punctuation property.
See: http://tinyurl.com/w3c-hanging-punct.
![Page 235: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/235.jpg)
Beautiful Web Typography
Web: text = UI
Distinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title).
![Page 236: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/236.jpg)
Beautiful Web Typography
Web: text = UI
Distinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title).
Often done with colour (e.g. setting controls gray), size (making them smaller) and typefaces.
![Page 237: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/237.jpg)
Beautiful Web Typography
![Page 238: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/238.jpg)
Beautiful Web Typography
![Page 239: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/239.jpg)
Beautiful Web Typography
![Page 240: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/240.jpg)
Page (grid).
Beautiful Web Typography
![Page 241: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/241.jpg)
Page (grid).
Beautiful Web Typography
Grids bring order to your page and help specify
where things should go.
![Page 242: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/242.jpg)
Page (grid).
Beautiful Web Typography
Grids bring order to your page and help specify
where things should go.
Remember to put in apt “gutters” (margins
between columns) to separate your columns.
![Page 243: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/243.jpg)
Page (grid).
Beautiful Web Typography
Grids bring order to your page and help specify
where things should go.
Remember to put in apt “gutters” (margins
between columns) to separate your columns.
Ruler guides help enormously: use the Web
Developer extension for Firefox or ruler
background images (also see the YUI library).
![Page 244: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/244.jpg)
Beautiful Web Typography
![Page 245: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/245.jpg)
Beautiful Web Typography
![Page 246: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/246.jpg)
Beautiful Web Typography
![Page 247: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/247.jpg)
Addendum
Beautiful Web Typography
![Page 248: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/248.jpg)
Addendum
Beautiful Web Typography
Please don’t use Comic Sans unless you have a
very, very good reason.
![Page 249: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/249.jpg)
: ---
![Page 250: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/250.jpg)
Inspirational typophiles
Beautiful Web Typography
• Cameron Moll: cameronmoll.com
• Jeff Croft: jeffcroft.com
• Mark Boulton: markboulton.co.uk
• Jeffrey Zeldman: zeldman.com
• Richard Rutter clagnut.com
• Jon Tan: jontangerine.com
![Page 251: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/251.jpg)
Beautiful Web Typography
• http://webtypography.net
• http://alistapart.com/topics/design/typography
• http://ilovetypography.com
• http://usabletype.org
• http://www.papress.com/other/thinkingwithtype/
Resources & reading
![Page 252: Web Typography5 090725053013 Phpapp02](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c754f74a795909428b4580/html5/thumbnails/252.jpg)
@klepas
klepas.org
Licensed CC BY-NC-ND
http://creativecommons.org/licenses/by-nc-nd/2.5/au/