NEDcamp, 16 November, 2018

Variable Fonts

& our new typography

Jason Pamental, web typographer

Primary typeface: Roslindale VF, by David Jonathan Ross

“Type well used is invisible as type”

—Beatrice Warde

“The Crystal Goblet”, 1932

Type is never neutral

I love you

I love you

Type is how we “hear” what we read

“the idea of using three different font files to represent one word would be dismissed as quickly as the thought appeared”
—Rich Rutter, author of ‘Web Typography’

StyleGuides.io

“by designing something for an average pilot, it was literally designed to fit nobody”

We’ve created a new Crystal Goblet

&
&
&
&

then came

Variable Fonts

a
a
a
a
a
a
a
a
a
width
width
weight
weight
x-height
x-height
slant

Variable Fonts

For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. But the reality of viewing content on the web dictates that speed is the most critical aspect of design—so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights, reduced design vocabulary, and more diluted brand fidelity and voice.

Variable Fonts

For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. But the reality of viewing content on the web dictates that speed is the most critical aspect of design—so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights, reduced design vocabulary, and more diluted brand fidelity and voice.

Invariably Complicated

For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. But the reality of viewing content on the web dictates that speed is the most critical aspect of design—so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights, reduced design vocabulary, and more diluted brand fidelity and voice.

Sidebar

Optical sizing

Caslon, 72pt
Caslon, 6pt

FRANK SPRUNG
Collectible Soups

NANCY TO PARIS
Fished Mercurically

FANCY MINCE MAKER
Mechining numerations

OPTICAL FORMATTED SALAD Illumination issueing repeatedly I Practices made boredom repeat

Parlimentary Democracies in Congo P Wished her snazzy Sunday brunches Miller pokes at Baker behind Archer

Nautical miles often fool people into thinking of spins around in fancy boats, sunglasses donned with a scarf flying behind in the wind. Make mine neat but astute queen bees always see the zebra in among. The rose garden looked so good in the winter, we then let it grow outside in the summer and were amazed.

@font-face {
font-family: 'Roboto VF';
src: url('../fonts/Roboto-VF.woff2') format('woff2-variations');
font-weight: 100 900;
font-stretch: 75% 100%;
font-style: oblique 0deg 12deg;
}
.myvariablefontclass {
font-weight: 563; /* 1-999 */
font-stretch: 137%; /* 1-999 */
font-style: italic; /* binary */
font-style: oblique 12deg; /* range */
font-optical-sizing: auto; /* matches font-size */
}
.myvariablefontclass {
font-variation-settings:
'wght' 563, 'wdth' 491, 'ital' 1, 'opsz' 16;
}
.myvariablefontclass {
font-variation-settings:
'wght' 563,
'wdth' 92%,
'ital' 1,
'slnt' 12,
'opsz' 16,
'GRAD' 88,
'YTAS' 680,
'YTDE' 290;
}
Custom axes must be uppercase
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

What can my font do?

https://nightly.mozilla.org

Locks, stock, & many scaling barrels

https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
:root {
/* breakpoint variables */
--bp-small: 24.15;
--bp-medium: 43.75;
--bp-large: 60.25;
--bp-xlarge: 75;
 
/* breakpoint variables */
--h1-font-size-min: 5;
--h1-font-size-min: 10;
}
h1 {
font-size: calc( var(--h1-font-size-min) * 1em );
}
@media screen and (min-width: 24.15em) {
h1 {
font-size: calc(( var(--h1-font-size-min) * 1em ) + ( var(--h1-font-size-max) - var(--h1-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
}
}
@media screen and (min-width: 75em) {
h1 {
font-size: calc( var(—h1-font-size-max) * 1em );
}
}

Avenir Next Variable by Monotype

The evolution of typography with variable fonts

For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. Unfortunately, for many years after the advent of the web, we were unable to apply all but the most basic of typographic design to online content.

http://very-able-fonts.com
https://www.typotalks.com/videos/on-expanding-connections-aka-making-it-fit/
https://github.com/jmsole/gext-demos/tree/master
adidas
Typographic DNA
400 glyphs • 37 languages
based on craft
and empowered by technology
elevating the level of design
for every team
We
have
the power
to change
lives
through
sport

Oh, one more thing

My only reservation about letting the cat out of the bag is the prospect of being swamped with requests and queries about it, but that would give me an indication of the level of interest I suppose. :-)

Mark Simonson

Designer of Proxima Nova

Words have power

& typography is their voice

thank you

Jason Pamental

https://rwt.io | @jpamental