The Future of CSS Typography - People of Mozilla

John DaggettMozilla Japan

Ampersand 2011 BRIGHTON

The Future of CSS Typography

First, a little history

• CSS1 (1996) basic font and text properties• CSS2 (1998) @font-face, font-stretch• CSS 2.1 (2002~) slim down, accurately specify• CSS3 (2002~) independently evolving modules• CSS3 Fonts (2008) @font-face, OpenType support

CSS font property evolution

• Wider choice of fonts (@font-face rule)• Control over font features• Rendering and layout consistency• http://dev.w3.org/csswg/css3-fonts/

CSS3 Fonts: better building blocks

Steps in the spec process (from Murakami)

Existing font properties in CSS

Basics

Individual faces selected by combination of properties

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

h1, h2, h3 { font-weight: bold; }

em { font-style: italic; }

Choosing a font

First available font family on a given platform is selected

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

h1, h2, h3 { font-weight: bold; }

em { font-style: italic; }

Font fallback

37signals.com

Firefox 3.5, WinXP vs. Mac OS X 10.5

System font fallback picks up fonts for other scripts

body { font-family: Lucida Grande, Tahoma, Verdana, Arial, sans-serif;}

• A set of closely related typeface designs• Shared name but...• TrueType defined names per-platform• Multiple localizations possible• Platform API’s do strange and interesting things

Font family names

Should match the bold face of Arial

body { font-family: Arial; font-weight: bold;}

font-family

Should match the regular face of the default font!

body { font-family: Arial Bold, ArialBoldMT; font-weight: normal;}

font-family

• Simple values: normal, bold• Numeric values 100 ... 900• Relative values: bolder, lighter• Windows GDI limits family groupings to normal, bold• Reflected in OpenType family name definition (!!!)

font-weight

Based on OS2.usWeightClass values

100 Thin200 Extra-light, Ultra-light300 Light400 Normal, Regular500 Medium600 Semi-bold, Demi-bold700 Bold800 Extra-bold, Ultra-bold900 Black, Heavy

font-weight values in CSS

Helvetica Neue on Mac OS X 10.6

100 UltraLight300 Light400 Regular700 Bold900 Black (only condensed)

Weight value mappings

Helvetica Neue LT Std in Font Folio 11

250 Thin275 Ultra Light300 Light400 Roman500 Medium700 Bold750 Heavy900 Black

Weight value mappings

• GDI synthetic bolding occurs for weights <= 200• Apple treats usWeightClass as unreliable• Weight value is inferred from the style name (!!!)• See WPF font selection model from Microsoft• Affects family groupings in strange and wonderful ways

Weight value mappings

Pause to sigh...

• normal, italic, oblique• oblique usually treated as synonymous with italic• Families with both italic and oblique faces rare

font-style

• When bold or italic don’t exist, use rendering tricks• Authors often unaware• Doesn’t work well in all cases• But users complain if disabled• ick, patooey

Synthetic bold & italic

Futura on Mac OS X lacks a bold face

Browsers fake bold by smearing a regular face

And fake italics by obliqueing

• Should be font-width• In CSS2, now back in CSS3• Values based on usWidthClass names• Ex: condensed, expanded• Used for font selection, no synthetics

font-stretch

The @font-face mechanism

Downloadable fonts

• Proprietary implementations in Netscape & IE• Defined in CSS2 but with lots of features• CSS3 Fonts is more narrowly defined

@font-face rule

@font-face { font-family: Gentium; src: url(fonts/Gentium.woff);}

body { font-family: Gentium, Georgia, serif; }

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

Using @font-face

@font-face { font-family: mplus1p; src: url(mplus-1p-regular.woff);}

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

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

Defining multiple weights

@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(!)

Format hints

@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 isn’t• Defined using fullname or Postscript name• Allows access to all faces!

Using local fonts

@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

Composite fonts with unicode-range

• EOT• TrueType/OpenType• SVG• WOFF

Supported font formats

ttf/otf woff svg eot

Internet Explorer 9 9

Firefox

Safari 6

Chrome

Opera

• Fonts are only loaded for documents from the same domain

• Prevents cross-site linking• Actual mechanism subject of recent debate

Same origin restriction

• Same protocol• Same site• Same port

Meaning of same origin

http://www.example.com:80/lovelythings.html

Fontshop EULA

2.3. Font Software File Protection. You must ensure, by applying reasonable state-of-the-art measures, that other websites cannot access the Font Software for display (e. g. by preventing hotlinking and blocking direct access to the Font Software via .htaccess or other web server configurations).

• Firefox, IE9: same origin restriction by default• Firefox, IE9: use CORS to relax restriction• Webkit, Opera proposal: use From-Origin to

explicitly restrict• Useful for all resource types, not just fonts• More work for authors• What’s the default when no header present?

Origin restriction mechanism

Allows linking from any site

Using CORS to relax the restriction# example Apache .htaccess file to add # access control header <FilesMatch "\.(ttf|otf|woff)$"><IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule></FilesMatch>

Restricts use to pages with the same origin

Using From-Origin to restrict# example Apache .htaccess file to add # From-Origin header <FilesMatch "\.(ttf|otf|woff)$"><IfModule mod_headers.c>Header set From-Origin "same"</IfModule></FilesMatch>

• Timing of how fonts load• For large fonts, what to do while waiting?

Font loading

<!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

Common page structure

What should be shown while the font loads?

Safari uses default metrics and shows blank text

Page when loaded

Firefox 4 shows blank, then displays with fallback fonts after a delay (default: 3 seconds)

Page loading behavior can get complicated!

• Japanese fonts are largely print oriented• Lots of glyphs, large size• Complexity of the characters means cost is high• Can’t use vertical layout across browsers• Japanese web fonts are a completely different product• Hinting requirements mean huge cost

Japanese font handling

ClearType Meiyro: A new standard for reading on the screen

http://decomoji.jp/pages/font/detail?id=52

Group most commonly used glyphs into first font

@font-face { font-family: MyGothic; src: url(gothic-jis1.woff); unicode-range: ** jis-1 **;}

@font-face { font-family: MyGothic; src: url(gothic-jis2.woff); unicode-range: ** jis-2 **;}

Splitting up a font

民主党 Manifesto 2010

Supporting OpenType features in CSS

Controlling font features

What are OpenType font features?

Postscript fonts (from FontShop)

OpenType fonts (from FontShop)

• TrueType fonts: one glyph per character• OpenType: multiple possible glyphs per character• Maps characters to set of glyphs and positions• Script, language, context can affect this• How to map control of this into CSS?• WPF font features as one possible way

OpenType features

• From discussions between Håkon Wium Lie, Adam Twardoch and Tal Leming

• Etan Wexler also proposed something similar• font-variant becomes a shorthand• Subproperties enable OpenType features

Extending font-variant

• Used to select variant glyphs within a given font• If the font lacks feature support default glyph used• Avoid synthesizing...• Exceptions for backwards compatibility• To prevent property explosion, values grouped• Selecting alternates gets a bit hairy

font-variant subproperties

• Values: normal, none, auto• auto means browser decides the default• normal means browser must use kerning data• Hopefully text engines will get faster

font-kerning

• control over common, discretionary, historical ligatures• normal implies default behavior• common ligatures on, discretionary ligatures off• defined by OpenType not by CSS

font-variant-ligatures

Playing with Bello demo

• Support for true small caps• Small caps, petite caps, etc.• Small caps must be simulated when no available• Petite caps fallback to small caps• all-small-caps is not the same as small-caps with

text-transform: lowercase

font-variant-caps

• Lining or old-style figures• Proportional or tabular figures• Automatic fractions, slashed zero

font-variant-numeric

Using various number styles

Fractions demo

• Control over CJK variants, width features• Some width features not defined• Define with vertical text layout controls

font-variant-east-asian

• Some OpenType features allow multiple selections• e.g. swash, styleset, character-variant• Early spec draft used numbers to select• e.g. styleset(1, 2, 5)• Widely disliked, ugly to look at, fallback dodgy• Solution: new @-rule to specify values

font-variant-alternates

Author defines ‘flowing’ to mean second swash alternate

@font-feature-values Jupiter Sans { @swash delicate 1, flowing 2;}

h2 { font-family: Jupiter Sans, sans-serif; }

/* show the second swash variant in h2 headings */h2:first-letter { font-variant-alternates: swash(flowing); }

@font-feature-values

Settings for Whitney from Hoefler & Frere-Jones

@font-feature-values Whitney { @styleset flat-terminals 1; @styleset alt-g 8, alt-a 9, alt-M 10; @styleset curly-quotes 17; }

Real world example

/* dlig=1 enable discretionary ligatures */font-feature-settings: "dlig" 1;

/* smcp=1 enable small caps */font-feature-settings: "smcp" on;

/* liga=0 no common ligatures */font-feature-settings: "liga" off;

• Low-level control over arbitrary features• Syntax is OpenType feature name with value• Interaction with font-variant subproperties• Implemented in Firefox 4 (old syntax)!

font-feature-settings

Tickle me Kosmik demo

• OpenType fonts allow language-specific features• Turkish ligatures, Serbian, Bulgarian Cyrillic forms• OpenType language inferred from ‘lang’ attribute• Can be overriden with font-language-override

Language support

UDHR example

Stumbles along the road

Rendering considerations

• Type doesn’t look the same everywhere• Windows is the problem child• Getting better but...• Change is hard• Goal: roughly the same results everywhere

Visual consistency

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

• Cleartype vs. grayscale antialiasing• Windows XP: Cleartype off by default• IE7+ forces it on• FF4: force it on for downloadable fonts• DirectWrite: FF4, IE9 on Windows 7

Type on Windows

Screenshots

Thanks for listening

That’s all folks