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: Power Up!

Chris Lilley

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

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;

Color Fonts

From illuminated manuscripts…

illuminated manuscript

…to emoji

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

Painter Kafeel

TransType Editor

screenshot for demo

COLR + CPAL

COLR: stack of TrueType outlines

CPAL: color palette(s)

Painter Kafeel

Where did the styling go?

SVG (+ CPAL)

SVG: SVG graphics

CPAL: color palette(s)

CSS variables: alter palette

Painter Kafeel

Painter Kaffeel

CSS4 font-palette
select from provided palettes
CSS4 @palette-entries
override baked-in palettes

Variable Fonts

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

@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