Versatility & Compatibility
Weight, Width Axes
font-weight: [num]
font-stretch: [num]%
Finch Front-End, Edinburgh, 23-24 September, 2019
Dynamic Typographic Systems,
Modern CSS & Variable Fonts
Jason Pamental, web typographer
https://rwt.io | @jpamental
Itinerant typographer,
Walker of collies
Type is the voice of our words
It’s how we ‘hear’ what we read
“There are no crystal goblets, no defaults devoid of friction. Design has visible surfaces, inevitably, and they brim with significance and context and connotation and intent and tone”
—Nina Stössinger
First, foundations
New techniques in CSS
The Odyssey, Book I
Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely home; but do what he might he could not save his men, for they perished through their own sheer folly in eating the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all these things, O daughter of Jove, from whatsoever source you may know them.
.this-heading {
--heading-color: #212171;
}
.this-heading.changed {
--heading-color: #914141;
}
.this-heading {
--heading-size: 5;
font-size: calc( var(--heading-size) * 1vw );
}
.this-heading {
--heading-size: 5;
font-size: calc( var(--heading-size) * 1vw );
}
.this-heading.changed {
--heading-size: 6;
}
.this-heading {
--heading-weight: 700;
--heading-width: 100;
font-weight: var(--heading-weight);
font-stretch: calc( var(--heading-width) * 1% );
}
.this-heading.thinner {
--heading-weight: 150;
--heading-width: 80;
}
The Odyssey, Book I
Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely home; but do what he might he could not save his men, for they perished through their own sheer folly in eating the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all these things, O daughter of Jove, from whatsoever source you may know them.
A little bit
Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy.
Can go farther
Many cities did he visit, and many were the nations with whose manners and customs he was acquainted
Than one expects
Moreover he suffered much by sea while trying to save his own life and bring his men safely home
.small-card {
--h3-size: 3;
--p-size: 1.6;
}
.sidebar .small-card {
--h3-size: 2.5;
--p-size: 1.5;
}
You might be asking
What was that strange magic in Slide 24?
A variable font is a single font file that behaves like multiple fonts
—John Hudson
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
width
width
weight
weight
x-height
x-height
.width.super-floof {
font-stretch: 140%;
}
.width.petite-puffle {
font-stretch: 50%;
}
.weight.chonky-boi {
font-weight: 900;
}
.weight.skinny-minnie {
font-weight: 500;
}
.x-height.bubba-bear {
font-variation-settings: 'YTLC' 600;
}
.x-height.lil-bit {
font-variation-settings: 'YTLC' 450;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
slant
.slant.naptime {
font-style: oblique 12deg;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
Friction reduction
improving the reading experience
https://okaytype.com/typefaces/okay
calc( [size-min]em + ( [size-max] - [size-min] ) * ((100vw - [start]em ) / ( [stop] - [start] )));
https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
“Please scale from 2.25em on small screens up to 5em on largest ones, starting at viewport width of 25em and stopping at 75em or larger”
https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
https://codepen.io/jpamental/pen/MGEPEL
“The role of the typographer has changed. We no longer decide; we make suggestions”
—Tim Brown
:root {
/* default light mode colors */
--color-bg: #f9f9fd;
--color-text: #414141;
/* initial variable font values */
--text-GRAD: -0.1;
}
@media (prefers-color-scheme: dark) {
--color-text: #f9f9fd;
--color-bg: #414141;
p {
--text-GRAD: 0.25;
letter-spacing: 0.015em;
}
}
https://css-tricks.com/dark-modes-with-css
:root {
/* default light mode colors */
--color-bg: #f9f9fd;
--color-text: #414141;
/* initial variable font values */
--text-GRAD: -0.1;
}
.contrast {
/* higher contrast colors */
--color-bg: #fafafe;
--color-text: #212121;
}
.contrast p {
--text-GRAD: 0.75;
letter-spacing: 0.005em;
}
.bigtext {
--p-size-min: 1.25;
--p-size-mid: 1.375;
--p-size-max: 1.5;
}
.spacing {
--p-lh-min: 2.2;
--p-lh-mid: 2.4;
--p-lh-max: 2.6;
}
.spacing p {
word-spacing: 0.75em;
}
:root {
/* font stack */
--font-stack: "Roboto Delta", sans-serif;
--font-stack-serif: "Gimlet VF", serif;
}
.theme-alt {
font-family: var(--font-stack-serif);
}
.theme-alt p {
--text-wght: 400;
}
@media screen and (min-width: 25em) {
.theme-alt p {
--text-wght: 375;
}
@media screen and (min-width: 45em) {
.theme-alt p {
--text-wght: 350;
}
}
@media screen and (min-width: 55em) {
.theme-alt p {
--text-wght: 330;
}
}
Transfer friction: intentional tension
sometimes typography needs to be challenging
IBM Plex Sans Variable
transform
16 files
960kb
into
2 files
233kb
!
https://github.com/IBM/plex/tree/master/IBM-Plex-Sans-Variable
Avenir Next
FF Meta
Neue Frutiger
Univers Next
https://www.myfonts.com/search/%22Variable+set%22/
https://recursive.design
https://tinyurl.com/css2-announce
1
4
8
million
https://github.com/googlefonts/OswaldFont/tree/master/fonts/ttf
https://faux-foundry.com
https://faux-foundry.com
https://fonts.gstatic.com/experimental/incxfer_demo
https://fonts.gstatic.com/experimental/incxfer_demo
https://fonts.gstatic.com/experimental/incxfer_demo
What the web wants
from you (and your code)
Details & Scale
Optical Size
Match to font-size (px value)
font-variation-settings: 'opsz' [num];
Accessibility
Grade
Use for contrast and UI animation
font-variation-settings: 'GRAD' [num];
Persistence
Learn the right way, and make it reliable & repeatable
Participation
Everyone can contribute; it can't rely upon the efforts of a few
Partnership
Clients are interested when they learn. Type designers just need to know
FF Meta
by Monotype
https://www.monotype.com/fonts/variable-fonts
Input Mono
by DJR
https://djr.com (contact for info)
Jost*
by indestrictible type*
https://github.com/indestructible-type/Jost (some assembly required)
Okay
by Okay Type
https://okaytype.com/typefaces/okay
Recursive
by ArrowType & Google Fonts
https://recursive.design
Roboto Delta
by Google & Type Network
https://github.com/TypeNetwork/Roboto-Delta (use v2)
Roslindale & Roslindale Italic
by DJR
https://fontofthemonth.club
Gimlet
by DJR
https://fontofthemonth.club
Source Serif
by Adobe
https://github.com/adobe-fonts/source-serif-pro
Univers Next
by Linotype
https://www.myfonts.com/fonts/linotype/univers-next-variable-set
Proxima Nova BETA
by Mark Simonson
https://www.marksimonson.com (tell him I sent ya!)
Amstelvar
by Type Network
https://github.com/TypeNetwork/Amstelvar
Plex Sans
by IBM
https://github.com/IBM/plex/tree/master/IBM-Plex-Sans-Variable
Portada
by TypeTogether
https://www.type-together.com/portada-font
Hepta Slab & Crimson Pro
by Google Fonts
https://tinyurl.com/css2-announce
thank you
Jason Pamental
- https://rwt.io | @jpamental
- https://rwt.io/newsletter
- https://noti.st/jpamental/Cb67ZO
Finch Front-End, Edinburgh, 23-24 September, 2019
Dynamic Typographic Systems,
Modern CSS & Variable Fonts
Jason Pamental, web typographer
https://rwt.io | @jpamental