Download - Setting standards-friendly web type
![Page 1: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/1.jpg)
![Page 2: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/2.jpg)
Setting standards-friendly web type
Simon Pascal Klein — @klepas
The art of technological typography❦
![Page 3: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/3.jpg)
I’m…
Setting standards-friendly web type
![Page 4: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/4.jpg)
I’m…
one ‘of those’ BA students;1.
Setting standards-friendly web type
![Page 5: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/5.jpg)
I’m…
one ‘of those’ BA students;1.
a graphic & web designer; 2.
Setting standards-friendly web type
![Page 6: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/6.jpg)
I’m…
one ‘of those’ BA students;1.
a graphic & web designer; 2.
and, incurably, a rampant ‘typophile’.3.
Setting standards-friendly web type
![Page 7: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/7.jpg)
‘Typophiles’ are über gεεks who
♥ typography.
Setting standards-friendly web type
![Page 8: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/8.jpg)
‘Typophiles’ are über gεεks who
♥ typography.
Hands up and make yourselves known.
Setting standards-friendly web type
![Page 9: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/9.jpg)
ty•pog•ra•phy | tīˈpägrəfē | •n
Setting standards-friendly web type
![Page 10: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/10.jpg)
ty•pog•ra•phy | tīˈpägrəfē | •n
Typography is the art of creating and setting type
with the purpose of honouring the text it sets.
Setting standards-friendly web type
![Page 11: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/11.jpg)
1 2Setting standards-friendly web type
![Page 12: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/12.jpg)
1Getting a typeface
on the web. 2Setting standards-friendly web type
![Page 13: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/13.jpg)
1Getting a typeface
on the web. 2Setting that type
all pretty.
Setting standards-friendly web type
![Page 14: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/14.jpg)
1Setting standards-friendly web type
![Page 15: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/15.jpg)
Setting standards-friendly web type
![Page 16: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/16.jpg)
Q: Why?
Setting standards-friendly web type
![Page 17: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/17.jpg)
Setting standards-friendly web type
![Page 18: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/18.jpg)
premise:
Setting standards-friendly web type
![Page 19: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/19.jpg)
The internet is saturated;
it’s info-heavy.
premise:
Setting standards-friendly web type
![Page 20: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/20.jpg)
The internet is saturated;
it’s info-heavy.
Much of it is textual.
premise:
Setting standards-friendly web type
![Page 21: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/21.jpg)
The internet is saturated;
it’s info-heavy.
Much of it is textual.
premise:
Much of it is a pain to read.
Setting standards-friendly web type
![Page 22: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/22.jpg)
Setting standards-friendly web type
![Page 23: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/23.jpg)
Typography can bring aesthetic order to
information, helping users read & navigate.
Setting standards-friendly web type
![Page 24: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/24.jpg)
Setting standards-friendly web type
![Page 25: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/25.jpg)
Renewed interest in Typography
Setting standards-friendly web type
![Page 26: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/26.jpg)
Renewed interest in Typographycentral to aesthetics;•
Setting standards-friendly web type
![Page 27: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/27.jpg)
Renewed interest in Typographycentral to aesthetics;•
central to accessibility, legibility, …;•
Setting standards-friendly web type
![Page 28: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/28.jpg)
Renewed interest in Typographycentral to aesthetics;•
central to accessibility, legibility, …;•
many finer typesetting techniques are ‘new’ and
admired for their ingenuity;
•
Setting standards-friendly web type
![Page 29: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/29.jpg)
Renewed interest in Typographycentral to aesthetics;•
central to accessibility, legibility, …;•
many finer typesetting techniques are ‘new’ and
admired for their ingenuity;
•
growing availability of web fonts.•
Setting standards-friendly web type
![Page 30: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/30.jpg)
Setting standards-friendly web type
![Page 31: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/31.jpg)
i.e. make textual stuff look pretty.
☻
Setting standards-friendly web type
![Page 32: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/32.jpg)
Setting standards-friendly web type
![Page 33: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/33.jpg)
Web experiences that feature good typography
are easier and more pleasurable to use.
Setting standards-friendly web type
![Page 34: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/34.jpg)
Setting standards-friendly web type
![Page 35: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/35.jpg)
Assumptions?
Setting standards-friendly web type
![Page 36: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/36.jpg)
Assumptions?It sucks? It’s boring?
Setting standards-friendly web type
![Page 37: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/37.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
It sucks? It’s boring?
Setting standards-friendly web type
![Page 38: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/38.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
Only ‘web-safe’ fonts?2.
It sucks? It’s boring?
Setting standards-friendly web type
![Page 39: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/39.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
Only ‘web-safe’ fonts?2.
Limited control—gotta resort to Flash and other
non-standard technologies?
3.
It sucks? It’s boring?
Setting standards-friendly web type
![Page 40: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/40.jpg)
Assumptions?
Limited to sans-serif only for readability?1.
Only ‘web-safe’ fonts?2.
Limited control—gotta resort to Flash and other
non-standard technologies?
3.
It sucks? It’s boring?
So many options; how do I do it?4.
Setting standards-friendly web type
![Page 41: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/41.jpg)
Setting standards-friendly web type
![Page 42: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/42.jpg)
Not quite.
Setting standards-friendly web type
![Page 43: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/43.jpg)
Not quite.
(Yay!)
Setting standards-friendly web type
![Page 44: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/44.jpg)
Setting standards-friendly web type
![Page 45: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/45.jpg)
Possible problems & pitfalls
Setting standards-friendly web type
![Page 46: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/46.jpg)
Possible problems & pitfalls
more fonts ≠ instant good typography;•
Setting standards-friendly web type
![Page 47: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/47.jpg)
Possible problems & pitfalls
more fonts ≠ instant good typography;•
many of the new web fonts aren’t optimised or
even designed for web use;
•
Setting standards-friendly web type
![Page 48: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/48.jpg)
Possible problems & pitfalls
more fonts ≠ instant good typography;•
many of the new web fonts aren’t optimised or
even designed for web use;
•
growing availability of web fonts;•
Setting standards-friendly web type
![Page 49: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/49.jpg)
Possible problems & pitfalls
more fonts ≠ instant good typography;•
many of the new web fonts aren’t optimised or
even designed for web use;
•
growing availability of web fonts;•
differences in implementation;•
Setting standards-friendly web type
![Page 50: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/50.jpg)
Possible problems & pitfalls
more fonts ≠ instant good typography;•
many of the new web fonts aren’t optimised or
even designed for web use;
•
growing availability of web fonts;•
differences in implementation;•
closed vs. open implementation struggle;•
Setting standards-friendly web type
![Page 51: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/51.jpg)
Possible problems & pitfalls
more fonts ≠ instant good typography;•
many of the new web fonts aren’t optimised or
even designed for web use;
•
growing availability of web fonts;•
differences in implementation;•
closed vs. open implementation struggle;•
sub-setting and compression becomes your
responsibility if not using a hosting service.
•
Setting standards-friendly web type
![Page 52: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/52.jpg)
Setting standards-friendly web type
![Page 53: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/53.jpg)
Q: How?
Setting standards-friendly web type
![Page 54: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/54.jpg)
There are a range of typesetting options for the
web that vary in technical complexity and stylistic
versatility.
A:
Setting standards-friendly web type
![Page 55: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/55.jpg)
There are a range of typesetting options for the
web that vary in technical complexity and stylistic
versatility.
A:
They’re standards-based + you can use them now.
Setting standards-friendly web type
![Page 56: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/56.jpg)
Options for setting fonts:
Setting standards-friendly web type
![Page 57: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/57.jpg)
Options for setting fonts:
Installed fonts (mostly web-safe)1.
Setting standards-friendly web type
![Page 58: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/58.jpg)
Options for setting fonts:
SIFR or other JS and Flash replacement2.
Installed fonts (mostly web-safe)1.
Setting standards-friendly web type
![Page 59: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/59.jpg)
Options for setting fonts:
Cufón et al. (http://tinyurl.com/git-cufon)3.
SIFR or other JS and Flash replacement2.
Installed fonts (mostly web-safe)1.
Setting standards-friendly web type
![Page 60: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/60.jpg)
Options for setting fonts:
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.
Setting standards-friendly web type
![Page 61: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/61.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
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.
Setting standards-friendly web type
![Page 62: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/62.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
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.
webfonts: WOFF via @font-face6.
Setting standards-friendly web type
![Page 63: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/63.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
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.
webfonts: SVG via @font-face7.
webfonts: WOFF via @font-face6.
Setting standards-friendly web type
![Page 64: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/64.jpg)
Options for setting fonts:
webfonts: OT/TTF via @font-face5.
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.
webfonts: hosting & licensing services8.
webfonts: SVG via @font-face7.
webfonts: WOFF via @font-face6.
Setting standards-friendly web type
![Page 65: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/65.jpg)
1. Installed or web-safe fonts
Setting standards-friendly web type
![Page 66: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/66.jpg)
Simply call upon them directly in your font stack
declarations, e.g.:
1. Installed or web-safe fonts
Setting standards-friendly web type
![Page 67: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/67.jpg)
Simply call upon them directly in your font stack
declarations, e.g.:
font-family: Baskerville, Times,
'Times New Roman', serif;
1. Installed or web-safe fonts
Setting standards-friendly web type
![Page 68: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/68.jpg)
Simply call upon them directly in your font stack
declarations, e.g.:
font-family: Baskerville, Times,
'Times New Roman', serif;
1. Installed or web-safe fonts
font-family: 'Helvetica Neue', Helvetica,
'Arial', sans-serif;
Setting standards-friendly web type
![Page 69: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/69.jpg)
![Page 70: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/70.jpg)
Font stacks:
Setting standards-friendly web type
![Page 71: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/71.jpg)
Font stacks:
desired•
Setting standards-friendly web type
![Page 72: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/72.jpg)
Font stacks:
desired•
fallback•
Setting standards-friendly web type
![Page 73: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/73.jpg)
Font stacks:
desired•
fallback•
generic (e.g. serif, sans-serif, monospace)•
Setting standards-friendly web type
![Page 74: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/74.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
2. sifr et al.
Setting standards-friendly web type
![Page 75: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/75.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
2. sifr et al.
Not a feasible solution long-term (i.e. don’t use):
Setting standards-friendly web type
![Page 76: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/76.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
2. sifr et al.
Not a feasible solution long-term (i.e. don’t use):
does subsetting;1.
Setting standards-friendly web type
![Page 77: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/77.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
2. sifr et al.
Not a feasible solution long-term (i.e. don’t use):
does subsetting;1.
non-standard: relies on both Flash and JS;2.
Setting standards-friendly web type
![Page 78: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/78.jpg)
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
2. sifr et al.
Not a feasible solution long-term (i.e. don’t use):
does subsetting;1.
non-standard: relies on both Flash and JS;2.
performance: high page load time—not feasible
for body copy.
3.
Setting standards-friendly web type
![Page 79: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/79.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.
3. Cufón & js implementations
Setting standards-friendly web type
![Page 80: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/80.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.
3. Cufón & js implementations
Thoughts and concerns:
Setting standards-friendly web type
![Page 81: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/81.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.
3. Cufón & js implementations
Thoughts and concerns:
not accessible but works in most browsers;1.
Setting standards-friendly web type
![Page 82: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/82.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.
3. Cufón & js implementations
Thoughts and concerns:
not accessible but works in most browsers;1.
type foundries are sceptical—not a ‘service’;
limited palette of typefaces;
2.
Setting standards-friendly web type
![Page 83: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/83.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.
3. Cufón & js implementations
Thoughts and concerns:
not accessible but works in most browsers;1.
type foundries are sceptical—not a ‘service’;
limited palette of typefaces;
2.
converter is often proprietary.3.
Setting standards-friendly web type
![Page 84: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/84.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’.
4. webfonts: eot/eot Lite
Setting standards-friendly web type
![Page 85: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/85.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’.
4. webfonts: eot/eot Lite
Not feasible as-is currently:
Setting standards-friendly web type
![Page 86: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/86.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’.
4. webfonts: eot/eot Lite
Not feasible as-is currently:
non-standard, proprietary solution;1.
Setting standards-friendly web type
![Page 87: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/87.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’.
4. webfonts: eot/eot Lite
Not feasible as-is currently:
non-standard, proprietary solution;1.
requires a proprietary converter (WEFT) to use;2.
Setting standards-friendly web type
![Page 88: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/88.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’.
4. webfonts: eot/eot 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.
Setting standards-friendly web type
![Page 89: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/89.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.
5. webfonts: ot/ttf
Setting standards-friendly web type
![Page 90: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/90.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.
5. webfonts: ot/ttf
Feasible…:
Setting standards-friendly web type
![Page 91: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/91.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.
5. webfonts: ot/ttf
Feasible…:
OT/TTF files can easily be downloaded;1.
Setting standards-friendly web type
![Page 92: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/92.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.
5. webfonts: ot/ttf
Feasible…:
OT/TTF files can easily be downloaded;1.
support: Safari 3.1+, Firefox 3.5+, Opera 10+,
Chrome 4+; IE9 dev, Android 2.2+;
2.
Setting standards-friendly web type
![Page 93: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/93.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.
5. webfonts: ot/ttf
Feasible…:
OT/TTF files can easily be downloaded;1.
support: Safari 3.1+, Firefox 3.5+, Opera 10+,
Chrome 4+; IE9 dev, Android 2.2+;
2.
subsetting & compression comes down to author.3.
Setting standards-friendly web type
![Page 94: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/94.jpg)
![Page 95: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/95.jpg)
Works just as OT/TTF, linking directly via the src:
declaration to a WOFF file (compressed font data +
XML meta-data bundle, built using sfnt2woff).
6. webfonts: woff
Setting standards-friendly web type
![Page 96: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/96.jpg)
Works just as OT/TTF, linking directly via the src:
declaration to a WOFF file (compressed font data +
XML meta-data bundle, built using sfnt2woff).
6. webfonts: woff
Thoughts (besides being awesome):
Setting standards-friendly web type
![Page 97: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/97.jpg)
Works just as OT/TTF, linking directly via the src:
declaration to a WOFF file (compressed font data +
XML meta-data bundle, built using sfnt2woff).
6. webfonts: woff
Thoughts (besides being awesome):
CORS available via HTTP response headers;1.
Setting standards-friendly web type
![Page 98: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/98.jpg)
Works just as OT/TTF, linking directly via the src:
declaration to a WOFF file (compressed font data +
XML meta-data bundle, built using sfnt2woff).
6. webfonts: woff
Thoughts (besides being awesome):
CORS available via HTTP response headers;1.
2. the sfnt-font data can be extracted… effort?;
Setting standards-friendly web type
![Page 99: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/99.jpg)
Works just as OT/TTF, linking directly via the src:
declaration to a WOFF file (compressed font data +
XML meta-data bundle, built using sfnt2woff).
6. webfonts: woff
Thoughts (besides being awesome):
CORS available via HTTP response headers;1.
support: Firefox 3.6+, WebKit, Chrome 5+, IE9 dev;3.
2. the sfnt-font data can be extracted… effort?;
Setting standards-friendly web type
![Page 100: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/100.jpg)
Works just as OT/TTF, linking directly via the src:
declaration to a WOFF file (compressed font data +
XML meta-data bundle, built using sfnt2woff).
6. webfonts: woff
Thoughts (besides being awesome):
CORS available via HTTP response headers;1.
subsetting & compression comes down to author.4.
support: Firefox 3.6+, WebKit, Chrome 5+, IE9 dev;3.
2. the sfnt-font data can be extracted… effort?;
Setting standards-friendly web type
![Page 101: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/101.jpg)
Works just as EOT and OT/TTF, instead linking
directly via the src: declaration to an SVG file
which is downloaded and used to render the type.
7. webfonts: svg
Setting standards-friendly web type
![Page 102: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/102.jpg)
Works just as EOT and OT/TTF, instead linking
directly via the src: declaration to an SVG file
which is downloaded and used to render the type.
7. webfonts: svg
Thoughts:
Setting standards-friendly web type
![Page 103: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/103.jpg)
Works just as EOT and OT/TTF, instead linking
directly via the src: declaration to an SVG file
which is downloaded and used to render the type.
7. webfonts: svg
Thoughts:
again, SVG files can easily be downloaded;1.
Setting standards-friendly web type
![Page 104: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/104.jpg)
Works just as EOT and OT/TTF, instead linking
directly via the src: declaration to an SVG file
which is downloaded and used to render the type.
7. webfonts: svg
Thoughts:
again, SVG files can easily be downloaded;1.
support: Firefox 3.5+ Chrome 0.3+, Opera 9+, iOS1+,
Safari 3.1+;
2.
Setting standards-friendly web type
![Page 105: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/105.jpg)
Works just as EOT and OT/TTF, instead linking
directly via the src: declaration to an SVG file
which is downloaded and used to render the type.
7. webfonts: svg
Thoughts:
again, SVG files can easily be downloaded;1.
support: Firefox 3.5+ Chrome 0.3+, Opera 9+, iOS1+,
Safari 3.1+;
2.
subsetting & compression comes down to author.3.
Setting standards-friendly web type
![Page 106: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/106.jpg)
Setting standards-friendly web type
![Page 107: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/107.jpg)
Web hosting & licensing services have sprung up
offering a library of fonts at a variety of free and
commercial plans (e.g. Typekit, Kernest, et al.).
Setting standards-friendly web type
![Page 108: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/108.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
8. Hosting & licensing services
Setting standards-friendly web type
![Page 109: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/109.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
8. Hosting & licensing services
Thoughts:
Setting standards-friendly web type
![Page 110: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/110.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
8. Hosting & licensing services
Thoughts:
deemed ‘the solution’ and becoming such;1.
Setting standards-friendly web type
![Page 111: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/111.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
8. Hosting & licensing services
Thoughts:
deemed ‘the solution’ and becoming such;1.
2. standards-based, good browser support, and easy;
Setting standards-friendly web type
![Page 112: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/112.jpg)
Generally foundry initiatives that are JS-based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
8. Hosting & licensing services
Thoughts:
deemed ‘the solution’ and becoming such;1.
subsetting and/or compression service-side.3.
2. standards-based, good browser support, and easy;
Setting standards-friendly web type
![Page 113: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/113.jpg)
![Page 114: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/114.jpg)
![Page 115: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/115.jpg)
Setting standards-friendly web type
![Page 116: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/116.jpg)
![Page 117: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/117.jpg)
![Page 118: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/118.jpg)
![Page 119: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/119.jpg)
![Page 120: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/120.jpg)
![Page 121: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/121.jpg)
![Page 122: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/122.jpg)
![Page 123: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/123.jpg)
![Page 124: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/124.jpg)
![Page 125: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/125.jpg)
![Page 126: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/126.jpg)
![Page 127: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/127.jpg)
![Page 128: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/128.jpg)
Using @font-face
Setting standards-friendly web type
![Page 129: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/129.jpg)
Using @font-faceReset0.
Setting standards-friendly web type
![Page 130: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/130.jpg)
Using @font-faceReset0.
All the browsers have their own default styling for
various (x)HTML elements. This makes it a pain for
cross-browser consistency.
Setting standards-friendly web type
![Page 131: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/131.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.
Setting standards-friendly web type
![Page 132: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/132.jpg)
‘bullet-proof’ @font-face declarations
Setting standards-friendly web type
![Page 133: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/133.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
Setting standards-friendly web type
![Page 134: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/134.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
font-family: "Your typeface";
Setting standards-friendly web type
![Page 135: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/135.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
font-family: "Your typeface";src: url("type/filename.eot");
Setting standards-friendly web type
![Page 136: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/136.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
font-family: "Your typeface";src: url("type/filename.eot");src: local("Alt name"), local("Alt-name"),
Setting standards-friendly web type
![Page 137: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/137.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
font-family: "Your typeface";src: url("type/filename.eot");src: local("Alt name"), local("Alt-name"),
url("type/filename.woff") format("woff"),
Setting standards-friendly web type
![Page 138: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/138.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
font-family: "Your typeface";src: url("type/filename.eot");src: local("Alt name"), local("Alt-name"),
url("type/filename.woff") format("woff"),url("type/filename.otf") format("opentype"),
Setting standards-friendly web type
![Page 139: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/139.jpg)
@font-face {
‘bullet-proof’ @font-face declarations
font-family: "Your typeface";src: url("type/filename.eot");src: local("Alt name"), local("Alt-name"),
url("type/filename.woff") format("woff"),url("type/filename.otf") format("opentype"),url("type/filename.svg#id") format("svg");
}
Setting standards-friendly web type
![Page 140: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/140.jpg)
When using @font-face, we’re essentially dealing
with separate font files of the same family for the
various font styles, e.g., foobar-regular.otf, foobar-
italic.otf, foobar-bold.otf, foobar-smallcaps.otf &c.
Setting standards-friendly web type
![Page 141: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/141.jpg)
When using @font-face, we’re essentially dealing
with separate font files of the same family for the
various font styles, e.g., foobar-regular.otf, foobar-
italic.otf, foobar-bold.otf, foobar-smallcaps.otf &c.
This can become an issue—consider elements
such as strong and em which are styled with
setting the face in a bold and italic respectively.
Setting standards-friendly web type
![Page 142: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/142.jpg)
When using @font-face, we’re essentially dealing
with separate font files of the same family for the
various font styles, e.g., foobar-regular.otf, foobar-
italic.otf, foobar-bold.otf, foobar-smallcaps.otf &c.
This can become an issue—consider elements
such as strong and em which are styled with
setting the face in a bold and italic respectively.
If we declare the italic via @font-face (as we
would to get the style into our design) what will
happen is that the italic is digitally italicised (fake
italics) by the font rendering engine. Result?
Setting standards-friendly web type
![Page 143: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/143.jpg)
![Page 144: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/144.jpg)
If we avoid or overwrite the various declarations
(e.g. em { font-style: normal;}) and for
whatever reason our desired @font-face font
isn’t available, we rob other fonts in the font-
stack of their styling.
Setting standards-friendly web type
![Page 145: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/145.jpg)
We overcome both these issues by setting the
font styles within the @font-face declaration:
@font-face {
font-family: "Your italic typeface";src: url("type/filename.eot");src: local("Alt italic name"), local("Alt-italic-name"),
url("type/filename-italic.woff") format("woff"),url("type/filename-italic.otf") format("opentype"),url("type/filename-italic.svg#id") format("svg");
}
Setting standards-friendly web type
![Page 146: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/146.jpg)
We overcome both these issues by setting the
font styles within the @font-face declaration:
@font-face {
font-family: "Your italic typeface";
src: url("type/filename.eot");src: local("Alt italic name"), local("Alt-italic-name"),
url("type/filename-italic.woff") format("woff"),url("type/filename-italic.otf") format("opentype"),url("type/filename-italic.svg#id") format("svg");
}
Setting standards-friendly web type
![Page 147: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/147.jpg)
We overcome both these issues by setting the
font styles within the @font-face declaration:
@font-face {
font-family: "Your italic typeface";
src: url("type/filename.eot");src: local("Alt italic name"), local("Alt-italic-name"),
url("type/filename-italic.woff") format("woff"),url("type/filename-italic.otf") format("opentype"),url("type/filename-italic.svg#id") format("svg");
}
font-style: italic;
Setting standards-friendly web type
![Page 148: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/148.jpg)
Why are they two entries for local in src?
src: local("Alt italic name"), local("Alt-italic-name"),
Some browsers refer to the fonts using their
PostScript names.
Setting standards-friendly web type
![Page 149: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/149.jpg)
Finding it in Font Book under Mac OS X:
Setting standards-friendly web type
![Page 150: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/150.jpg)
There is a free downloadable Font properties
extension for Windows. Once installed right-click
→ Properties on a font file and click on the Names
tab to see the name details.
Setting standards-friendly web type
![Page 151: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/151.jpg)
There is a free downloadable Font properties
extension for Windows. Once installed right-click
→ Properties on a font file and click on the Names
tab to see the name details.
See: http://bit.ly/ms-font-prop.
Setting standards-friendly web type
![Page 152: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/152.jpg)
There is a free downloadable Font properties
extension for Windows. Once installed right-click
→ Properties on a font file and click on the Names
tab to see the name details.
See: http://bit.ly/ms-font-prop.
There are similar tools on the free desktops.
Setting standards-friendly web type
![Page 153: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/153.jpg)
Setting standards-friendly web type
![Page 154: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/154.jpg)
When using @font-face for self-hosted fonts, we
need to subset and compress ourselves.
Setting standards-friendly web type
![Page 155: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/155.jpg)
When using @font-face for self-hosted fonts, we
need to subset and compress ourselves.
Subsetting allows us to remove knowingly unused
glyphs from the font file, thus cutting down file
size. E.g. if we know we won’t ever need Greek
characters we can remove them reducing the font
file’s size, thus lowering page size.
Setting standards-friendly web type
![Page 156: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/156.jpg)
When using @font-face for self-hosted fonts, we
need to subset and compress ourselves.
Subsetting allows us to remove knowingly unused
glyphs from the font file, thus cutting down file
size. E.g. if we know we won’t ever need Greek
characters we can remove them reducing the font
file’s size, thus lowering page size.
Subsetting is can be done in a font editor—I
suggest FontForge (FOSS)—open your font, select
unused character blocks and delete them; save.
Setting standards-friendly web type
![Page 157: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/157.jpg)
Setting standards-friendly web type
![Page 158: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/158.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
Setting standards-friendly web type
![Page 159: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/159.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
WEFT will use Monotype’s proprietary
compression algorithm and gzip is better;
1.
Setting standards-friendly web type
![Page 160: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/160.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
WEFT will use Monotype’s proprietary
compression algorithm and gzip is better;
1.
2. WEFT only works on Windows XP(?);
Setting standards-friendly web type
![Page 161: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/161.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
WEFT will use Monotype’s proprietary
compression algorithm and gzip is better;
1.
tff2eot doesn’t compress—use gzip server-side.3.
2. WEFT only works on Windows XP(?);
Setting standards-friendly web type
![Page 162: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/162.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
There are online front ends to ttf2eot/sfnt2woff:
WEFT will use Monotype’s proprietary
compression algorithm and gzip is better;
1.
tff2eot doesn’t compress—use gzip server-side.3.
2. WEFT only works on Windows XP(?);
Setting standards-friendly web type
![Page 163: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/163.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
There are online front ends to ttf2eot/sfnt2woff:
WEFT will use Monotype’s proprietary
compression algorithm and gzip is better;
1.
tff2eot doesn’t compress—use gzip server-side.3.
2. WEFT only works on Windows XP(?);
http://ttf2eot.sebastiankippe.com/•
Setting standards-friendly web type
![Page 164: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/164.jpg)
Save yourself a headache—skip using the WEFT
converter and instead use ttf2eot. Why?
There are online front ends to ttf2eot/sfnt2woff:
WEFT will use Monotype’s proprietary
compression algorithm and gzip is better;
1.
tff2eot doesn’t compress—use gzip server-side.3.
2. WEFT only works on Windows XP(?);
http://ttf2eot.sebastiankippe.com/•
http://fontsquirrel.com/fontface/generator•
Setting standards-friendly web type
![Page 165: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/165.jpg)
![Page 166: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/166.jpg)
For compression, let’s gzip (via .htaccess):
Setting standards-friendly web type
![Page 167: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/167.jpg)
# gzips content if possible<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|css|js|...|otf|eot)$ mod_gzip_item_include handler ^cgi-script$ ... mod_gzip_item_include mime ^application/vnd.ms-fontobject$</IfModule>
For compression, let’s gzip (via .htaccess):
Setting standards-friendly web type
![Page 168: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/168.jpg)
# gzips content if possible<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|css|js|...|otf|eot)$ mod_gzip_item_include handler ^cgi-script$ ... mod_gzip_item_include mime ^application/vnd.ms-fontobject$</IfModule>
For compression, let’s gzip (via .htaccess):
Setting standards-friendly web type
![Page 169: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/169.jpg)
# gzips content if possible<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|css|js|...|otf|eot)$ mod_gzip_item_include handler ^cgi-script$ ... mod_gzip_item_include mime ^application/vnd.ms-fontobject$</IfModule>
For compression, let’s gzip (via .htaccess):
Setting standards-friendly web type
![Page 170: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/170.jpg)
# gzips content if possible<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|css|js|...|otf|eot)$ mod_gzip_item_include handler ^cgi-script$ ... mod_gzip_item_include mime ^application/vnd.ms-fontobject$</IfModule>
For compression, let’s gzip (via .htaccess):
Setting standards-friendly web type
![Page 171: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/171.jpg)
# gzips content if possible<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|css|js|...|otf|eot)$ mod_gzip_item_include handler ^cgi-script$ ... mod_gzip_item_include mime ^application/vnd.ms-fontobject$</IfModule>
For compression, let’s gzip (via .htaccess):
Don’t be surprised to see reductions of 40–50%.
Setting standards-friendly web type
![Page 172: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/172.jpg)
While we’re at it, let’s cache the font assets too:
Setting standards-friendly web type
![Page 173: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/173.jpg)
While we’re at it, let’s cache the font assets too:
# Cache following file types for one month<FilesMatch ".(js|jpeg|jpg|...|otf|eot)$"> Header set Cache-Control "max-age=2592000"</FilesMatch>
Setting standards-friendly web type
![Page 174: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/174.jpg)
While we’re at it, let’s cache the font assets too:
# Cache following file types for one month<FilesMatch ".(js|jpeg|jpg|...|otf|eot)$"> Header set Cache-Control "max-age=2592000"</FilesMatch>
Setting standards-friendly web type
![Page 175: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/175.jpg)
Finding fonts…?
Setting standards-friendly web type
![Page 176: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/176.jpg)
Finding fonts…?
Setting standards-friendly web type
http://openfontlibrary.org/•
![Page 177: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/177.jpg)
Finding fonts…?
Setting standards-friendly web type
http://openfontlibrary.org/•
http://www.theleagueofmoveabletype.com/•
![Page 178: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/178.jpg)
Finding fonts…?
Setting standards-friendly web type
http://openfontlibrary.org/•
http://www.theleagueofmoveabletype.com/•
http://www.fontsquirrel.com/fontface•
![Page 179: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/179.jpg)
Finding fonts…?
Setting standards-friendly web type
http://openfontlibrary.org/•
http://www.theleagueofmoveabletype.com/•
http://www.fontsquirrel.com/fontface•
list on webfonts.info: http://bit.ly/16Qid4•
![Page 180: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/180.jpg)
2Setting standards-friendly web type
![Page 181: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/181.jpg)
Setting standards-friendly web type
![Page 182: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/182.jpg)
Meanwhile:
Setting standards-friendly web type
![Page 183: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/183.jpg)
Webfonts aren’t the holy grail of web
typography problems…
Meanwhile:
Setting standards-friendly web type
![Page 184: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/184.jpg)
– Jeff Croft
“Typography is not picking a ‘cool’ font.”
Webfonts aren’t the holy grail of web
typography problems…
Meanwhile:
Setting standards-friendly web type
![Page 185: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/185.jpg)
Also remember, most fonts available from
type foundries are not optimised for screen
usage; they’re for print.
Setting standards-friendly web type
![Page 186: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/186.jpg)
…
Setting standards-friendly web type
![Page 187: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/187.jpg)
So… now having selected our desired
typeface (via webfonts or otherwise), let’s
make it pretty.
Setting standards-friendly web type
![Page 188: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/188.jpg)
Setting standards-friendly web type
![Page 189: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/189.jpg)
serif
Setting standards-friendly web type
![Page 190: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/190.jpg)
serifsans serif
Setting standards-friendly web type
![Page 191: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/191.jpg)
serifsans serifscript
Setting standards-friendly web type
![Page 192: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/192.jpg)
serifsans serifscript
blackletter
Setting standards-friendly web type
![Page 193: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/193.jpg)
serifsans serifscript
blacklettermonospace
Setting standards-friendly web type
![Page 194: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/194.jpg)
Setting standards-friendly web type
![Page 195: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/195.jpg)
ArialVerdanaCourier New
Times New RomanGeorgiaTrebuchet MS
Setting standards-friendly web type
![Page 196: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/196.jpg)
Setting standards-friendly web type
![Page 197: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/197.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.:
Setting standards-friendly web type
![Page 198: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/198.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.
Setting standards-friendly web type
![Page 199: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/199.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.
Setting standards-friendly web type
![Page 200: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/200.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.
Setting standards-friendly web type
![Page 201: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/201.jpg)
Setting standards-friendly web type
![Page 202: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/202.jpg)
Use a combination of families, styles, and weights
to breath some fresh air into your web type.
Setting standards-friendly web type
![Page 203: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/203.jpg)
Use a combination of families, styles, and weights
to breath some fresh air into your web type.
font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
•
Setting standards-friendly web type
![Page 204: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/204.jpg)
Use a combination of families, styles, and weights
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).
•
Setting standards-friendly web type
![Page 205: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/205.jpg)
Use a combination of families, styles, and weights
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.
•
Setting standards-friendly web type
![Page 206: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/206.jpg)
Setting standards-friendly web type
![Page 207: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/207.jpg)
roman (‘normal’)Setting standards-friendly web type
![Page 208: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/208.jpg)
roman (‘normal’)Setting standards-friendly web type
![Page 209: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/209.jpg)
roman (‘normal’)italic
Setting standards-friendly web type
![Page 210: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/210.jpg)
roman (‘normal’)italic oblique≠
Setting standards-friendly web type
![Page 211: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/211.jpg)
roman (‘normal’)italic oblique≠
Setting standards-friendly web type
![Page 212: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/212.jpg)
roman (‘normal’)italic oblique≠
Setting standards-friendly web type
![Page 213: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/213.jpg)
roman (‘normal’)italicultralight regular bold
oblique≠
Setting standards-friendly web type
![Page 214: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/214.jpg)
roman (‘normal’)italicultralight regular bold
oblique≠
Setting standards-friendly web type
![Page 215: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/215.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensed
oblique≠
Setting standards-friendly web type
![Page 216: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/216.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensed
oblique≠
Setting standards-friendly web type
![Page 217: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/217.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensedSMALL-CAPITALS
oblique≠
Setting standards-friendly web type
![Page 218: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/218.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensedSMALL-CAPITALS
oblique≠
Setting standards-friendly web type
![Page 219: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/219.jpg)
Setting standards-friendly web type
![Page 220: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/220.jpg)
Tracking
Setting standards-friendly web type
![Page 221: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/221.jpg)
TrackingTracking
Setting standards-friendly web type
![Page 222: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/222.jpg)
Letter-spacingTrackingTracking
Setting standards-friendly web type
![Page 223: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/223.jpg)
Letter-spacingLetter-spacingTrackingTracking
Setting standards-friendly web type
![Page 224: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/224.jpg)
Setting standards-friendly web type
![Page 225: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/225.jpg)
Letʼs see some loose word-spacing in action…
Setting standards-friendly web type
![Page 226: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/226.jpg)
Letʼs see some loose word-spacing in action…
And now both loose word-spacing and tracking featured together.
Setting standards-friendly web type
![Page 227: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/227.jpg)
Setting standards-friendly web type
![Page 228: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/228.jpg)
And finally, the recently popular trend of negative tracking.
Setting standards-friendly web type
![Page 229: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/229.jpg)
Setting standards-friendly web type
![Page 230: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/230.jpg)
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
Setting standards-friendly web type
![Page 231: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/231.jpg)
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
E.g. setting acronyms or numerical tabular data.
Setting standards-friendly web type
![Page 232: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/232.jpg)
Setting standards-friendly web type
![Page 233: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/233.jpg)
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
Setting standards-friendly web type
![Page 234: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/234.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; ac habitant orci tristique senectus et 4,962 malesuada fames egestas HTML sit lectus.
Setting standards-friendly web type
![Page 235: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/235.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; ac habitant orci tristique senectus et 4,962 malesuada fames egestas HTML sit lectus.
Setting standards-friendly web type
![Page 236: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/236.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; ac habitant orci tristique senectus et 4,962 malesuada fames egestas HTML sit lectus.
Lorem ipsum dolor sit amet, nasa consectetur adipiscing et. Vestibulum elit pellentesque; ac habitant orci tristique senectus et 4,962 malesuada fames egestas html sit lectus.
Setting standards-friendly web type
![Page 237: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/237.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; ac habitant orci tristique senectus et 4,962 malesuada fames egestas HTML sit lectus.
Lorem ipsum dolor sit amet, nasa consectetur adipiscing et. Vestibulum elit pellentesque; ac habitant orci tristique senectus et 4,962 malesuada fames egestas html sit lectus.
Setting standards-friendly web type
![Page 238: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/238.jpg)
Setting standards-friendly web type
![Page 239: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/239.jpg)
letter-spacing and word-spacing controls
tracking and word-spacing respectively. Both take
numerical values and normal.
•
Setting standards-friendly web type
![Page 240: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/240.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.
Setting standards-friendly web type
![Page 241: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/241.jpg)
Setting standards-friendly web type
![Page 242: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/242.jpg)
font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents (e.g.
browsers) set default value at 16px.
•
Setting standards-friendly web type
![Page 243: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/243.jpg)
font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents (e.g.
browsers) set default value at 16px.
•
Size font sizes relatively using ems or %.
Setting standards-friendly web type
![Page 244: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/244.jpg)
font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents (e.g.
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).
Setting standards-friendly web type
![Page 245: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/245.jpg)
Why?
Setting standards-friendly web type
![Page 246: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/246.jpg)
Why?
Some UAs don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
•
Setting standards-friendly web type
![Page 247: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/247.jpg)
Why?
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.•
Setting standards-friendly web type
![Page 248: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/248.jpg)
Why?
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.
•
Setting standards-friendly web type
![Page 249: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/249.jpg)
Setting standards-friendly web type
![Page 250: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/250.jpg)
Key: remember font sizes are inherited:
parents → children.
Setting standards-friendly web type
![Page 251: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/251.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):
Setting standards-friendly web type
![Page 252: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/252.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):
Setting standards-friendly web type
![Page 253: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/253.jpg)
62.5% trick
Setting standards-friendly web type
![Page 254: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/254.jpg)
62.5% trickSimplify your calculations. Consider:
p { font-size: 80%; }blockquote { font-size: 80%; }
Setting standards-friendly web type
![Page 255: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/255.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.
62.5% trickSimplify your calculations. Consider:
p { font-size: 80%; }blockquote { font-size: 80%; }
Setting standards-friendly web type
![Page 256: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/256.jpg)
62.5% trick (cont’d)
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
Setting standards-friendly web type
![Page 257: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/257.jpg)
62.5% trick (cont’d)
browsers have common default size of 16px; thus:•
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
Setting standards-friendly web type
![Page 258: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/258.jpg)
62.5% trick (cont’d)
browsers have common default size of 16px; thus:•
set body to 62.5% and reset all to 10px; thus:•
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
Setting standards-friendly web type
![Page 259: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/259.jpg)
62.5% 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.
•
In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
Setting standards-friendly web type
![Page 260: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/260.jpg)
Setting standards-friendly web type
![Page 261: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/261.jpg)
To find an element’s font size in absolute terms
(e.g. pixels) you can use the Firefox ‘Web
Developer’ plugin: Information → Display Element
Information.
Setting standards-friendly web type
![Page 262: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/262.jpg)
Mixing typefaces requires special attention. Try to
align x-heights and sizes. X-heights?
Helvetica Regular 96pt & Dolly Regular 96pt.
x-height x-height
Setting standards-friendly web type
![Page 263: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/263.jpg)
Mixing typefaces requires special attention. Try to
align x-heights and sizes. X-heights?
Helvetica Regular 96pt & Dolly Regular 96pt.
x-height x-height
Helvetica Regular 96pt & Dolly Regular 108pt.
x-heightx-height
Setting standards-friendly web type
![Page 264: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/264.jpg)
Don’t just arbitrarily set type; use a scale:
Stick it to a scale
Setting standards-friendly web type
![Page 265: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/265.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
Setting standards-friendly web type
![Page 266: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/266.jpg)
Setting standards-friendly web type
![Page 267: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/267.jpg)
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
Setting standards-friendly web type
![Page 268: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/268.jpg)
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…
Setting standards-friendly web type
![Page 269: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/269.jpg)
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…
Setting standards-friendly web type
![Page 270: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/270.jpg)
Correct glyphsConsider:
' "
Setting standards-friendly web type
![Page 271: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/271.jpg)
Correct glyphsConsider:
' "1'61"
Setting standards-friendly web type
![Page 272: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/272.jpg)
"This is a group of words surrounded by a bunch
of tick marks."
Setting standards-friendly web type
![Page 273: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/273.jpg)
“This is a quotation!”- Jeff Croft
Setting standards-friendly web type
![Page 274: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/274.jpg)
‘ ’ “ ”’
Setting standards-friendly web type
![Page 275: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/275.jpg)
Setting standards-friendly web type
![Page 276: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/276.jpg)
- hyphen Mary-Anne, Walter-Strauss
– en dash April–May, ages 3–5, pp. 37–38
— em dash Phrase marker—(generally) not spaced—like so.
– minus 5–4=1
Setting standards-friendly web type
![Page 277: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/277.jpg)
“ opening double quote “” closing double quote ”‘ opening single quote ‘’ closing single quote ’– en dash –— em dash —− minus −× multiplication ×… ellipsis …
Setting standards-friendly web type
![Page 278: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/278.jpg)
Smartypants et al.
Setting standards-friendly web type
![Page 279: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/279.jpg)
Smartypants et al.‘Doing something repetitively? Likely you’re doing it wrong.’
Setting standards-friendly web type
![Page 280: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/280.jpg)
Smartypants et al. are parsers that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (and beyond just punctuation).
Smartypants et al.‘Doing something repetitively? Likely you’re doing it wrong.’
Setting standards-friendly web type
![Page 281: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/281.jpg)
Smartypants et al. are parsers that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (and beyond just punctuation).
Smartypants et al.‘Doing something repetitively? Likely you’re doing it wrong.’
Smartypants (PHP, Perl, & Movable Type);•
Setting standards-friendly web type
![Page 282: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/282.jpg)
Smartypants et al. are parsers that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (and beyond just punctuation).
Smartypants et al.‘Doing something repetitively? Likely you’re doing it wrong.’
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
Setting standards-friendly web type
![Page 283: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/283.jpg)
Smartypants et al. are parsers that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (and beyond just punctuation).
Smartypants et al.‘Doing something repetitively? Likely you’re doing it wrong.’
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
wp-Typography (WordPress);•
Setting standards-friendly web type
![Page 284: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/284.jpg)
Smartypants et al. are parsers that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (and beyond just punctuation).
Smartypants et al.‘Doing something repetitively? Likely you’re doing it wrong.’
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
wp-Typography (WordPress);•
Markdown, Textile et al., …•
Setting standards-friendly web type
![Page 285: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/285.jpg)
Setting standards-friendly web type
![Page 286: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/286.jpg)
Give ampersands love
Setting standards-friendly web type
![Page 287: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/287.jpg)
Give ampersands loveItalic ampersand variants are often much prettier
than their common roman counterparts:
Setting standards-friendly web type
![Page 288: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/288.jpg)
Give ampersands love
& & & & & &Italic ampersand variants are often much prettier
than their common roman counterparts:
Setting standards-friendly web type
![Page 289: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/289.jpg)
Give ampersands love
& & & & & && & & & & &
Italic ampersand variants are often much prettier
than their common roman counterparts:
Setting standards-friendly web type
![Page 290: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/290.jpg)
Marking paragraphs (and more)
Setting standards-friendly web type
![Page 291: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/291.jpg)
Don’t be afraid to mark new paragraphs with
indents, outdents, white-lines, a pilcrow (¶) or
other ornament (e.g. ❦), versals, headers &c.
Marking paragraphs (and more)
Setting standards-friendly web type
![Page 292: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/292.jpg)
Don’t be afraid to mark new paragraphs with
indents, outdents, white-lines, a pilcrow (¶) or
other ornament (e.g. ❦), versals, headers &c.
Marking paragraphs (and more)
…or a combination thereof.
Setting standards-friendly web type
![Page 293: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/293.jpg)
Don’t be afraid to mark new paragraphs with
indents, outdents, white-lines, a pilcrow (¶) or
other ornament (e.g. ❦), versals, headers &c.
Marking paragraphs (and more)
…or a combination thereof.
See: http://tinyurl.com/para-typography.
Setting standards-friendly web type
![Page 294: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/294.jpg)
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.
Setting standards-friendly web type
![Page 295: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/295.jpg)
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.
Setting standards-friendly web type
![Page 296: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/296.jpg)
Measures (cont’d)
Setting standards-friendly web type
![Page 297: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/297.jpg)
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.
Setting standards-friendly web type
![Page 298: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/298.jpg)
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.
Setting standards-friendly web type
![Page 299: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/299.jpg)
Leading (line-height)
Setting standards-friendly web type
![Page 300: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/300.jpg)
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);
Setting standards-friendly web type
![Page 301: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/301.jpg)
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. ☺
Setting standards-friendly web type
![Page 302: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/302.jpg)
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. ☺
Setting standards-friendly web type
![Page 303: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/303.jpg)
Hanging punctuationTraditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin.
Setting standards-friendly web type
![Page 304: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/304.jpg)
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. Etiam mollis vulputate lorem nullam turpis non massa rhoncus sodales.)”
“
(
Setting standards-friendly web type
![Page 305: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/305.jpg)
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. Etiam mollis vulputate lorem nullam turpis non massa rhoncus sodales.)”
“
(
Setting standards-friendly web type
![Page 306: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/306.jpg)
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
Setting standards-friendly web type
![Page 307: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/307.jpg)
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.
Setting standards-friendly web type
![Page 308: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/308.jpg)
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.
Setting standards-friendly web type
![Page 309: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/309.jpg)
Web: text = uiDistinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title).
Setting standards-friendly web type
![Page 310: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/310.jpg)
Web: text = uiDistinguish 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 a tad smaller) and with different typefaces or font styles.
Setting standards-friendly web type
![Page 311: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/311.jpg)
Setting standards-friendly web type
![Page 312: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/312.jpg)
Setting standards-friendly web type
![Page 313: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/313.jpg)
Setting standards-friendly web type
![Page 314: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/314.jpg)
Page (grid)
Setting standards-friendly web type
![Page 315: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/315.jpg)
Page (grid)Grids bring order to your page and help specify
where things should go.
Setting standards-friendly web type
![Page 316: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/316.jpg)
Page (grid)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.
Setting standards-friendly web type
![Page 317: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/317.jpg)
Page (grid)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).
Setting standards-friendly web type
![Page 318: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/318.jpg)
Setting standards-friendly web type
![Page 319: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/319.jpg)
Setting standards-friendly web type
![Page 320: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/320.jpg)
Btw: http://gridulator.com.
Setting standards-friendly web type
![Page 321: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/321.jpg)
Setting standards-friendly web type
![Page 322: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/322.jpg)
Addendum
Setting standards-friendly web type
![Page 323: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/323.jpg)
AddendumPlease don’t use Comic Sans unless you have a
very, very good reason.
Setting standards-friendly web type
![Page 324: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/324.jpg)
isbn: 0-88179-206-3
![Page 325: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/325.jpg)
Inspirational typophiles• 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
Setting standards-friendly web type
![Page 326: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/326.jpg)
• http://webtypography.net
• http://alistapart.com/topics/design/typography
• http://ilovetypography.com
• http://usabletype.org
• http://www.papress.com/other/thinkingwithtype/
Resources & reading
Setting standards-friendly web type
![Page 327: Setting standards-friendly web type](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c83bf84a795916308b461c/html5/thumbnails/327.jpg)
@klepas
klepas.org
Licensed CC BY-NC-ND
http://creativecommons.org/licenses/by-nc-nd/2.5/au/