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.

@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: 491; /* 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

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 );
}
}
adidas
Typographic DNA
400 glyphs • 37 languages
based on craft
and empowered by technology
elevating the level of design
for every team
The Power Of
SPORT
CAN CHANGE
LIVES

Words have power

& typography is their voice

thank you

Jason Pamental

https://rwt.io | @jpamental