Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.

1. { Many Types, Many Faces}
W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Jason Cranford Teague
Bright Eye Media
@jasonspeaking
Voices That Matter | 29 April 2009
San Francisco, California

2. CSS Typography =

3. CSS Typography =
Limited Font Choices

4. limits

5. design is about
limits

6. design is about
overcoming
limits

7. “Type Design is an act of
plagiarism in itself—you
basically recreate the flesh
of the same skeleton.”
Alejandro Lo Celso Saravia
pampatype.com

9. What if everyone looked the same?
(and was ugly ta’ boot)

10. How many fonts
are there?

11. How many fonts
are there?
>100K Fonts

12. How many fonts
are there on the
Web?

13. How many fonts
are there on the
Web?
9 Fonts

14. Arial
Helvetica

15. Arial
Helvetica
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

16. font-family : arial;

17. font-family : helvetica, arial, sans-serif;

18. Times
Times New Roman

19. Times
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

20. font-family :

21. font-family : times, 'times new roman', serif;

22. Georgia

23. Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

24. Verdana
Trebuchet MS

25. Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

26. font-family : helvetica, arial, sans-serif;

27. font-family : verdana, helvetica, arial, sans-serif;

29. Courier New
Comic Sans MS
Impact


30. Core Web Fonts

31. Core Web Fonts

32. Core Web Fonts
9 Fonts

33. EULA

34. EULA
End-User License Agreement

35. Installed Fonts

36. Windows XP

37. Windows XP
+9 Fonts
Franklin Gothic Medium
Lucid Console
Lucida Sans Unicode
Marlett
Microsoft Sans Serif
Palatino Linotype
Symbol
Tahoma
Wingdings

38. Windows Vista

39. Windows Vista
+7 Fonts
Calibri
Cambria
Candara
Consolas
Constantia
Corbel
Segoe UI

40. Mac OS X

41. Mac OS X
+30 Fonts
American Typewriter Courier Monaco
Apple Chancery Didot Optima
Apple Symbols Futura Papyrus
Baskerville Geneva Tahoma
Big Caslon Gill Sans Taipei
Brush Script Helvetica Times
Chalkboard Helvetica Neue Zapf Dingbats
Charcoal CY Herculanum Zapfino
Cochin Hoefler Text
Cooper Lucida Grande
Copperplate Marker Felt

42. Apple iLife

43. Apple iLife
+13 Fonts
Academy Engraved Palatino
Bank Gothic Portago
BlairMDITC TT Santa Fe
Bodoni SvtyTwo ITC TT Savoye
Bradley Hand ITC TT Snell Roundhand
Cracked Stone Sans
Handwriting – Dakota

44. Microso Office 2007

45. Microso Office 2007
+121 Fonts

46. Microso Office: Mac 2008

47. Microso Office: Mac 2008
+72 Fonts

48. MS Office:
Mac & Windows

49. MS Office:
Mac & Windows
62 Fonts

50. Web Safe Fonts

51. Windows

52. Windows
148 Fonts

53. Mac

54. Mac
134 Fonts

55. Mac & Windows

56. Mac & Windows
73 Fonts

57. Web Safe Fonts List
www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/

58. font-family : verdana, arial, helvetica, sans-serif;

59. font-family : corbel, verdana, arial, helvetica, sans-serif;

60. Web Safe Fonts

61. Web Safe Fonts
~180 Fonts

62. Linked Webfonts

63. Diavlo
www.josbuivenga.demon.nl

64. @font-face {...}

65. @font-face { font-family: Diavlo;
src: url(’Diavlo_BOOK_II_37.otf’);
}

66. Name you give it.
@font-face { font-family: Diavlo;
src: url(’Diavlo_BOOK_II_37.otf’);
}

67. Name you give it.
@font-face { font-family: Diavlo;
src: url(’Diavlo_BOOK_II_37.otf’);
}
Path to font file.

68. font-family : georgia, times, “times new roman”, serif;

69. Font-family name you give it.
font-family : diavlo, georgia, times, “times new roman”, serif;

70. Download Fonts

71. Download Fonts
Unlimited Fonts

72. File Format

73. File Formats

74. File Formats
True Type (.ttf)
Open Type (.otf)

75. IP

76. IP
Intellectual Property

77. EULA

78. EULA
End-User License Agreement

79. File Formats

80. File Formats
Embedded
Open Type (.eot)

81. .ttf & .otf

82. .ttf & .otf
v3.1

83. .ttf & .otf

84. .ttf & .otf
Coming Soon

85. .ttf & .otf

86. .ttf & .otf
??????????

91. So...

93. Download Fonts
Web Safe Fonts
Core Web Fonts
Generic Font-families

94. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

95. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

96. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

97. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

98. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

99. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.

100. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.

101. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.

102. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.

103. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.

104. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi

105. h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque non
felis vel lorem tempor ultricies. Class aptent taciti
sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; In hac habitasse platea dictumst.
Aenean venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi ultricies
magna, id placerat lorem.

106. design is about
overcoming
limits

107. Fluid
Typography

108. Choosing Your
Fonts

109. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

110. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

111. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

112. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

113. If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”, serif; }
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

114. For headline copy use fonts with similar
widths and kerning.
Web Typography

115. For headline copy use fonts with similar
widths and kerning.
Web Typography

116. For body copy select fonts with bold, italic,
and bold/italic versions.

117. For body copy select fonts with bold, italic,
and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Arial

118. For body copy select fonts with bold, italic,
and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Arial

119. For body copy select fonts with bold, italic,
and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Microsoft Sans Serif

120. Test the different fonts in different
combinations.
Web Typography
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.

121. Test the different fonts in different
combinations.
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque non
felis vel lorem tempor ultricies. Class aptent taciti
sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; In hac habitasse platea dictumst.
Aenean venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi ultricies
magna, id placerat lorem.

122. www.speaking-in-styles.com/web-typography

124. { Many Types, Many Faces}
W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Questions
www.speaking-in-styles.com/web-typography
@jasonspeaking
www.brighteyemedia.com