Variable Fonts and the future of typography Jason Pamental | - - PowerPoint PPT Presentation

▶
variable fonts
SMART_READER_LITE
LIVE PREVIEW

Variable Fonts and the future of typography Jason Pamental | - - PowerPoint PPT Presentation

Aug 15, 2023 274 likes •1.6k views

Variable Fonts and the future of typography Jason Pamental | @jpamental TYPO Labs | Berlin Designer, Writer, Tinkerer, Typographer 12 April, 2018 cosmografia del minor mondo Type well used is invisible as type Beatrice Warde

slide-1
SLIDE 1

and the future of typography

Jason Pamental | @jpamental

Designer, Writer, Tinkerer, Typographer

Variable Fonts

TYPO Labs | Berlin 12 April, 2018

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

“cosmografia del 
 minor mondo”

slide-8
SLIDE 8
slide-9
SLIDE 9

“Type well used is invisible as type”

—Beatrice Warde

“The Crystal Goblet”, 1932

slide-10
SLIDE 10

Type is never neutral

slide-11
SLIDE 11

I love you

slide-12
SLIDE 12

I love you

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

Type is how we ‘hear’ what we read

slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18

but tension!

slide-19
SLIDE 19

Can we set this in Helvetica? Change to “T ype should be seen and not heard” Stop asking for fonts. You can’t have them. We have to load more javascript

  • engineering
slide-20
SLIDE 20

“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’

slide-21
SLIDE 21

StyleGuides.io

slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24

https://99percentinvisible.org/episode/on-average/

slide-25
SLIDE 25

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

https://99percentinvisible.org/episode/on-average/

slide-26
SLIDE 26
slide-27
SLIDE 27

Thanks Greg, Melanie & François!

slide-28
SLIDE 28

We’ve created a new 
 Crystal Goblet

slide-29
SLIDE 29
slide-30
SLIDE 30

Variable Fonts

then came

slide-31
SLIDE 31

a a a a a a a a a

slide-32
SLIDE 32

width width weight

79lb

weight

53lb

x-height x-height

slide-33
SLIDE 33

Registered Axes

slide-34
SLIDE 34

Weight

'wght' font-weight: 88; font-variation-settings: 'wght' 88;

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-35
SLIDE 35

Weight

'wght' font-weight: 88; font-variation-settings: 'wght' 88; font-weight: 264; font-variation-settings: 'wght' 264;

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-36
SLIDE 36

Width

font-stretch: 265; font-variation-settings: 'wdth' 265; 'wdth'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-37
SLIDE 37

Width

font-stretch: 265; font-variation-settings: 'wdth' 265; font-stretch: 402; font-variation-settings: 'wdth' 402; 'wdth'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-38
SLIDE 38

Width

font-stretch: 265; font-variation-settings: 'wdth' 265; 'wdth'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-39
SLIDE 39

Slant

font-variation-settings: 'slnt' 0; 'slnt'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-40
SLIDE 40

Slant

font-variation-settings: 'slnt' 0; font-variation-settings: 'slnt' 1000; 'slnt'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-41
SLIDE 41

Italic

font-style: normal; font-variation-settings: 'ital' 0; 'ital'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-42
SLIDE 42

Italic

font-style: normal; font-variation-settings: 'ital' 0; font-style: italic; font-variation-settings: 'ital' 1; 'ital'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-43
SLIDE 43

Optical Size

font-variation-settings: 'opsz' 12; 'opsz'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-44
SLIDE 44

Optical Size

font-variation-settings: 'opsz' 12; font-variation-settings: 'opsz' 80; 'opsz'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-45
SLIDE 45

But wait, there’s more

slide-46
SLIDE 46

Grade

font-variation-settings: 'GRAD' 88; 'GRAD'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-47
SLIDE 47

Grade

font-variation-settings: 'GRAD' 88; font-variation-settings: 'GRAD' 150; 'GRAD'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-48
SLIDE 48

Ascenders & Descenders

font-variation-settings:'YTAS' 750,'YTDE' 250; 'YTAS' & 'YTDE'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-49
SLIDE 49

Ascenders & Descenders

font-variation-settings:'YTAS' 750,'YTDE' 250; font-variation-settings:'YTAS' 680,'YTDE' 190; 'YTAS' & 'YTDE'

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

slide-50
SLIDE 50

Mayhem

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

font-variation-settings: 'BLDA' 0, 'TRMD' 0, 'TRMC' 0, 'SKLD' 0, 'TRML' 0, 'SKLA' 0, 'TRMF' 0, 'TRMK' 0, 'BLDB' 0, 'WMX2' 900, 'TRMB' 0, 'TRMA' 0, 'SKLB' 0, 'TRMG' 0, 'TRME' 0;

um—all of them

slide-51
SLIDE 51

Mayhem

Featuring Output Sans by DJR, Louvette by CJ Dunn, & Amstelvar & Decovar by David Berlow & Type Network

font-variation-settings: 'BLDA' 0, 'TRMD' 0, 'TRMC' 0, 'SKLD' 0, 'TRML' 0, 'SKLA' 0, 'TRMF' 0, 'TRMK' 0, 'BLDB' 0, 'WMX2' 900, 'TRMB' 0, 'TRMA' 0, 'SKLB' 0, 'TRMG' 0, 'TRME' 0; font-variation-settings: 'BLDA' 0, 'TRMD' 0, 'TRMC' 750, 'SKLD' 0, 'TRML' 250, 'SKLA' 1000, 'TRMF' 250, 'TRMK' 250, 'BLDB' 1000, 'WMX2' 750, 'TRMB' 500, 'TRMA' 500, 'SKLB' 1000, 'TRMG' 750, 'TRME' 500;

um—all of them

slide-52
SLIDE 52

superpolator.com

slide-53
SLIDE 53

So, you want to see code then

slide-54
SLIDE 54

@font-face { }

font-family: 'Amstelvar'; src: url('amstelvar.ttf') format('truetype'); ————————————————————————————————————————————— src: url('amstelvar.ttf') format('truetype-variations');

slide-55
SLIDE 55

.myvariablefontclass { } .myvariablefontclass { }

font-weight: 563; /* 1-999 */ font-stretch: 491; /* 1-999 */ font-style: italic; /* binary */ font-optical-sizing: auto; /* matches font-size */ font-variation-settings: 'wght' 563, 'wdth' 491, 'ital' 1, 'opsz' 16;

slide-56
SLIDE 56

.myvariablefontclass { }

font-variation-settings: 'wght' 563, 'wdth' 491, 'ital' 1, 'opsz' 16, ‘GRAD' 88, 'YTAS' 680, 'YTDE' 190 ;

} Custom axes must be uppercase

slide-57
SLIDE 57

iOS

Soon

slide-58
SLIDE 58

PSA: you can help

W3C Github CSS Fonts Level 3 W3C Github CSS Fonts Level 4

slide-59
SLIDE 59

axis-praxis.org

slide-60
SLIDE 60

v-fonts.com

slide-61
SLIDE 61

https://github.com/Monotype/variableFont.js

slide-62
SLIDE 62

https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/

slide-63
SLIDE 63

https://variablefonts.typenetwork.com/demos/responsive-typography.html

slide-64
SLIDE 64

https://www.mozilla.org/en-US/fjrefox/channel/desktop/#nightly

slide-65
SLIDE 65

https://www.mozilla.org/en-US/fjrefox/channel/desktop/#nightly

slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68

Standing still, moving ahead

slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73
slide-74
SLIDE 74

Typography for reading

Let’s talk about

slide-75
SLIDE 75
slide-76
SLIDE 76

An even more modular scale

slide-77
SLIDE 77

An even more modular scale

slide-78
SLIDE 78

Locks, stock, & many scaling barrels

https://blog.typekit.com/2016/08/17/fmexible-typography-with-css-locks/

slide-79
SLIDE 79

:root { }

/* breakpoint variables */

  • -bp-small: 24.15;
  • -bp-medium: 43.75;
  • -bp-large: 60.25;
  • -bp-xlarge: 75;

/* h1 variables */

  • -h1-font-size-min: 5;
  • -h1-font-size-max: 10;
slide-80
SLIDE 80

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 );

slide-81
SLIDE 81
slide-82
SLIDE 82

font-size font-stretch font-optical-sizing line-height asc/desc font-size font-stretch font-optical-sizing line-height

slide-83
SLIDE 83
slide-84
SLIDE 84

Sidebar ☞

Optical sizing

  • ne shape is not for all sizes
slide-85
SLIDE 85
slide-86
SLIDE 86

Caslon, 72pt Caslon, 6pt

https://en.wikipedia.org/wiki/Typeface

slide-87
SLIDE 87

Caslon, 72pt Caslon, 6pt

https://en.wikipedia.org/wiki/Typeface Amstelvar, no optical sizing Amstelvar, with optical sizing

slide-88
SLIDE 88

Meanwhile, back in your reading experience…

slide-89
SLIDE 89
slide-90
SLIDE 90
slide-91
SLIDE 91
slide-92
SLIDE 92
slide-93
SLIDE 93
slide-94
SLIDE 94
slide-95
SLIDE 95
slide-96
SLIDE 96
slide-97
SLIDE 97

Warm heart & cold fingers

slide-98
SLIDE 98

Warm heart & cold fingers

slide-99
SLIDE 99

https://twitter.com/mandy_kerr

slide-100
SLIDE 100

Editorial design & art direction

Let’s talk about

slide-101
SLIDE 101
slide-102
SLIDE 102
slide-103
SLIDE 103
slide-104
SLIDE 104
slide-105
SLIDE 105
slide-106
SLIDE 106
slide-107
SLIDE 107

I tried to find a list of 
 news headlines in Facebook. I couldn’t.

slide-108
SLIDE 108

“When you decontextualize the news […] you eliminate or impede the ability for those verifications to be there”

—David Sleight, Design Director at ProPublica

slide-109
SLIDE 109

“When you decontextualize the news […] you eliminate or impede the ability for those verifications to be there”

—David Sleight, Design Director at ProPublica

slide-110
SLIDE 110
slide-111
SLIDE 111
slide-112
SLIDE 112
slide-113
SLIDE 113
slide-114
SLIDE 114
slide-115
SLIDE 115
slide-116
SLIDE 116
slide-117
SLIDE 117
slide-118
SLIDE 118
slide-119
SLIDE 119

“There is no crystal goblet 
 for information”

—David Sleight, Design Director at ProPublica

slide-120
SLIDE 120
slide-121
SLIDE 121
slide-122
SLIDE 122
slide-123
SLIDE 123
slide-124
SLIDE 124
slide-125
SLIDE 125

Type on screen is 
 intrinsically of the web

slide-126
SLIDE 126

One form of typography 
 that presents without coloring meaning or intent

slide-127
SLIDE 127

One form of design that can present any content

slide-128
SLIDE 128

One form of content that can present any voice

slide-129
SLIDE 129

Typography is intentional good

slide-130
SLIDE 130

Typography is meaning great

slide-131
SLIDE 131

Say something.

slide-132
SLIDE 132

Jason Pamental | @jpamental rwt.io typefaces: Roslindale, Gimlet, Output Sans (DJR) Dunbar, Louvette (CJ Dunn) Amstelvar, Decovar 
 (Type Network) photography: unless otherwise noted, photos by @jpamental

Thank you