The Type We Want

The Type We WantUsing Fonts on the Web

Friday, November 6, 2009

Why?Typography is a key element in defining

readability

The Font TagOoh, we can make it look pretty!

Font Tag

I feel pretty. Oh so pretty.

ImagesAny font but at what price?

ImagesImages allows for any font to be used

Only practical for limited items with short text

Abused by clients

Printing is less than ideal

CSS and Font StacksFlexible design but who gets to see it?

CSS#pretty {

font-‐family: Arial, Helvetica, sans-‐serif;

#prettier {

font-‐family: "Gotham Medium", sans-‐serif;

OopsI want to look pretty

I want to feel pretty

I want to be pretty

Common Font StacksArial, Helvetica, sans-serif

Courier New, Courier, monospace

Times New Roman, Times, serif

Georgia, Times New Roman, Times, serif

Verdana, Arial, Helvetica, sans-serif

Geneva, Arial, Helvetica, sans-serif

Complex Font Stacks// Verdana Alternative

font-‐family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-‐serif;

Complex Font StacksBetter Font Stacks

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

8 Definitive Web Font Stackshttp://articles.sitepoint.com/article/eight-definitive-font-stacks

sIFR, Cufón, TypefaceNow we’re getting somewhere

sIFRsIFR requires JavaScript AND Flash

Slow for a lot of elements

Best used for headlines

Can be difficult to tweak

Support for CSS features is limited

CufónGenerates SVG font and VML outlines

Draws to <canvas> in all browsers that support it (ie: not IE)

No text selection

Original text is made invisible

Supports some CSS Styling (more than sIFR)

Typeface.jsSupports additional CSS styling over Cufon such as letter-spacing and font-stretch.

LicensingMost licenses aren’t very clear and should be clarified with foundry

Many fonts don’t allow embedding in this fashion

@font-faceHave we reached utopia?

TrueType (TTF) & OpenType (OTF)Supported in Firefox 3.5+, Safari 3+, Opera 10+

Including Opera Mobile

Expected in Chrome 4

Can be enabled in Chrome now with a command line switch

Embedded OpenType (EOT)Support in IE4+

TTF2EOT

Command line

Web services exist to make this conversion

Complete and utter garbage

Getting from OTF to TTF to EOTThe problem with the EOT apps is that they require a TTF and most fonts today are OTF.

FontForge will convert OTF to TTF

Font names aren’t transferred and must be set manually to allow TTF to EOT process to work reliably.

http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot

SVGChrome 0.3+ support with no need for a command line flag

Works on iPhone OS3.1+

Opera bug doesn’t show embedded font on second tab

Text selection works but not consistently

Creating SVG FontsFontForge

Requires tweak to XML namespace

SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes)

Web Open Font Format (WOFF)in Firefox 3.6 (beta 1 just released)

Supported by major font foundries

Creating WOFF FilesCommand line tool: sfnt2woff

Mac or Windows

http://people.mozilla.com/~jkew/woff/

Bulletproof @font-face@font-‐face { font-‐family: 'MuseoCustom'; src: url('MuseoSans-‐500.eot'); src: local('Museo Sans 500'), local('MuseoSans-‐500'), url('museo.woff') format('woff'), url('MuseoSans-‐500.ttf') format('opentype'), url('museo.svg#museo') format('svg');}

All-in-one ConversionFont Squirrel provides a one step conversion process

Upload TTF or OTF

Provides EOT, SVG and WOFF format

Does subsetting

Creates example HTML and CSS

SubsettingFont files can be megabytes in size

Arial Unicode MS is 23MB

Many fonts are still 100K+

SubsettingSubsetting reduces the number of glyphs in the file

great for latin languages

not so great for asian languages

Subsetting GotchaBe careful removing lower case glyphs if using upper case

IE and Opera have a bug with text-transform: uppercase that will use fallback font instead of subsetted font

LicensingMost fonts, even some free fonts, DON’T allow @font-face embedding

Foundries that support WOFF haven’t provided updated licenses yet

Contact them directly for more info

PerformanceFirefox, Opera shows unstyled text until font downloaded (FOUT!)

Blocking in IE if <script> before @font-face declaration; otherwise, unstyled until font downloaded

Safari, Chrome show no text until font downloaded

Opera doesn’t show the embedded font after the first page

http://www.useragentman.com/blog/2009/10/09/more-font-face-fun/

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

CompressionEOT and WOFF support compression

WEFT compresses by default, TTF2EOT doesn’t

Use GZIP compression where font isn’t already compressed

uncompressed EOT

TTF, OTF, and SVG

Font Embedding ServicesTypeKit

Typotheque

Kernest

Disadvantages of FESIf the server goes down, does your design have a suitable fallback?

Some services require JavaScript

None of the services serve SVG

Services obfuscate to prevent ability to install font permanently

Not cached

ResourcesFontForge

http://fontforge.sourceforge.net/

Batikhttp://xmlgraphics.apache.org/batik/tools/font-converter.html

FontSquirrel Generatorhttp://www.fontsquirrel.com/fontface/generator

Where to get fontsFontSquirrel

http://www.fontsquirrel.com/

TypeKithttp://typekit.com/

Typothequehttp://www.typotheque.com/

Kernesthttp://www.kernest.com/

Presentation FontsHeadlines: League Gothic

Free and open source; supports all manner of embedding

Body: Museo Sans 500

Free and supports @font-face embedding as long as you link back to the foundry

Additional weights available for sale

Code: Consolas

Comes with Microsoft Office

Not free and requires special EOT embedding license

Questions?Hit me with your best shot. Fire away.

The Type We Want

Technology

Our team We want

Je veux. I want Nous voulons We want Nous comprenons

Building the Future we want · Building the Future we want Sustainability

What we want,how we achieve it!

The future we want

Modeling: Entity-Relationship Diagrams...•For films, we want to store the title, year of production and type (thriller, comedy, etc.) •We want to know who directed and who acted

We want you as our new We want you as our new recruit recruit

The purpose: We want to analyze automata We want to …users.abo.fi/jboling/cdes/op_on_aut.pdf · • We want to analyze automata • We want to modify automata ... Let A1 and A2

We want you

We Want Respect

Can We Make Cities We Want

We never get what we want

Reconciling what "they" want with what "we" want

Political Ideologies Issue by Issue. Political Ideologies “We all want…the same things in life. We want freedom; we want the chance for prosperity; we

We want development.we want corruption free india

Attention: WE WANT YOU…

The Community We Want

Why we want Investment

We want a king!

WE WANT MOSHIACH NOW