The state of Web Type: Short Introduction

Being a web designer will soon require a deeper understanding of typography and how typefaces work. There is the possibility that the middlemen, by increasing acceptance of web fonts, will hasten the arrival of a licensing standard— and that this will, in turn, prompt Microsoft to support fontface for any licensed font.

WEB TYPE The State of

Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan

A seventh-grader writing a book report on Microsoft Word had more font choices than

the person designing Esquire magazine’s

website or the Ikea online catalog

—DEBORAH NETBURN, LOS ANGELES TIMES

latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html

WHERE WERE WE?

BROWSER FONTS

VerdanaArial

HelveticaLucida

TahomaTrebuchetCalibri

sans

SERIF

SERIF

TimesGeorgiaPalatinoCambria

Not dynamic Inefficient Text selection Images-off issue

Licensing Configuration Text selection Text scaling

No Apple love

No plugins Wide support Works on iPhone OS

Licensing Font conversion Configuration Screen readers FOUT

WHAT’S NEW?

@font-face { }

FONT-FACE EMBEDDING

First introduced in CSS2 recommendation

Removed from CSS2.1 specification

Implemented in IE4, September 1997

—Proprietary EOT format

Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4

Being a web designer will soon require

a deeper understanding of typography

and how typefaces work

—JASON SANTA MARIA, A LIST APART 296

www.alistapart.com/articles/on-web-typography/

FONT-FACE FORMATS

IE4+ Embedded OpenType (EOT) 60%

Firefox 3.5 TrueType, OpenType 5.8%

Firefox 3.6 TrueType, OpenType, WOFF 15.3%

Opera 10 TrueType, OpenType 1.8%

Chrome 4 TrueType, OpenType, SVG 5.5%

Safari 3.1+ TrueType, OpenType, SVG 4%

FONT-FACE LICENSING

Typefaces are electronic files, like MP3s

—Difficult to protect against piracy

Problem: browsers linking to raw font files

—Foundries want their hard work protected

Foundries use EULAs to control embedding

—Some specify SWF, Cufón licences, most just PDF

Obfuscation

—All formats vulnerable to being “unwrapped”

BETTER HOW?

FONT-FACE EFFECT

Web designers talking/thinking about typeType foundries participating

New techniques and formats

—Paul Irish: “Bulletproof @font-face syntax”

—Web Open File Format (WOFF)

Hosted “middlemen” solutions

No single, standard format (yet)

There is the possibility that the middlemen,

by increasing acceptance of web fonts, will hasten the arrival of a licensing standard—and that this will, in turn, prompt Microsoft

to support @font-face for any licensed font.

—JEFFREY ZELDMAN, GODFATHER OF WEB DESIGN

www.zeldman.com/x/54

NEW SERVICES

Typotheque First foundry service, per-font fee

Typekit Hosted subscription service, via JS+CSS

FontSquirrel Library of free fonts, kit & file generators

Kernest Free and paid subscription service

FontFont Per-font fee, self-hosted or via Typekit

Fonts.com Hosted service, free trial, via JS+CSS

Fontdeck Private beta, CSS-only hosted solution

Google NEW! Announced today, open-source library

QUALITY CONTROL

Strunk White s

Strunk & White’s

CHUNKFIVE FERTIGO

FIREFOX 3.6

iPHONE OS

SAFARI, CHROME, OPERA

TTF/OTF

WOFF EOT

SVG SERVICE

MIDDLEMEN

CDN

SECURITY LICENSING

Security through obfuscation

—Edit “name” table, breaks desktop installation

—Use multiple files, recombine with font stack

(skolar-1, skolar-2, etc.)

TYPEKIT

UpdatedSecureCost-effectiveEasy

Point of failureRendering

Rent vs Buy

Page weight

FONTDECK

LOOKS GOOD

Each OS platform implements own engine

Quartz 2D in OS X is smooth, but adds weightWindows ClearType sharper, more jaggy

Windows DirectWrite offers improvement

Hinting & sub-pixel rendering can help

Font hinting … uses tables of mathematical

instructions to align letterforms to the

pixel grid and to determine which pixels

should be greyscaled

—THOMAS GIANNATTASIO, SMASHING MAG

www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/

Same glyphs, but right has hinting applied

Trading off legibility against integrity

Painstaking process, hundreds of hours

Tuning for specific rendering engines

RENDERING: PILL GOTHIC

RENDERING: PILL GOTHIC

IN USE

BIG NAMES

Teamed up with Typekit

Typekit open sources its WebFont Loader

NEW!

Most font replacement techniques,including my own, were meant as

stepping stones to @font-face 2010 is going to be the year of @font-face.

—SIMO KINNUNEN, CREATOR OF CUFÓN

www.newsurl.net/in-depth-the-future-of-web-fonts/

Matthew Buchanan

matthewbuchanan.name

www.cactuslab.com

THANKS