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 T y 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
jason_speaking
Voices That Matter | 29 April 2009
San Francisco, California
2. { Many Types, Many Faces}
W e b T y 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
jason_speaking
Voices That Matter | 29 April 2009
San Francisco, California
3. { Many Types, Many Faces}
W e b T y 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
jason_speaking
Voices That Matter | 29 April 2009
San Francisco, California
44. Windows XP
+9 Fonts
Franklin Gothic Medium
Lucid Console
Lucida Sans Unicode
Marlett
Microsoft Sans Serif
Palatino Linotype
Symbol
Tahoma
Wingdings
48. Mac OS X
+31 Fonts
American
Courier Monaco
Typewriter
Didot Optima
Apple Chancery
Futura Papyrus
Apple Symbols
Geneva Tahoma
Baskerville
Gill Sans Taipei
Big Caslon
Helvetica Times
Brush Script
Helvetica Neue Zapf Dingbats
Chalkboard
Herculanum Zapfino
Charcoal CY
Hoefler Text
Cochin
Lucida Grande
Cooper
Marker Felt
Copperplate
50. 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
115. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
116. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
117. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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.
118. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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.
119. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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.
120. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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.
121. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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.
122. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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
123. h1 {
font-family : diavlo, georgia, times, “times new roman”,
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.
127. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
128. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
129. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
130. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
131. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }
132. For headline copy use fonts with
similar widths and kerning.
Web Typography
133. For headline copy use fonts with
similar widths and kerning.
Web Typography
134. For body copy select fonts with
bold, italic, and bold/italic versions.
135. 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
136. 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
137. 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
138. 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.
139. 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.
140. { Web Beyond A r i a l and T i m e s and G e o r g i a
jason cranford teague
www.speaking-in-styles.com/web-
typography
Fluid Typography
font-family : diavlo, quot;big caslonquot;, quot;bell mtquot;, georgia,
serif;
Download Fonts Web Safe Fonts Core Web Fonts Generic Font Families
@font { List Available at: andale mono, arial serif, sans-serif,
font-family: diavlo; tinyurl.com/ (helvetica), arial black, monospace, cursive,
src: 5qr64g comic sans ms, courier new fantasy
url(’Diavlo.otf’); } georgia, impact, times new
roman (times), trebuchet
ms, verdana, web dings
Referenced Web Pages Choosing Your fonts
More Information
lescure.com Web Typography: Tell Me What You
Test the different fonts in different combinations.
sci-fi.om Want
For headline copy, use fonts with similar widths and tinyurl.com/4rtccs
aol.com
kerning. Download Fonts Tutorial
yahoo.com tinyurl.com/5rfhsk
msn.com For body copy, select fonts with bold, italic, and bold/
italic versions. Web Safe Fonts Tutorial
de-facto.com tinyurl.com/4ud39p
cameronmoll.com If you download a font or use a Web Safe Font, always
include a Core Web Font and generic font-family as
boutique-dammann.com back-ups.
ilovetypography.com speaking-in-
thefwa.com styles.com
emigre.com
chank.com
josbuivenga.demon.nl
www.princexml.com/howcome/2008/
webfonts/
144. { Many Types, Many Faces}
W e b T y 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
jason_speaking
www.brighteyemedia.com
Editor's Notes
Using Flash
text in images
and HTML Text
Authentic
Good
But we all know that if you want to be the Favorite Web Site Award winner, you have to use flash.
...
Limited styles, limited controls, and most importantly limited font-family choices.
Limits
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
Limits
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
Step Inside Design May/June 2008
When you choose your font, you do not change the meaning of the letter.. a T is still a T, but by changing it's skin, you change what it is saying, adding another level of communication.
with CSS, we can not only declare a single font, but back-up fonts and generic font families.
If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
with CSS, we can not only declare a single font, but back-up fonts and generic font families.
If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
Georgia is a transitional serif typeface designed in 1993[1] by Matthew Carter
and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. The initial version of the font was released on November 1, 1996 as part of the Core fonts for the Web collection. Later, it was bundled with Internet Explorer 4.0 supplemental font pack.
http://en.wikipedia.org/wiki/Georgia_%28typeface%29
Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).
http://en.wikipedia.org/wiki/Verdana
Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).
http://en.wikipedia.org/wiki/Verdana
webdings
Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet.
The project was terminated in August 2002,
The project was terminated in August 2002, allegedly due to frequent EULA violations.[1] However, that same EULA allows redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products.
We use these because they are almost certain to be installed on all computers in use today.
BUT there are other fonts that we can rely on to be installed depending on the operating system.
Segoe UI, replaces Tahoma for help text.
Similar to Frutigar
Segoe UI, replaces Tahoma for help text.
Similar to Frutigar
62 overlap
62 overlap
62 overlap
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?
Does not include Web Dings and and MS Reference
So... How do you know what fonts you can use?