Fluid Web Typography - SXSWi 2010
Upcoming SlideShare
Loading in...5
×
 

Fluid Web Typography - SXSWi 2010

on

  • 13,863 views

Presented at SXSWi 2010 ...

Presented at SXSWi 2010

For almost 15 years, Web designers have had a list of 10 "Core Web fonts" to choose from. Many ask, "Why can't I just download a font file from my Web server the same way I can an image?" Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

Statistics

Views

Total Views
13,863
Slideshare-icon Views on SlideShare
12,636
Embed Views
1,227

Actions

Likes
51
Downloads
617
Comments
1

25 Embeds 1,227

http://www.workatplay.com 557
http://www.jasonspeaking.com 195
http://www.disruptiveconversations.com 120
http://fluidwebtype.info 107
http://dev.wap2011.workatplay.com 40
http://www.slideshare.net 33
http://cgt256.wordpress.com 31
http://workatplay.com 26
http://yulanstudio.com 26
http://waps2011.ronnmac 25
http://www.yulanstudio.com 21
http://www.mahigrafix.com 18
http://www.beckycortino.com 5
http://jasonspeaking.com 4
http://elearning-20.blogspot.com 4
http://lanyrd.com 4
http://blog.2edu.pl 3
http://www.soluservi.freeiz.com 1
http://www.gotoinstantwebinar.com 1
http://www.donatgroup.com 1
http://translate.googleusercontent.com 1
http://heidiallen.id.au 1
http://www.techgig.com 1
http://bbdev-1.scad.edu 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • webfonts, fluid web typography
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • What do these three things have in common? <br />
  • What do these three things have in common? <br />
  • 15 Years ago: <br /> &#x2022; Flying cars <br /> &#x2022; Going to Jupiter <br /> &#x2022; Decent Web Typography <br />
  • 15 Years ago: <br /> &#x2022; Flying cars <br /> &#x2022; Going to Jupiter <br /> &#x2022; Decent Web Typography <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x2022; Flying cars to easy to crash into buildings <br /> &#x2022; Space program not even ready to go to the Moon <br /> &#x2022; But things changed drastically last year for Web Typography&#x2026; <br />
  • &#x2022; Flying cars to easy to crash into buildings <br /> &#x2022; Space program not even ready to go to the Moon <br /> &#x2022; But things changed drastically last year for Web Typography&#x2026; <br />
  • All major browsers now support some form of downloadable fonts <br />
  • All major browsers now support some form of downloadable fonts <br />
  • All major browsers now support some form of downloadable fonts <br />
  • All major browsers now support some form of downloadable fonts <br />
  • All major browsers now support some form of downloadable fonts <br />
  • Which is why 2010 will be remembered as the <br /> "Year of Web Typography" <br />
  • Yes, "Cranford Teague" is my last name. <br />
  • Yes, "Cranford Teague" is my last name. <br />
  • Currently the design manager for Marriott.com <br /> &#x2022; Top 10 eCommerce Web site <br /> &#x2022; Recently relaunched with new design <br /> &#x2022; Enacting progressive Web typography <br />
  • Currently the design manager for Marriott.com <br /> &#x2022; Top 10 eCommerce Web site <br /> &#x2022; Recently relaunched with new design <br /> &#x2022; Enacting progressive Web typography <br />
  • Currently the design manager for Marriott.com <br /> &#x2022; Top 10 eCommerce Web site <br /> &#x2022; Recently relaunched with new design <br /> &#x2022; Enacting progressive Web typography <br />
  • Written over a dozen books on digital design <br /> &#x2022; Speaking in Styles <br /> &#x2022; Fluid Web Typography <br /> &#x2022; Writing CSS Visual Quickstart Guide <br />
  • Written over a dozen books on digital design <br /> &#x2022; Speaking in Styles <br /> &#x2022; Fluid Web Typography <br /> &#x2022; Writing CSS Visual Quickstart Guide <br />
  • Written over a dozen books on digital design <br /> &#x2022; Speaking in Styles <br /> &#x2022; Fluid Web Typography <br /> &#x2022; Writing CSS Visual Quickstart Guide <br />
  • Living outside of DC with 2 kids, 2 cats, but just the one wife. We have Big Love, but not that kind of big love. <br />
  • Living outside of DC with 2 kids, 2 cats, but just the one wife. We have Big Love, but not that kind of big love. <br />
  • Living outside of DC with 2 kids, 2 cats, but just the one wife. We have Big Love, but not that kind of big love. <br />
  • Learn more about me from my Web site or by following me on Twitter <br />
  • Learn more about me from my Web site or by following me on Twitter <br />
  • There are three things you will come away from this session with today <br />
  • There are three things you will come away from this session with today <br />
  • The ability to USE webfonts to Create a "bulletproof" Font Stack using <br /> &#x2022; Generic and Core Web fonts <br /> &#x2022; Web Safe Fonts <br /> &#x2022; Download Webfont for all current browsers <br />
  • The ability to USE webfonts to Create a "bulletproof" Font Stack using <br /> &#x2022; Generic and Core Web fonts <br /> &#x2022; Web Safe Fonts <br /> &#x2022; Download Webfont for all current browsers <br />
  • The ability to USE webfonts to Create a "bulletproof" Font Stack using <br /> &#x2022; Generic and Core Web fonts <br /> &#x2022; Web Safe Fonts <br /> &#x2022; Download Webfont for all current browsers <br />
  • The ability to FIND Webfonts from different sources including: <br /> &#x2022; Font foundries <br /> &#x2022; Free Webfonts <br /> &#x2022; Webfont service bureaus <br />
  • The ability to FIND Webfonts from different sources including: <br /> &#x2022; Font foundries <br /> &#x2022; Free Webfonts <br /> &#x2022; Webfont service bureaus <br />
  • The ability to FIND Webfonts from different sources including: <br /> &#x2022; Font foundries <br /> &#x2022; Free Webfonts <br /> &#x2022; Webfont service bureaus <br />
  • The ability to CHOOSE the best Webfonts that <br /> establish your typographic voice <br />
  • The ability to CHOOSE the best Webfonts that <br /> establish your typographic voice <br />
  • The ability to CHOOSE the best Webfonts that <br /> establish your typographic voice <br />
  • First we need to answer a couple of questions <br />
  • First we need to answer a couple of questions <br />
  • To send question during this session, please Tweet to <br />
  • To send question during this session, please Tweet to <br />
  • Typography is as old as writing and has always affected written communication <br />
  • Typography is as old as writing and has always affected written communication <br />
  • Typography is to type as voice is to speech <br /> &#x2022; Adds meaning beyond the words themselves <br /> &#x2022; Voice can even change meaning <br /> &#x2022; The fonts are a key part of typography <br />
  • Typography is to type as voice is to speech <br /> &#x2022; Adds meaning beyond the words themselves <br /> &#x2022; Voice can even change meaning <br /> &#x2022; The fonts are a key part of typography <br />
  • Typography is to type as voice is to speech <br /> &#x2022; Adds meaning beyond the words themselves <br /> &#x2022; Voice can even change meaning <br /> &#x2022; The fonts are a key part of typography <br />
  • Typography is to type as voice is to speech <br /> &#x2022; Adds meaning beyond the words themselves <br /> &#x2022; Voice can even change meaning <br /> &#x2022; The fonts are a key part of typography <br />
  • Say happily <br /> Say angrily <br />
  • Say happily <br /> Say angrily <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Fonts can add their own tone of voice: <br /> &#x2022; Friendly <br /> &#x2022; Robotic <br /> &#x2022; Crazy <br /> &#x2022; Talk like Pirate <br /> <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Brands spend millions creating visual Identities <br /> <br /> Typography is a quick inexpensive way to stand out in a crowd. <br />
  • Fonts can help brand everything from burgers <br />
  • to politicians <br /> <br />
  • Any type used in a Web design <br /> <br /> Webfonts applied specifically to fonts being downloaded using @font-face <br />
  • Any type used in a Web design <br /> <br /> Webfonts applied specifically to fonts being downloaded using @font-face <br />
  • Any type used in a Web design <br /> <br /> Webfonts applied specifically to fonts being downloaded using @font-face <br />
  • To understand what Web typography is&#x2026; <br /> &#x2026;Let&apos;s start with what it is not. <br />
  • To understand what Web typography is&#x2026; <br /> &#x2026;Let&apos;s start with what it is not. <br />
  • NOT text in images <br />
  • NOT text in images <br />
  • NOT text in images <br />
  • NOT Flash <br />
  • NOT Flash <br />
  • NOT Flash <br />
  • Web typography is created with System text in HTML, <br /> styled using Cascading Style sheets. <br />
  • Web typography is created with System text in HTML, <br /> styled using Cascading Style sheets. <br />
  • Limited styles, limited controls, and most importantly limited font-family choices. <br /> <br /> <br />
  • Limits <br /> That&apos;s what design is about <br /> Design is about overcoming the limits of the medium. <br /> 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. <br />
  • Limits <br /> That&apos;s what design is about <br /> Design is about overcoming the limits of the medium. <br /> 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. <br />
  • Step Inside Design May/June 2008 <br /> <br /> When you choose your font, you do not change the meaning of the letter.. a A is still a A, but by changing it&apos;s skin, you change what it is saying, adding another level of communication. <br />
  • The letter "A" is always two diagonal lines with a crossing horizontal line <br /> but there are many ways to do this. <br />
  • The letter "A" is always two diagonal lines with a crossing horizontal line <br /> but there are many ways to do this. <br />
  • The letter "A" is always two diagonal lines with a crossing horizontal line <br /> but there are many ways to do this. <br />
  • The letter "A" is always two diagonal lines with a crossing horizontal line <br /> but there are many ways to do this. <br />
  • The letter "A" is always two diagonal lines with a crossing horizontal line <br /> but there are many ways to do this. <br />
  • Twilight Zone - Eye of the Beholder <br /> Everybody is surgically altered to look the same. <br />
  • Twilight Zone - Eye of the Beholder <br /> Everybody is surgically altered to look the same. <br />
  • This may be the most common line of CSS code on the Web <br />
  • This may be the most common line of CSS code on the Web <br />
  • But when it&#x2019;s all you have <br />
  • But when it&#x2019;s all you have <br />
  • Everybody <br />
  • Everybody <br />
  • Looks the same <br />
  • Looks the same <br />
  • So most designers just think that Web typography is UGLY!!! <br />
  • So most designers just think that Web typography is UGLY!!! <br />
  • POL Uses <br /> &#x2022; Facebuster 400 <br /> &#x2022; Helvetica Neue Thin Condensed <br /> &#x2022; Baskerville <br />
  • POL Uses <br /> &#x2022; Facebuster 400 <br /> &#x2022; Helvetica Neue Thin Condensed <br /> &#x2022; Baskerville <br />
  • Acid Smile by Maria T. <br /> &#x2022; Daniel <br />
  • Acid Smile by Maria T. <br /> &#x2022; Daniel <br />
  • Taptaptap (Webfont): <br /> &#x2022; Fertigo Pro <br />
  • Taptaptap (Webfont): <br /> &#x2022; Fertigo Pro <br />
  • Work [at] Play <br /> &#x2022; Netto <br />
  • Work [at] Play <br /> &#x2022; Netto <br />
  • SXSW Beercamp (Typekit) <br /> &#x2022; ff-enzo-web <br /> <br />
  • SXSW Beercamp (Typekit) <br /> &#x2022; ff-enzo-web <br /> <br />
  • SXSW Beercamp (Typekit) <br /> &#x2022; ff-enzo-web <br /> <br />
  • Any type used in a Web design <br /> <br /> Webfonts applied specifically to fonts being downloaded using @font-face <br />
  • Any type used in a Web design <br /> <br /> Webfonts applied specifically to fonts being downloaded using @font-face <br />
  • Any type used in a Web design <br /> <br /> Webfonts applied specifically to fonts being downloaded using @font-face <br />
  • <br />
  • <br />
  • Estimated that there are over 100,000 fonts available <br />
  • Estimated that there are over 100,000 fonts available <br />
  • but only 5 are commonly used on the Web, pulled from the 10 core Web fonts <br />
  • but only 5 are commonly used on the Web, pulled from the 10 core Web fonts <br />
  • 4 ways to define fonts. <br />
  • 4 ways to define fonts. <br />
  • 4 ways to define fonts. <br />
  • 4 ways to define fonts. <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • add font name to the font-family list, including understudies for <br /> webfont, web safe font, core web font, and generic (in that order) <br />
  • The last resort, based on whatever the browser has defined <br />
  • The last resort, based on whatever the browser has defined <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • What is "fantasy"? No one knows for sure <br />
  • Add your generic font family <br />
  • Add your generic font family <br />
  • We use these because they are almost certain to be installed on all computers in use today. <br /> <br /> BUT there are other fonts that we can rely on to be installed depending on the operating system. <br />
  • We use these because they are almost certain to be installed on all computers in use today. <br /> <br /> BUT there are other fonts that we can rely on to be installed depending on the operating system. <br />
  • The project was terminated in August 2002, <br />
  • The project was terminated in August 2002, <br />
  • The project was terminated in August 2002, <br />
  • The project was terminated allegedly due to frequent EULA violations.[1] However, that same EULA allows <br /> redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products. <br />
  • The project was terminated allegedly due to frequent EULA violations.[1] However, that same EULA allows <br /> redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products. <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Although there were 10 fonts in the original list <br /> Andale Mono no longer installed with Windows, <br /> Webdings does not work in many browsers <br /> Impact and Arial black - primarily display fonts for headlines <br /> Courier New - Monospace <br /> Comic Sans- &apos;Nuff said <br /> <br />
  • Leaves us with 5 fonts commonly used in almost all Web sites. <br />
  • Add the core web font next <br /> <br /> Only used because the perception is that is all that is commonly available <br /> but many fonts are pre-installed from variety of sources <br />
  • Add the core web font next <br /> <br /> Only used because the perception is that is all that is commonly available <br /> but many fonts are pre-installed from variety of sources <br />
  • Between Windows OS, Mac OS, MS Office (Mac & Windows) and Apple iLife <br />
  • Between Windows OS, Mac OS, MS Office (Mac & Windows) and Apple iLife <br />
  • <br />
  • <br />
  • From Windows OS & MS Office 2005 <br />
  • From Windows OS & MS Office 2005 <br />
  • From Mac OS, MS Office 2008, and iLife <br />
  • From Mac OS, MS Office 2008, and iLife <br />
  • Overlap of almost 60 fonts that have a strong chance of being on both Mac and Windows <br />
  • Overlap of almost 60 fonts that have a strong chance of being on both Mac and Windows <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Websafe fonts BETA 3 <br /> Font Name <br /> Weights & Styles <br /> OS - Windows, Mac, or cross (Web safe) <br /> Likelihood of availability <br /> Sample Graphic <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Fonts Matrix - Richard Rutter <br /> Font Name <br /> OS <br /> Installing Application, Installed <br /> Adobe CS <br />
  • Add one or more Websafe fonts <br />
  • Add one or more Websafe fonts <br />
  • In theory, you can download any font as a Webfont <br />
  • In theory, you can download any font as a Webfont <br />
  • and some great fonts, like diavlo, are even free! <br />
  • and some great fonts, like diavlo, are even free! <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br />
  • add font name to the font-family list. <br />
  • add font name to the font-family list. <br />
  • add font name to the font-family list. <br />
  • add font name to the font-family list. <br />
  • Embedded Open Type over 11 years old, supported in Internet Explorer since version 4 <br /> Provides some copy protection <br /> difficult to convert from standard font formats <br /> <br />
  • Embedded Open Type over 11 years old, supported in Internet Explorer since version 4 <br /> Provides some copy protection <br /> difficult to convert from standard font formats <br /> <br />
  • Embedded OpenType (EOT) format with two features removed: <br /> MTX font compression <br /> URL Binding (root strings) <br /> <br />
  • TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. <br /> OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. <br /> BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn&apos;t purchase them. <br />
  • TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. <br /> OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. <br /> BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn&apos;t purchase them. <br />
  • TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. <br /> OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. <br /> BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn&apos;t purchase them. <br />
  • TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. <br /> OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. <br /> BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn&apos;t purchase them. <br />
  • TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. <br /> OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. <br /> BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn&apos;t purchase them. <br />
  • Scalable Vector Graphics is a vector drawing system designed for the Web. <br /> --> <br />
  • Web Open Font Format recently developed as an answer to foundries concerns about font protection <br /> --> <br />
  • <br />
  • <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • The syntax for downloading fonts for use by CSS has been around for years. <br /> <br /> I can place this file on my server, and use @font-face in my CSS to download it <br /> <br /> "Bulletproof" by Paul Irish <br /> <br /> Modified Bulletproof <br /> Avoids local() problem <br /> <br />
  • Fontsquirrel Font face generator can take True Type and Open type <br /> Converts to EOT Lite, SVG, and WOFF <br /> Also allows screen optimization and Subsetting <br />
  • All foundries have different EULAs protecting their <br />
  • All foundries have different EULAs protecting their <br />
  • Intellectual property from misappropriation. <br />
  • Intellectual property from misappropriation. <br />
  • some great fonts, like diavlo, are even free! <br />
  • some great fonts, like diavlo, are even free! <br />
  • Emigre plans to change their EULA, but hasn&apos;t yet. <br />
  • Emigre plans to change their EULA, but hasn&apos;t yet. <br />
  • Font-shop just announced support for EOT Lite and WOFF as part of their WebFontFonts <br />
  • Font-shop just announced support for EOT Lite and WOFF as part of their WebFontFonts <br />
  • Linotype - Supports EOT in EULA <br />
  • Linotype - Supports EOT in EULA <br />
  • but some foundries like Chank, are using new Webfont service bureaus <br /> To take care of licensing <br />
  • but some foundries like Chank, are using new Webfont service bureaus <br /> To take care of licensing <br />
  • Better technologies being developed <br /> sIFR - Flash <br /> Cuf&#xF3;n - JavaScript - can slow down overall JavaScript performance <br /> FontSquirrel now includes Cuf&#xF3;n support <br />
  • Better technologies being developed <br /> sIFR - Flash <br /> Cuf&#xF3;n - JavaScript - can slow down overall JavaScript performance <br /> FontSquirrel now includes Cuf&#xF3;n support <br />
  • So how do you know where to find legally usable fonts? <br /> The landscape is constantly changing, but I want to share with you what you should be looking for <br /> in three places many of us will find webfonts: <br /> &#x2022; Font foundries <br /> &#x2022; Free fonts sources <br /> &#x2022; New Webfont service Bureaus <br />
  • So how do you know where to find legally usable fonts? <br /> The landscape is constantly changing, but I want to share with you what you should be looking for <br /> in three places many of us will find webfonts: <br /> &#x2022; Font foundries <br /> &#x2022; Free fonts sources <br /> &#x2022; New Webfont service Bureaus <br />
  • Generally the highest quality fonts, but the slowest to change their EULAs <br />
  • Generally the highest quality fonts, but the slowest to change their EULAs <br />
  • Here&apos;s what to look for when considering fonts from Font Foundries <br />
  • Here&apos;s what to look for when considering fonts from Font Foundries <br />
  • Here&apos;s what to look for when considering fonts from Font Foundries <br />
  • Here&apos;s what to look for when considering fonts from Font Foundries <br />
  • Here&apos;s what to look for when considering fonts from Font Foundries <br />
  • The unknown quantity? <br />
  • FontSquirrel is the clear winner for Free Webfont sites <br />
  • FontSquirrel is the clear winner for Free Webfont sites <br />
  • Font-shop Introduced Web FontFonts <br />
  • Font-shop Introduced Web FontFonts <br />
  • Linotype - Supports EOT in EULA <br />
  • Linotype - Supports EOT in EULA <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • A new concept, allowing designers to license and deploy fonts with minimal fuss <br />
  • A new concept, allowing designers to license and deploy fonts with minimal fuss <br />
  • What to look for in Webfont Service Bureaus <br />
  • What to look for in Webfont Service Bureaus <br />
  • What to look for in Webfont Service Bureaus <br />
  • What to look for in Webfont Service Bureaus <br />
  • What to look for in Webfont Service Bureaus <br />
  • The unknown quantity - Speed. Relying on 3rd part servers. <br />
  • Some of the inherent limitations of Webfont Service Bureaus include&#x2026; <br />
  • Some of the inherent limitations of Webfont Service Bureaus include&#x2026; <br />
  • Some of the inherent limitations of Webfont Service Bureaus include&#x2026; <br />
  • Some of the inherent limitations of Webfont Service Bureaus include&#x2026; <br />
  • Some of the inherent limitations of Webfont Service Bureaus include&#x2026; <br />
  • Easy to use control panel for designers <br /> ... <br /> Makes a speed guarantee <br />
  • Easy to use control panel for designers <br /> ... <br /> Makes a speed guarantee <br />
  • Loads JavaScript to link font files from typekit server in two steps. <br /> <br /> &#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D; <br /> http://typekit.com/tour/scalability <br />
  • Loads JavaScript to link font files from typekit server in two steps. <br /> <br /> &#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D; <br /> http://typekit.com/tour/scalability <br />
  • Loads JavaScript to link font files from typekit server in two steps. <br /> <br /> &#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D; <br /> http://typekit.com/tour/scalability <br />
  • Loads JavaScript to link font files from typekit server in two steps. <br /> <br /> &#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D; <br /> http://typekit.com/tour/scalability <br />
  • Loads JavaScript to link font files from typekit server in two steps. <br /> <br /> &#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D; <br /> http://typekit.com/tour/scalability <br />
  • Kernest a lot of inexpensive and free fonts <br /> ... <br /> Interface a little tricky <br />
  • Kernest a lot of inexpensive and free fonts <br /> ... <br /> Interface a little tricky <br />
  • Links to URL to load font files from Kernest server <br />
  • A font foundry that will be deploying it&apos;s own fonts <br /> <br /> Good deal, but limited choices. <br />
  • A font foundry that will be deploying it&apos;s own fonts <br /> <br /> Good deal, but limited choices. <br />
  • Links to URL to load font files from Typotheque server <br />
  • Soon to be released <br /> ... <br /> Good price and great interface. <br />
  • Soon to be released <br /> ... <br /> Good price and great interface. <br />
  • Soon to be released <br /> ... <br /> Good price and great interface. <br />
  • Links to URL to load font files from Fontdeck server <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Once you know how to use and find webfonts, choosing the right ones should be a snap, right? <br /> Here are a few best practices I&apos;ve developed for choosing the best fonts for your designs <br />
  • Once you know how to use and find webfonts, choosing the right ones should be a snap, right? <br /> Here are a few best practices I&apos;ve developed for choosing the best fonts for your designs <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Remember, Typography is to type as voice is to speech. <br /> think carefully about how you want your message perceived and choose typefaces accordingly <br />
  • Include alternatives in descending order of availability <br />
  • Include alternatives in descending order of availability <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Start with webfonts and work your way down. <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Especially display copy (Headlines) <br />
  • Once you have your fonts, make sure they work together <br />
  • Once you have your fonts, make sure they work together <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Here diavlo and tahoma have similar line lengths <br /> cambria and georgia have similar line heights <br /> As a result, they make consistent matches. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> A font without bold and italic will either appear normal or, worse, <br /> the styles will be synthesized by the browser. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Especially body copy <br /> More space, wider counters and widths, and taller x-height generally make copy easier to read <br /> however, look for a good balance to make sure the font is also engaging to read <br />
  • Which is why 2010 will be remembered as the <br /> "Year of Web Typography" <br />
  • Support Web site: <br /> &#x2022; Links from lecture <br /> &#x2022; Hand out notes <br /> &#x2022; Handout of Websafe fonts <br /> Questions? <br />
  • Support Web site: <br /> &#x2022; Links from lecture <br /> &#x2022; Hand out notes <br /> &#x2022; Handout of Websafe fonts <br /> Questions? <br />
  • Support Web site: <br /> &#x2022; Links from lecture <br /> &#x2022; Hand out notes <br /> &#x2022; Handout of Websafe fonts <br /> Questions? <br />
  • Support Web site: <br /> &#x2022; Links from lecture <br /> &#x2022; Hand out notes <br /> &#x2022; Handout of Websafe fonts <br /> Questions? <br />
  • Support Web site: <br /> &#x2022; Links from lecture <br /> &#x2022; Hand out notes <br /> &#x2022; Handout of Websafe fonts <br /> Questions? <br />
  • Support Web site: <br /> &#x2022; Links from lecture <br /> &#x2022; Hand out notes <br /> &#x2022; Handout of Websafe fonts <br /> Questions? <br />
  • Twitter Contest <br /> To enter to win a free copy of my book, visit fluidwebtype.com <br />

Fluid Web Typography - SXSWi 2010 Fluid Web Typography - SXSWi 2010 Presentation Transcript

  • fluidwebtypography Jason Cranford Teague SXSW 2010 Austin, TX | 13 March 2010
  • What do these 3 Things have in common?
  • Flying Cars
  • Trips to Jupiter
  • Downloadable Webfonts
  • 2010 3 things I was supposed to have.
  • 2008
  • 2009
  • 2010 The Year of Web Typography
  • 3 Things to Know About Jason Cranford Teague
  • Designer Marriott
  • Author 12+ Books
  • DC Metro Cranford Teague
  • jasonspeaking.com @jasonspeaking
  • 3 Things to Learn About Web Typography
  • USE webfonts
  • FIND webfonts
  • webtype CHOOSE webfonts GET THE BOOK RECENTLY ON FWT… Fluid Web Typography by WELCOME TO FLUID WEB TYPE! JASON CRANFORD TEAGUE is the only comprehensive guide to Welcome to Fluid Web Type, a new web site devoted to chronicling the SUBSCRIBE TO FWT modern Web Typography rapidly changing world of Web Typography. Welcome Gifts To celebrate Your email: available. Learn how to find the site launch, I'm pleased to announce: Through February 1st, you can more typefaces, improve Enter email address... legibility, and increase the visual win a copy of Fluid Web Typography through Webdesigner Depot. All you appeal of your Web designs all have to do is add a... in one compact volume Subscribe available from New Riders. Read More Unsubscribe USING SIFR ON FWT Main One of the reasons that designers often site for wanting to use Flash is that, Contact
  • Why does typography matter? What is Web typography?
  • @fluidwebtype fluidwebtype.info/sxsw
  • WHY Typography Matters
  • typography::type voice::speech
  • If I say… “I’m going to kill you”
  • “I’m going to kill you” Cooper Black “I’m going to kill you” Synchro LET “I’m going to kill you” Sybil Green “I’m going to kill you” UglyQua
  • and A Brand BBrand d C Brand D Brand E and F Brand X Brand G Brand H Brand I rand J Brand K Bran
  • Font or Typeface
  • WHAT Web Typography is
  • NT TEXT IN IMAGE
  • NT TEXT IN FLASH
  • Web Typography = HTML + CSS
  • Web Typography = Limited Font Choices
  • design is about overcoming Limitations
  • “Type design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.” Alejandro Lo Celso Saravia pampatype.com
  • A A A A A
  • What if everybody looked the same… …and everybody was UGLY?
  • font-­‐family:  helvetica,  arial,  sans-­‐serif;
  • yahoo.com
  • aol.com
  • msn.com
  • Web Typography = UGLY!!!!!
  • audio video columns newsletter about subscribe search Why I Write By DORIANNE LAUX on 2.08.10 I have recently begun to think of writing as what Susan Sontag calls “a wisdom project” in her forward to Another Beauty, a collection of autobiographical essays by the great Polish poet Adam Zagajewski. Dorianne Laux is the author of four books of poetry and co-author of The Poet’s Companion: A Guide to the “…autobiography is an occasion to purge oneself of vanity, Pleasures of Writing Poetry. She has while advancing the project of self understanding—call it the been the recipient of the Oregon Book wisdom project—which is never completed, however long the Award and was short-listed for the life.” Lenore Marshall Poetry Prize. She lives in Raleigh, North Carolina where she teaches poetry at North I am still hard at work on this project of the self. The solitary self, as well Carolina State University. For more, go to DorianneLaux.com. as the self in relation to the world and the unknown universe we swirl around in, uncertain of our purpose or future. When I wrote the poems that would become my first book, I didn’t think of it as a book, but rather poemsoutloud.net as a need to understand the basic questions that all human beings ask: Who am I? Why am I here? Where am I going? What is beauty? Why is there suffering? Where is truth? These questions would arise in me in the Facts About the Moon Buy from POWELLS form of poems, and in making the poems into a collection, I tried to Buy from INDIEBOUND arrange them in a shape, find a path for them to travel to make clearer those questions. I write to know the questions. In her powerful fourth collection, Dorianne Laux once again strikes fire Poem after poem, book after book, the ante is upped. I think this could be from neighborhood moments: a quiet
  • autumn summer @sophiaw happy monday / month to you too! Mon, Mar 01, 2010 - 14:00:22, from TweetDeck When life serves you lemons make lemonade goes the saying and these days tsimitakis Watch this video: http://slide.com/t/5/5/iRdYgA7YzOlG life does taste like home made lemonade. Some times overly sour, sometimes ΣκληρόβίντεογιατηΓάζα overly sweet. On occasion sour but with the grains of sugar crunchy between f r o m w e b , M o n , M a r 01, 2010 - 15: 03: 25 acidsmile.co.uk your teeth. Some things are going extremely well, others very badly and in some cases I have no clue what is going on. Days merge into nights, weeks tgeorgakopoulos http://twitpic.com/16178x - ΤζάστινΠλιάτσικας change and suddenly it’s the end of February and I’m wondering where two (@The_Stranger_gr μεπρόλαβες) #pliatsikas months of my life have gone and what have I done with them. Existential f r o m T w i t P i c , Mon, Mar 01, 2010 - 15:02:46 c, questions aside, everything since the 6th of Jan when I went back to work seems like a blur. Very stressful, too much work, too many variables. djzinc that chat roulette thing is raw Normally I thrive…... f r o m w e b , M o n , M a r 01, 2010 - 15: 02: 25 2010 - #p52 - loose thoughts - ramblings 24/Feb/2010
  • Voices $199 Voice morphing for your iPhone! per piece Convert 99¢ per piece The unit converter & calculator plasma taptaptap.com Parablox 99¢ per piece Feed your brain and test your reflexes! Classics Free
  • Workflow and collaboration. Content management solutions that don't feel templated. CONTENT MANAGEMENT SYSTEMS DRUPAL CMS ALFRESCO WCM workatplay.com TOOLBOX The right tools for the job
  • B E E R C AM P BEE B MPP SXSW 2010 EDITION FOLLOW @NCLUD Emo’st. FOLLOW @NCLUD MONDAY FOR UPDATES FOR UPDATES 3 Red Riv 60 er S March 15 Austin, TX T W E N T Y T E N BEERCAMP FOLLOW @NCLUD Festivities begins at 7:30 PM FOR UPDATES Emo’s sxsw.beercamp.com An open invitation Everyone & anyone is welcome. TO PARTY Open bar ’til the flotilla of kegs are kicked. Music provided by DJ Richard Gear.
  • Web Fonts or Webfonts?
  • USING Webfonts
  • How many fonts are there? >100 Thousand
  • How many fonts are used on the Web? <5 Fonts
  • Generic Font Families Core Web Fonts Web Safe Fonts Webfonts
  • webfont primary understudy understudy web-safe core web generic understudy font-­‐family:  diavlo,  garamond,  georgia,  serif;
  • Generic Font Family 5 Families
  • Arial Sans-serif Times Serif Courier Monospace Zapfino Cursive Curlz MT Fantasy
  • font-­‐family:  sans-­‐serif;
  • Core Web Fonts 10 Fonts
  • Microsoft Core Fonts For the Web
  • EULA End User License Agreement
  • Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 
  • Arial Georgia Times New Roman Trebuchet MS Verdana
  • font-­‐family:  arial,  sans-­‐serif;
  • Web Safe Fonts ~190 Fonts
  • Preinstalled OS or Common Software
  • Windows ~130 Fonts
  • Mac ~125 Fonts
  • Mac & Windows 59 Fonts
  • Websafe Fontsß 3 I Font Name Weight and Style OS Rank Sample 1 Academy Engraved LET 3-Likely 2 Agency FB bold 4-Less Likely 3 Algerian 4-Less Likely 4 American Typewriter bold 2-Almost Certain 5 Andale Mono 1-Certain 6 Apple Chancery fluidwebtype.info/ 2-Almost Certain 7 Apple Symbols web-safe-fonts 2-Almost Certain 8 Arial bold, italic, bold/italic 1-Certain
  • !"#$%&'()')(*#+',-*./0.'1%#2'!"3'"*.'4%*.(1+'(50$"#%*6 +7+#08+9'!%3$(+()#':))%30'"*.';.(,0'<$0"#%=0'>-%#0 Office Mac OS Windows OS Office Windows Mac Adobe Creative Suite OS X OS X Windows Windows Office Office Office Acrobat Illustrator InDesign CS2 CS3 CS3 Tiger Leopard XP SP2 Vista 2003 2007 2004 7 CS2 CS2 extras install disk Adobe Caslon Pro x x x Adobe Garamond Pro x x x Adobe Jenson Pro x Agency FB x x Agency FB Bold x x American Typewriter x x Andale Mono x x x x x x Apple Chancery x x Arial x x x x x x Arial Black x x x x x x Arial Narrow x x x x x Arial Rounded MT Bold x x x x x x x x Arno Pro media.24ways.org/ Baskerville x x x 2007/17/fontmatrix.html Baskerville Old Face Bauhaus 93 x x x x x x Bell Gothic Std x Bell MT x x x
  • font-­‐family:  tahoma,  arial,  sans-­‐serif;
  • Webfonts Any font?
  • exljbris.com
  • name you give it path to font file @font-­‐face  { font-­‐family:  'body  copy'; src:  url('fonts/Diavlo_BOOK_II_37.otf'); font-­‐style:  normal; font-­‐weight:  normal; font properties font-­‐stretch:  normal; font-­‐variant:  normal; }
  • name you gave it font-­‐family:   'body  copy',  tahoma,  arial,  sans-­‐serif;
  • File Formats Embedded Open Type(.eot)
  • File Formats EOT Lite (.eot)
  • File Formats True Type (.ttf) Open Type (.otf)
  • File Formats Scalable Vector Graphics (.SVG)
  • File Formats Web Open Font Format (.woff)
  • EOT Lite or WOFF ???
  • EOT for IE @font-­‐face  { font-­‐family:  'body  copy'; src:  url('fonts/Diavlo_BOOK.eot'); src:  local('diavlo  regular'), Local Name          local('diavlo-­‐regular'), WOFF          url('fonts/Diavlo_BOOK.woff')                    format('woff'); SVG          url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')                    format('svg'); OTF/TTF          url('fonts/Diavlo_BOOK.otf')                    format('opentype'); }
  • EULA End User License Agreement
  • IP Intellectual Property
  • exljbris.com
  • emigre.com
  • Celebrating 20 years! English Log In Fonts Blog Help HISTORY FAVORITES (0) CART (0) Browse Fonts Search for fonts... Category Foundry Designer Get Started Browse & buy fonts ▶ Random Browse by Category, Gallery Foundry, or Designer. Or Top Fonts let our research team do the work for you. New Fonts Bestsellers Discover new type ▶ Staff Picks Our blog is updated frequently with fresh fonts Your Fonts and recommendations, the History Newsletter brings the latest to your email inbox, Favorites or discover type in print with FontBook. Get smart ▶ Expert advice on formats, installation, or licensing is just a click or Call away. We welcome four new foundries to FontShop.com: Hubert Jocham, Castle fontfont.com Type, HvD Fonts, and ReType. See them all. Voice Embryo Goudy Trajan A font to benefit victims of the The FontFeed is a daily dispatch of recommended
  • My account / Login My shopping cart presented in: Linotype Authentic™ Sans Bold My favorites Font Finder Font Products Font Services Font Lounge News Support Company Search for Fonts We serve all your Font and Type needs at Linotype.com Advanced search ... Linotype Top Sellers Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. We offer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType and 1. Neue Helvetica® Text Fonts PostScript. – Try them out! 2. Helvetica® for books and magazines Font Finder (Shop) Foundries and Libraries Font of the Week 3. Avenir® Script Fonts 4. Optima® calligraphy, 5. Rotis® Sans Serif handwriting fonts Complete Font Charts … Handwriting/Grunge fonts with a personal touch BA Graphics Looking for a special font? A literal labor of love, created by Type News Corporate Fonts Explore the various ways to find Browse through our comprehensive Daniel Pelavin – Save 20%! fonts for New Font Releases the font that fit your needs. product catalog. more ... corporate design more ... more ... Font News Celebration Fonts Platinum Collections events from birthday Fonts in Focus to Halloween News Award Font Services Blackletter Fonts gothic, celtic fonts Subscribe to our newsletter or view Comic Fonts the current issue. kids and fun fonts Western Fonts Make the most out inspired by of your website – the Wild West linotype.com become an Affiliate! Cool Fonts modern, technical look Linotype offers all Screen Fonts The new FontExplorer X product Malabar received the 2010 German Take a look at our comprehensive kinds of web optimized for small line – high-level professional font Design Prize. Award ceremony on services, tailored to your needs. shopping and sizes management for you. 12th February 2010. more ... licensing Symbol Fonts more ... more ... advantages. pi fonts for any occasion Site Map Contact Imprint/Legal Terms of Use Monotype Imaging
  • chank.com
  • What about sIFR & Cufón ?
  • FINDING Webfonts
  • Licensed Fonts You Control
  • What to look for… Webfont linking in EULA Subsetting Formats Cost
  • What to look for… Optimized???
  • Find Fonts ONLY THE BEST Twitter | RSS Feed FILTER COMMERCIAL- All Formats @font-face USE FREE FONTS STYLE Blackletter 17 Calligraphic 17 Comic 26 Dingbat 27 Free fonts have met their match. We know how hard it is to find Display 91 Grunge 39 quality freeware that is licensed for commercial work. We've done Handdrawn 42 Initials 3 the hard work, hand-selecting these typefaces and presenting them Monospaced 24 Novelty 26 in an easy-to-use format. Here are some of our favorites: Pixel 4 Retro 35 fontsquirrel.com Sans Serif 118 Script 47 Serif 62 Slab Serif 19 PT Sans | 8 Styles | TrueType | Paratype | View | Download TTF Stencil 21 Typewriter 11 Total Families: 629 Font Foundries List Museo Slab | 2 Styles | OpenType | Exljbris | View | Download OTF (offsite) ABOUT Font Squirrel is your
  • Celebrating 20 years! English Log In Fonts Blog Help HISTORY FAVORITES (0) CART (0) Browse Fonts Search for fonts... Category Foundry Designer Get Started Browse & buy fonts ▶ Random Browse by Category, Gallery Foundry, or Designer. Or Top Fonts let our research team do the work for you. New Fonts Bestsellers Discover new type ▶ Staff Picks Our blog is updated frequently with fresh fonts Your Fonts and recommendations, the History Newsletter brings the latest to your email inbox, Favorites or discover type in print with FontBook. Get smart ▶ Expert advice on formats, installation, or licensing is just a click or Call away. We welcome four new foundries to fontfont.com/ FontShop.com: Hubert Jocham, Castle Type, HvD Fonts, and ReType. See them all. Voice Embryo Goudy Trajan A font to benefit victims of the The FontFeed is a daily dispatch of recommended
  • My account / Login My shopping cart presented in: Linotype Authentic™ Sans Bold My favorites Font Finder Font Products Font Services Font Lounge News Support Company Search for Fonts We serve all your Font and Type needs at Linotype.com Advanced search ... Linotype Top Sellers Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. We offer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType and 1. Neue Helvetica® Text Fonts PostScript. – Try them out! 2. Helvetica® for books and magazines Font Finder (Shop) Foundries and Libraries Font of the Week 3. Avenir® Script Fonts 4. Optima® calligraphy, 5. Rotis® Sans Serif handwriting fonts Complete Font Charts … Handwriting/Grunge fonts with a personal touch BA Graphics Looking for a special font? A literal labor of love, created by Type News Corporate Fonts Explore the various ways to find Browse through our comprehensive Daniel Pelavin – Save 20%! fonts for New Font Releases the font that fit your needs. product catalog. more ... corporate design more ... more ... Font News Celebration Fonts Platinum Collections events from birthday Fonts in Focus to Halloween News Award Font Services Blackletter Fonts gothic, celtic fonts Subscribe to our newsletter or view Comic Fonts the current issue. kids and fun fonts Western Fonts Make the most out inspired by linotype.com of your website – the Wild West become an Affiliate! Cool Fonts modern, technical look Linotype offers all Screen Fonts The new FontExplorer X product Malabar received the 2010 German Take a look at our comprehensive kinds of web optimized for small line – high-level professional font Design Prize. Award ceremony on services, tailored to your needs. shopping and sizes management for you. 12th February 2010. more ... licensing Symbol Fonts more ... more ... advantages. pi fonts for any occasion Site Map Contact Imprint/Legal Terms of Use Monotype Imaging
  • Licensed Fonts FontSquirrel FontFont LinoType Webfonts 560+ 100+ ???+ fonts families families Sub-setting ✔ EOT, OTF, TTF, Formats SVG, & WOFF EOTLite & WOFF EOT Price Free $80-860 Scale family/page view font/WS
  • Webfont Service Bureaus Easy License & Deployment
  • What to look for… Subsetting Local Use Bandwidth Usage Price Structure
  • What to look for… Speed???
  • Limits of Webfont Services… Do not control font name Do not control font files Price often a yearly license Browser support varies
  • typekit.com
  • <script type="text/javascript"   src="http://use.typekit.com/xcp7mcv.js"> </script> <script  type="text/javascript"> try{Typekit.load();}catch(e){} </script> <style> h1  {    font-­‐family:  "coquette-­‐1","coquette-­‐2",fantasy; } </style> font name 1 font name 2
  • STYLES: SERIF - SANS SERIF - SCRIPT Find by Style or Tag CHARACTER SETS - FAMILIES - FOUNDRIES - DESIGNERS - HOW IT WORKS KERNEST.COM / Web Fonts Delivered. Welcome to Kernest. I'm Vegur-R from Dot Colon size 80 px color black background white word spacing px letter spacing px line height 140 % kernest.com Vegur-R from Dot Colon * Compare DOT COLON’S VEGUR-R USE ON YOUR WEBSITE FOR - FREE Last Seen at COMMERCIAL USE PERMITTED. Email
  • <link   href="http://kernest.com/www-speaking-in-styles-com.css"   media="screen"  rel="stylesheet"  type="text/css"  />
  • Search © 1999-2010 Featured Font collection Brioni Brioni Text Fedra Arabic Fedra Hindi Fedra Mono Fedra Sans Fedra Sans Alt Fedra Sans Condensed Fedra Sans Condensed Alt Fedra Sans Display 1 Fedra Sans Display 2 Fedra Serif A Fedra Serif B Fedra Serif Display Fedra Serif Phonetic Greta Display Greta Display Narrow Greta Grande Greta Grande Narrow Greta Text News Fonts T-shirts Greta Text Narrow Typotheque now supports WOFF in A contemporary typeface family ‘A piece of text that looks good but History Firefox 3.6 (25 Jan 2010) specifically designed for the demands of doesn't say anything’, printed in typeface Irma Selection of websites using Typotheque newspaper printing; it consists of four Irma, using its OpenType features mixing Irma Slab Web Font Service (23 Jan 2010) primary text weights (each in three positive and negative spaces of letters. Jigsaw Open Manifesto (18 Jan 2010) grades) and is optimized for use at small Printed on Organic Fine Jersey T-Shirts Jigsaw Stencil Gore’s choice (07 Jan 2010) sizes. from American Apparel. Klimax Nara Typotheque Web Font System now typotheque.com supports Chrome (23 Dec 2009) New articles: Methods of distribution (21 Fonts in use Dec 2009) View all news Subscribe Mailing list Articles Books Add yourself to our news email list. We The articles section is our attempt to We Want You To Love Type by Johanna use the list to help keep you informed of collect relevant published and previously Biľak / Alan Záruba the new fonts, special limited offers, and unpublished texts, not directed This publication presents work of 44 major updates. We never sell your email. exclusively to academic peers and Czech and Slovak designers, and focuses Read about our privacy policy. Would you students, but to a broader audience of on the process of creating innovative
  • <link  rel="stylesheet"   href="http://wf.typotheque.com/WF-­‐011405-­‐000505"   type="text/css"  />
  • 6&$)4/),#),''"4#$ ) j":)*# &.')%!"'(4%>2 6$<0& L&+*:#&- !"4#%-< Search ) BECF%&GH-9%&GB%IGJB%0ED9K-E @5')/*)4%"!%=/*6(%(2:*!6+*4;%#*=6##2;%4.<:#2%6')%/*#.6>#2%4*/8*)L 012%&"'()*+,3 &"'()*+,%D#"= -1*%!"'(4%2"5%$6'(%$.(1%'"%'**)%!"/%76869+/.:(;%&#641%"/%.<6=*4 !"#$%&'()*+)#&,-0<)-&,%<H !"#$%&'()*+)+$,#%,-%+)'"./0*,#$),#%),''&++*10&2)3$)4+&+),)566)78"#$98,'&)+"04$*"# PG)BJMQJRD)PGSG $"):*;&)<"4)-&,0)$&=$>)?@*'@)',#)1&)+',0&%>)$-,#+0,$&%>)-&,%)"4$)0"4%),#%)A"":0&%2 6,<):""%1<&)$")*.,:&+>)B,;,6'-*/$),#%)!0,+@)@,'(+2 T&E-&)'4--&#$0<)4#%&-:"*#:)$&+$*#:)*#),)/-*;,$&)1&$,2)J+)?& +',0&)4/),#%),%%)$@&)8*#,0)/"0*+@>)?&E00)1&)&=$&#%*#:)*#;*$,$*"#+ &/**%6')%*642 $"),)?*%&-),4%*&#'&2)U")V"*#)$@&)0*+$)"8)$&+$&-+>)/0&,+&)&*$@&- !"#$%&'()*+)8-&&)$")$-<),#%)C4*'()$")+&$)4/2)D"4E00)1&)4/),#%)-4##*#:)*#),1"4$ +*:#)4/)"#)!"#$%&'(2'".)"-)8"00"?)"4-)U?*$$&-)+$-&,.),#%)<"4 FG)+&'"#%+H +@"40%)@&,-)8-".)4+)*#)$@&)#&=$)8&?)?&&(+2 -/2%6')%>52%.').8.)56#%!"'(4 ."#&<9+,;*#:)14#%0&+2 fontdeck.comß 5@""+&)*#%*;*%4,0)8"#$+)$")+4*$)<"4-)/-&'*+&)%&+*:#)-&C4*-&.&#$+>)"-)/4-'@,+& 38)<"4),-&),)(2:*%)*4.='*/)"-)?"-()8"-),)8"#$)!"5')/2>)?&E% &+/&'*,00<)0";&)$")@&,-)8-".)<"42)W0&,+&)%-"/)4+),)0*#&),$ -*'@78"#$%&'(2'".)8"-)."-&)*#8"-.,$*"#)"#),)+/&'*,0)/-&;*&? "8)!"#$%&'(>),#%)%&$,*0+)"#)@"?)$"):&$)<"4-)8"#$+)+,8&0<)"#$" ?*/!*+(%!"/%:/"!*44."'6#4 ?&1+*$&+),'-"++)$@&)?"-0%2 D"4)',#)$-<),#<)#4.1&-)"8)8"#$+)8"-)8-&&)"#)<"4-)0"',0).,'@*#&>)%&;&0"/.&#$ &#;*-"#.&#$)"-)+$,:*#:)+&-;&-2)!"#$%&'()%"&+#E$)-&C4*-&)B,;,6'-*/$),#%):*;&+)<"4 XT@,$)*E.)-&,00<)&='*$&%),1"4$)*+)$@& '"./0&$&)80&=*1*0*$<)*#)<"4-)+&$94/2 "//"-$4#*$<)$")&.1-,'&)$@&)#&?)$&'@#"0":<),#% 8*#,00<222X
  • <link  rel="stylesheet"   href="http://f.fontdeck.com/s/css/ngV3OuKdakbpyw/ www.jasonspeaking.com/130.css"   type="text/css"  />
  • n My Cart: 0 items $0.00 View Search Fonts by Type Style D"9%(:1*0(E%B&"'%(+(5-61#0+6$"/(?+/%,"F' Language Foundry A-Z List Web Fonts Font Lists Most Popular Fonts New Releases Fonts on Sale Other Fonts Resources Newsletters Articles Font Services Webtype solves the 'web-safe' fonts dilemma using premium-quality text and Custom Fonts headline fonts. ascenderfonts.com Font Licensing Eliminate the hassles and expense of using Flash, JavaScript or image replacement techniques! !"#$%&'()*+,"'-(./01&&(.,,(2013&%0& Clean, readable and will render properly Supported Browsers 4&%(5-6%('1(7189%-(:1*0(20+8; Use real fonts, not graphics Support
  • Webfont Service Bureaus Typekit Kernest Typotheque Ascender Fontdeck # Fonts 400+ 600+ 40+ 200+ 40+ fonts fonts families fonts families Sub-setting ✔ ✔ ✔ Local Use ✔ ✔ Bandwidth 5-500GB Unlimited 500MB 1-18GB Unlimited /month /month /month Price $25-250 $1-75 $100-900 $10-105 ~$10 /year Subscription /font/year/WS /family /font/year /font/year
  • CHOOSING Webfonts
  • Choose for voice… typography::type voice::speech “I’m going to kill you” Cooper Black “I’m going to kill you” Synchro LET “I’m going to kill you” Sybil Green “I’m going to kill you” UglyQua
  • Choose for compatibility… Always include webfont, Web safe, core web, and generic typefaces in your font stack.
  • webfont web safe core web generic h1  {     font-­‐family  :  diavlo,  tahoma,  arial,  sans-­‐serif;  }   web safe core web generic p  {   font-­‐family  :    cambria,  georgia,  serif;  }
  • Choose for consistency… Select understudy fonts with similar widths and kerning to the primary font. Diavlo Looking Glass Verdana Looking Glass Tahoma Looking Glass
  • Choose for consistency… Test all fonts in all combinations.
  • h1  {     font-­‐family  :  diavlo,  tahoma,  arial,  sans-­‐serif;  }   p  {   font-­‐family  :    cambria,  georgia,  serif;  } Looking Glass 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.
  • Choose for style… Select fonts with bold, italic, and bold/ italic versions. Cambria 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   p e r   c o n u b i a   n o s t r a ,   p e r   i n c e p t o s   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.
  • Choose for legibility… Select fonts with consistent weight and thickness with simple, low contrast strokes and serifs. Weight & Strokes & Thickness Serifs Diavlo Looking Glass Tahoma Looking Glass
  • Choose for readability… Select fonts that are well balanced between letter spacing, counter width, letter width, & x-height. letter spacing letter width Tahoma Looking Glass x-height counter width
  • 2010 The Year of Web Typography
  • QUESTIONS jasonspeaking.com | @jasonspeaking fluidwebtype.info/sxsw
  • www.fluidwebtype.com