Important

This slide deck was created for use in a controlled environment, during a talk. It works best with a recent Firefox at 1920x1080. It WILL PROBABLY NOT work correctly in other browsers, due to limited support for CSS3 font-variant-* properties and css variables at this time. But the other browsers will catch up. Right? Right??!!

WebFonts: Level Up!

Chris Lilley

me

Hello!
I’m Chris or @svgeesus

Technical Director at W3C
(Interaction Domain)

Started SVG (1996)

SVG WG Chair (1998-2006)

Co-authored PNG (1996)

WebFonts

Topics for today

Basics

Character
a codepoint, with properties
Glyph
visual representation of character(s)

fi

character(s), glyph(s)

é

character(s), glyph(s), font(s)

Myriad Pro <— Font family

  • <— Faces
  • Light
  • Roman
  • Bold
  • Black
  • Italic
  • Condensed

Baskerville<— Font family

  • <— Faces
  • Roman
  • Semibold
  • Bold
  • Italic

Properties & descriptors


@font-face {
	font-family: Arvo; /* Descriptor */
	src: url(fonts/s.woff); /* Descriptor */
	font-weight: bold; /* Descriptor */
}

h1 {
	font-family: Arvo; /* Property */
	font-weight: bold; /* Property */
}
Descriptors
describe individual font faces
Properties
requests for styling

Font stacks

First font with glyphs for a given character is used

Problem: avoiding bad Latin glyphs in Japanese fonts

@font-face {
	font-family: Demo;
	src: url(Latin.woff), url(Japanese.woff);
}

Both fonts can’t be first!

unicode-range
Descriptor for allowed range of Unicode characters

	@font-face {
		font-family: 'Headings';
		src: url(fonts/Japanese.woff);
		unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
		/* yen, kanji, hiragana, katakana */
	}
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
poop

I'm really sorry about the unicode-range syntax. :(
What was I thinking?!

This & That
no need for extra elements
U+26
Use just the ampersand

This & That

OpenType Features & CSS

CAPITALE FULGURANT

et modeste avec ça

INCROYABLE astrale

OpenType features
Optional stylistic controls
Control with CSS
Fonts vary in features provided
font-variant
Preferred, but poor support
font-feature-settings
Cryptic, low-level, widespread support

1234567890ABC
1234567890abj 

font-variant-numeric: ;

1/2 3/4 5/8
13/27 86/483 

font-variant-numeric: ;
112,113.56
89,546.87
286,111.10 
font-variant-numeric: ;

INCROYABLE
flaneur

font-variant-ligatures: ;

Roman
Italic
Bold 

font-synthesis: ;
font-family: ;

JAVA Ta Wa 

font-kerning: ;
letter-spacing: em;

Performance

Subset all the things!

Subsetting

WOFF 1 compression

WOFF2: hmtx

WOFF2: glyf
Seven streams for better compression
WOFF2: loca
discard, recalculate

WOFF 2 compression

WOFF 2.0
with TrueType glyphs
68%
25% better than WOFF 1.0
WOFF 2.0
with CFF glyphs
63.5%
15.5% better than WOFF 1.0

WOFF2 & mobile

Balance decompression time & download speed

Last 2% size gain doubles decode time!

Memory for decompression only 1.05x that for WOFF1




@font-face {
	font-family: Arvo;
	src: url(Arvo-BoldItalic.woff)
	     format ("woff");
	font-weight: bold;
	font-style: italic;
}
/* Font Loading API!
http://w3.org/TR/css-font-loading
Support: FF, Chrome, Opera, Android */
var arvo = new FontFace(
	'Arvo',
	'url(Arvo-BoldItalic.woff) \
		format ("woff")',
	{
		weight: "bold",
		style: "italic"
	}
);

arvo.loaded.then(()=>{
	document.body.classList.add("arvo-loaded");
});

The future

From illuminated manuscripts…

illuminated manuscript

…to emoji

😀 😎 🤖 👨‍👩‍👧‍👦 👦🏻 👧🏻 👨🏻 👩🏻 👦🏼 👧🏼 👨🏼 👩🏼
👦🏽 👧🏽 👨🏽 👩🏽 👦🏾 👧🏾 👨🏾 👩🏾 👦🏿 👧🏿 👨🏿 👩🏿
🐱 🐶 🐌 🌎 🍕 🍲 🍫 🍻 ⚽️ 🏀 🏈 ⚾️
🌈 🏯 🗽 🚆 📱 🎉 🗓 💸 🇫 🇴 🇳 🇹
🇺🇸 🇧🇷 🇲🇹 🇸🇪 🇳🇬 🇰🇭 🇭🇷 🇮🇩 🇳🇿 🇪🇬 🇫🇮 🇨🇳

Painter Kafeel

TransType Editor

screenshot for demo

COLR + CPAL

COLR holds stack of TrueType outlines

CPAL holds color palette(s)

Painter Kafeel

Where did the styling go?

SVG (+ CPAL)

SVG holds SVG graphics

CPAL holds color palette(s)

CSS variables to alter palette

Painter Kafeel

Painter Kaffeel

CSS4 font-palette
select from provided palettes
CSS4 @palette-entries
override baked-in palettes
CSS4 font-synthesis
small-caps (disable fake small caps)
emoji, math, fangsong
New generic font families

Quick question

font-weight: 400;
font-weight: calc(9 * 100);
AaΑα 400
BbΒβ 900
CSS4 font-weight
a number from 1 to 999
Variable Font support
weight, width, slant, optical, custom

Dunbar variable font

three axes

@font-face {
    font-family: "Dunbar";
    src: "dunbar.otf";
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: -10deg 40deg;
}

h1 {
    font-weight: 234;
    font-stretch: 80%;
    font-style: oblique 24deg;
    font-optical-sizing: none;
}
/* Supported in Safari!! (TP 16+) */
font-variation-settings:"wght" 2.4, "wdth" .7, "radi" .4;
@keyframes expand {
    from { font-variation-settings: 'wght' .3 }
    to { font-variation-settings: 'wght' 3.1; }
}

peace

This may be the most significant development for design on the web since responsive design itself

—Jason Pamental

Image credits

Typography I/Helvetica
David Costa, cc-by-nc
Periodic Table of Font Elements 1.1
FontShop, cc-by
Speedometer
Zach Heller, cc-by
Crystal Ball
Shawn Perez, cc-by
Wooden type blocks at Fremont indoor Sunday market
Jonathon Colman, cc-by-nc-nd
Manuscript of Church Law
Unknown Miniaturist, English (active 1120s in Canterbury). Public domain.
“Lab” Variable font
David Jonathan Ross, "intended for fun and experimentation"
Normalised design space of a 3-axis variable font
John Hudson, using Kepler, a design by Robert Slimbach
peace demo
Erik van Blokland

WebFonts used

Arvo
Geometric slab serif with four faces (Roman, Italic, Roman Bold, Bold Italic) by Anton Koovit. Used here for headings.
Linux Libertine
OpenType serif font with many OpenType features: ligatures, small caps, oldstyle and tabular numeric variants, fractions, greek final forms, superiors & inferiors, contextual alternates. Used here for all the numeric feature demos.
Painter Kafeel
Commercial (50 USD). Set of ten fonts intended to be manually overlaid to produce lettering in the Indian hand-painted street signage style, by Painter Kafeel and sold by Handpainted Type. Used here as input to produce COLR and SVG demo chromatic fonts. (Because this is a commercially licensed font, I could use it personally but not put the font into the GitHub repo).
Rochester Regular
Formal, flowing handwriting script, by Sideshow. Used here for the ampersand, and the WebFonts logo.
MEgalopolis Extra
OpenType display font with a single, bold, weight by SMeltery. Has many OpenType features such as discretionary ligatures, contextual forms, swash forms, numerical alternates, and a range of stylistic sets. Used here to demonstrate common and discretionary ligatures.
Reenie Beanie
Informal handwriting script, by James Grieshaber. Used here for comments and other annotations.
EmojiOne
SVG-in-OT emoji font by Brad Erickson. CC-BY-4.0 Includes skin colour modifiers, circled letters, flags.