Advancing Web Typography

John Daggett & Jonathan Kew Mozilla ATypI 2009

MEXICO CITY

Who are we?

Web Typography Today

Typographic Control in CSS

HTML & CSS

HTML for content CSS for presentation Vary the CSS to get a different presentation without
changes to the content

Typography Controls in CSS

Choosing a font Controlling layout and spacing

Choosing a font
body { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } h1, h2, h3 { font-weight: bold; } em { font-style: italic; }

Individual faces selected by combination of properties

Font fallback
body { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } h1, h2, h3 { font-weight: bold; } em { font-style: italic; }

First available font family on a given platform is selected

37signals.com
Firefox 3.5, WinXP vs. Mac OS X 10.5

Limited choices

Arial

Georgia

Times New Roman Verdana Trebuchet MS

Authors have a limited set of font choices...

Small caps
body { font-family: Times, Georgia, serif; } h2 { font-variant: small-caps; }

Most browsers simply fake small caps by resizing!

More later on font-variant!

Controlling layout and spacing

Leading: line-height Tracking: letter-spacing, word-spacing Alignment: text-align, vertical-align Case: text-transform Lines: text-decoration

Font rendering

How to turn a letterform into screen pixels?

Subpixel antialiasing relies on the geometry of a pixel

Subpixel antialiasing relies on the geometry of a pixel

Subpixel antialiasing, Windows vs. Mac OS X

Firefox 3.5, WinXP with ClearType vs. Mac OS X 10.5

Subtle changes across Windows versions

Firefox 3.5, WinXP with ClearType vs. Firefox with DirectWrite, Windows 7

Something important to remember...

Win XP

Vista

Win 7

Mac OS X

Other

Source: StatCounter GS, 10/2009

Kerning and ligatures

Disabled in most browsers For performance reasons

Windows 7, with and without kerning...

IE 8 vs. Firefox 3.5, Windows 7

Sparse font families

body { font-family: Futura; } <h1>Getting Away From It All</h1>

What happens when a font family lacks a bold face?

Futura on Mac OS X lacks a bold face

Browsers fake bold by smearing a regular face

And fake italics by obliqueing

Synthetic artifacts
body { font-family: Futura; color: rgba(200,255,40,0.5); background-color: black; } <p>Away</p> <p><strong>Away</strong></p>

Things dont always render as expected...

Fake bolding mixed with a blend changes the color!

Authors often unaware of synthetics!

Font rendering
Different platforms have different font sets Rendering varies across platform, browser Synthetic rendering can cause subtle problems

CSS3 Fonts
Adding more typographic controls to CSS

CSS3 Fonts
More fonts via @font-face Better control of font features

@font-face rule
Proprietary implementations in Netscape & IE Dened in CSS2 but with lots of features CSS3 Fonts is more narrowly dened

Using @font-face
@font-face { font-family: Gentium; src: url(fonts/Gentium.ttf); } body { font-family: Gentium, Georgia, serif; }

Denes a font that is downloaded when needed Name is completely under author control One rule per style combination Activated per-document, not system-wide

Dening multiple weights

@font-face { font-family: mplus1p; src: url(mplus-1p-regular.ttf); } @font-face { font-family: mplus1p; src: url(mplus-1p-bold.ttf); font-weight: bold; } @font-face { font-family: mplus1p; src: url(mplus-1p-black.ttf); font-weight: 900; }

Format hints
@font-face { font-family: Gentium; src: url(fonts/Gentium.woff) format(woff), url(fonts/Gentium.ttf) format(truetype); }

Declares format of data Unknown formats are skipped truetype, opentype synonymous(!)

Using local fonts

@font-face { font-family: Gentium; src: local(Gentium), url(fonts/Gentium.ttf); } body { font-family: Gentium, Georgia, serif; }

Uses local version of the font if available Downloads the font if it isnt Dened using fullname or Postscript name

body { font-family: Helvetica, Arial, sans-serif; }

This can be replaced with...

@font-face { font-family: Helvetica; src: local(Helvetica), url(HelveticaRegular.woff); } body { font-family: Helvetica, sans-serif; }

An Arial-free world?

Composite fonts with unicode-range

@font-face { font-family: DroidSans; src: url(DroidSansJapanese.ttf); unicode-range: U+3000-9FFF, U+ff??; } @font-face { font-family: DroidSans; src: url(DroidSans.ttf); unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; }

Allows combining fonts for a single face Effective range is intersection of range with
character map

Supported font formats

EOT TrueType/OpenType SVG WOFF

ttf/otf
Internet Explorer Firefox Safari Chrome Opera ?

eot

Working with multiple formats

@font-face { font-family: Gentium; src: url(GenR102.eot); } @font-face { font-family: Gentium; src: url(GenR102.ttf) format(truetype); }

Two font formats, one for each browser

Better way
@font-face { font-family: Gentium; src: url(GenR102.eot); src: local(Gentium), url(GenR102.ttf) format(truetype); }

http://paulirish.com/2009/bulletproof-font-faceimplementation-syntax/

Same origin restrictions

Fonts are only loaded for documents from
the same domain Prevents cross-site linking Can be relaxed using CORS Implemented only by Firefox

Font engine bugs

Report font-related crashes (please!)

Font loading
How fonts load What about that ash?

Common page structure

<!DOCTYPE html> <html> <head> <title>An Interesting Page</title> <script src="/js/pageutils.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> ** page contents ** </body> </html>

Pages contain content and link to other resources

What should be shown while the font loads?

Safari uses default metrics and shows blank text

Page when loaded

Firefox displays with fallback fonts while loading

Page loading behavior can get complicated!

Tools like Firebug are denitely your friend!

WOFF
A new format for fonts on the web

WOFF background
Attempt to resolve lack of single, interoperable
format for web fonts Joint initiative: Tal Leming (Type Supply) Erik van Blokland (LettError) Jonathan Kew (Mozilla) With the support and input of many others in both the font and browser communities

Key features
Lossless compression of OpenType data Differentiates desktop and web fonts Allows additional metadata attached to a font Simple to implement

WOFF structure
font header data table font data table data table data table woff header data table data table data table data table metadata

woff

metadata

xml

Supported in Firefox 3.6 (beta soon!)

Font Features in CSS

Now the fun can begin!

font features in CSS demo

Thats all folks

Thanks for listening. Muchas gracias!