2010: The Year of Web Typography - WebDirections
Upcoming SlideShare
Loading in...5
×
 

2010: The Year of Web Typography - WebDirections

on

  • 3,706 views

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?” ...

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
3,706
Views on SlideShare
3,512
Embed Views
194

Actions

Likes
2
Downloads
124
Comments
1

6 Embeds 194

http://www.webdirections.org 122
http://adellefrank.com 54
http://lanyrd.com 13
http://lanyrd.dev 3
http://bbdev-1.scad.edu 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

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…
  • Good Information on web typography..... Thanks
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome! <br /> Much has happened in the last year that will profoundly affect typography <br />
  • To send question during this session, please Tweet to <br />
  • To send question during this session, please Tweet to <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 />
  • Which is why 2010 will be remembered as the <br /> "Year of Web Typography" <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Use <br /> Find <br /> Choose <br />
  • Use <br /> Find <br /> Choose <br />
  • the skeleton of the letter A - Two diagonal strokes with one crossing horizontal. <br />
  • the skeleton of the letter A - Two diagonal strokes with one crossing horizontal. <br />
  • the skeleton of the letter A - Two diagonal strokes with one crossing horizontal. <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <br />
  • Just like people, there are an infinite number of ways to skin that skeleton <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 />
  • But what is like in that episode of the Twilight Zone - Eye of the Beholder <br /> Everybody is surgically altered to look the same. <br /> <br /> That&apos;s where Web typography is today with only a handful of faces. <br />
  • But what is like in that episode of the Twilight Zone - Eye of the Beholder <br /> Everybody is surgically altered to look the same. <br /> <br /> That&apos;s where Web typography is today with only a handful of faces. <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 />
  • Happy Voice <br /> Angry Voice <br />
  • Happy Voice <br /> Angry Voice <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 />
  • 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 />
  • <br />
  • to politicians <br /> <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 />
  • 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 />
  • So most designers just think that Web typography is UGLY!!! <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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Leaves us with 5 fonts commonly used in almost all Web sites. <br />
  • <br />
  • <br />
  • <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 />
  • 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 />
  • <br />
  • <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 />
  • In theory, you can download any font as a Webfont <br />
  • In theory, you can download any font as a Webfont <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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • <br />
  • <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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • <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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • <br />
  • <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 />
  • Font-shop Introduced Web FontFonts <br />
  • Font-shop Introduced Web FontFonts <br />
  • FontSquirrel is the clear winner for Free Webfont sites <br />
  • FontSquirrel is the clear winner for Free Webfont sites <br />
  • Linotype - Supports EOT in EULA <br />
  • Linotype - Supports EOT in EULA <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 />
  • 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 />
  • <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 />
  • 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 />
  • 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 />
  • 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 />
  • 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 />
  • What to look for in Webfont Service Bureaus <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <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 />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • Now that you know where to find Webfonts, How do you choose the best ones? <br /> Start with webfonts and work your way down. <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for CONSISTANCY - Especially display copy (Headlines) <br />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for STYLE - 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 />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for LEGIBILITY - fonts that are easy to make out, Especially body copy <br /> finer weights, strokes and serifs become blurry at smaller sizes. <br />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for OPTIMIZATION - Make sure the font has been tweaked for screen viewing. <br />
  • choose for OPTIMIZATION - Make sure the font has been tweaked for screen viewing. <br />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • choose for READABILITY - Fonts that will not strain the eye over the long haul, 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 />
  • 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 />
  • Which is why 2010 will be remembered as the <br /> "Year of Web Typography" <br />
  • Which is why 2010 will be remembered as the <br /> "Year of Web Typography" <br />
  • Which is why 2010 will be remembered as the <br /> "Year of Web Typography" <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 />
  • Twitter Contest <br /> To enter to win a free copy of my book, visit fluidwebtype.com <br />
  • <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 />

2010: The Year of Web Typography - WebDirections 2010: The Year of Web Typography - WebDirections Presentation Transcript

  •  2010 The Year of Web Typography Jason Cranford Teague jasonspeaking.com | @jasonspeaking Web Directions USA 28 July 2010
  •  @fluidwebtype fluidwebtype.info/web-directions
  • Q: What do these 3 Things have in common?
  • Flying Cars
  • Trips to Jupiter
  • Webfonts
  • A: 2010 3 things I was supposed to have.
  • 2008
  • 2008 2009
  •  2008 2009 2010 The Year of Web Typography
  •  What's New? Webfont Support Easy font conversion Web font service bureaus
  •  Web Typography Use Find Choose
  • A A A A A A A A A A A A A A A A A A A A A A
  • “Type design is an act of plagiarism in itself — you basically recreate the flesh of the same skeleton.” Alejandro Saravia pampatype.com
  •  What if everybody looked the same… …and everybody was UGLY?
  • 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 FBrand X Brand Brand X G Brand H Brand I rand J Brand K Bran d S Brand R Brand T
  • yahoo.com
  • aol.com
  • msn.com
  • Web Typography = HTML + CSS
  • Web Typography = Limited Font Choices
  • 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 Poems Out Loud that would become my first book, I didn’t think of it as a book, but rather 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 Facts About the Moon there suffering? Where is truth? These questions would arise in me in the 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 ΣκληρόβίντεογιατηΓάζα Acid Smile 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 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 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 Work At Play TOOLBOX The right tools for the job
  • Webfonts or Web fonts?
  •  USING Webfonts
  • How many fonts are there? >100 Thousand
  • How many fonts are used on the Web? 5 Fonts
  • Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 
  • Verdana Georgia Trebuchet MS Arial Times New Roman
  • Arial Georgia Times New Roman Trebuchet MS Verdana
  • (Pre)Installed OS Software
  • Web Safe Fonts ~190 Fonts
  • Web Safe Fonts Windows & Mac = 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 Web Safe Fonts 2-Almost Certain 7 Apple Symbols 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 Matrix of Fonts Arno Pro x Baskerville x x Baskerville Old Face x x x Bauhaus 93 x x x Bell Gothic Std x Bell MT x x x
  • Webfonts Any font?
  • web-safe star understudy core web generic understudy font-­‐family:  verdana,  arial,  sans-­‐serif;
  • Diavlo
  • name you give it @font-­‐face  { ...  } font-­‐family:  'body  copy'; font-­‐family:  Diavlo; src:  local(Diavlo) src:  url('fonts/Diavlo_BOOK_II_37.otf'); local name          url('fonts/Diavlo_BOOK_II_37.otf'); } font-­‐style:  normal; font properties font-­‐weight:  normal; path to font file font-­‐stretch:  normal; font-­‐variant:  normal; }
  • name you gave it font-­‐family:  tahoma,  arial,  sans-­‐serif; 'body  copy',  verdana,  arial,  sans-­‐serif; diavlo,  verdana,  arial,  sans-­‐serif;
  • File Formats True Type (.ttf) Open Type (.otf)
  • File Formats Embedded Open Type(.eot) EOT Lite (.eot)
  • File Formats Scalable Vector Graphics (.svg)
  • File Formats Web Open Font Format (.woff)
  • Browser Font Support EOT/EOT LITE ✔ TTF/OTF ✔ ✔ ✔ ✔ SVG ✔ ✔ ✔ WOFF Coming Soon! ✔ ? Coming Soon! Coming Soon!
  • SVG or WOFF ???
  • EOT for IE @font-­‐face  { font-­‐family:  'body  copy'; src:  url('fonts/Diavlo_BOOK.eot'); src:  url('fonts/Diavlo_BOOK.otf'); } src:  local('☺'), Local Name WOFF          url('fonts/Diavlo_BOOK.woff')                    format('woff'); OTF/TTF          url('fonts/Diavlo_BOOK.otf')                    format('opentype'); SVG          url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')                    format('svg'); }
  •  Sub-setting = Compression
  • EULA End User License Agreement
  • IP Intellectual Property
  • Exljbris
  • Emigre
  • Chank
  • What about sIFR & Cufón
  •  FINDING Webfonts
  • Webfonts Sources Licensed Webfonts Webfont Service Bureaus
  • Licensed Fonts Under Your Control
  • 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 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
  • 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 Font Squirrel 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
  • 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 – Linotype 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
  • Purchase Advantages… ➡ One Time Purchase ➡ Desktop Use ➡ Unlimited Domains ➡ Unlimited Page Views
  • What to look for in License… ✓ Webfont linking in EULA ✓Compression ✓ Formats ✓ Price Structure
  • Licensed Fonts FontSquirrel FontFont FontSpring Webfonts 560+ 100+ 1800+ fonts families families Compression ✔ Formats EOT, OTF, TTF, SVG, & WOFF EOT & WOFF EOT, TTF, SVG, & WOFF Price Free $80–860 Free–$100 family/WS font
  • Webfont Service Bureaus Easy License & Deployment
  • Typekit
  • 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 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
  • Bureau Advantages… ➡ No license worries ➡ No cross browser worries ➡ Reduces server strain ➡ Quality Fonts
  • What to look for in a bureau… ✓Available Fonts or Font Families ✓How Fonts are Added ✓Local Use ✓Bandwidth Usage ✓Price Structure
  • Webfont Service Bureaus Typekit Kernest Typotheque # Fonts 500+ 600+ 40+ families fonts families @font-face <script> <link> <link> Local Use ✔ Bandwidth 5-500GB Unlimited 500MB /month /month Price $25-250 $1-75 $100-900 /year /font/year/WS /family
  • Webfont Service Bureaus Fontdeck WebType FontsLive # Fonts 250+ 200+ 300+ families fonts fonts @font-face <link> <link> <link> Local Use ✔ ✔ Bandwidth Unlimited 1–18GB 1-18GB month /month Price free-$12 free-$105 $10-105 /year/font /month/font /font/year
  • Webfont Service Bureaus Google Font API Fonts.com WebInk # Fonts 18 7500+ 2000+ families fonts fonts @font-face <link> <script> @font-face Local Use ✔ ✔ Bandwidth Unlimited 12.5K–12.5G 1-80GB pageviews/month /month Price Free free-$500 99¢-$19.99 /month /month
  •  CHOOSING Webfonts
  • webfont web safe core web generic h1  {     font-­‐family  :  diavlo,  verdana,  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 style availability… Select fonts with bold, italic, and bold/ italic versions. Baskerville Cambria Lorem   ipsum   dolor   sit   amet,   consectetuer   Lorem ipsum dolor sit amet, consectetuer Old Face adipiscing elit.   Nunc   ed   ligula. ellentesque   adipiscing  elit. Nunc ssed ligula.   PPellentesque non felis   vel   lorem   tempor   ultricies.   Class   non   felis vel lorem tempor ultricies. Class aptent taciti   sociosqu   litora torquent per aptent  taciti sociosqu ad ad   litora   torquent   conubia nostra, per r a ,   p e i n c e p t o s   p e r   c o n u b i a   n o s t inceptosr   hymenaeos. Vestibulum ante ipsum primis ipsum   primis   hymenaeos.   Vestibulum   ante  in faucibus orci in   faucibus   orci   luctus   et   ultrices   posuere   luctus et ultrices posuere cubilia Curae; In hac habitasse platea In   hac   Aenean venenatis cubilia   Curae;   dictumst. habitasse   platea   dictumst.   Aenean  venenatis  hendrerit  tellus.   hendrerit tellus. Nunc posuere, nulla quis Nunc   posuere,   nulla   quis   sollicitudin   sollicitudin pretium, dui mi ultricies magna, id pretium,   dui  mi  ultricies  magna,  id  placerat   placerat lorem. lorem.
  • Choose for legibility… Select fonts with consistent weight and thickness with simple, low contrast strokes and serifs. Diavlo Looking Glass Weight & Thickness Strokes & Serifs 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
  • Choose for optimization… Select fonts that have been specifically optimized for screen viewing.
  • Choose for consistency style availability legibility readability optimization VOICE!!!
  • “Typographic gaffes will be readily visible; but that should make it even clearer when you're looking at a smart web page or a dumb one.” Chank Diesel chank.com
  •  2010 The Year of Web Typography
  • 2011 The NEW Web Typography… Where the Sexy is!
  • Web Typography Resources ✓Fluid Web Type ✓Nice Web Type ✓Clagnut ✓I Love Typography
  •  www.fluidwebtype.info
  •  QUESTIONS fluidwebtype.info/web-directions jasonspeaking.com | @jasonspeaking