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

Oct 15, 2023 238 likes •1.56k views

Variable Fonts and the future of typography Jason Pamental | @jpamental An Event Apart | Seattle Designer, Writer, Tinkerer, Typographer 4 April, 2018 cosmografia del minor mondo Type well used is invisible as type Beatrice

slide-1
SLIDE 1

and the future of typography

Jason Pamental | @jpamental

Designer, Writer, Tinkerer, Typographer

Variable Fonts

An Event Apart | Seattle 4 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
slide-8
SLIDE 8
slide-9
SLIDE 9

“cosmografia del 
 minor mondo”

slide-10
SLIDE 10
slide-11
SLIDE 11

“Type well used is invisible as type”

—Beatrice Warde

“The Crystal Goblet”, 1932

slide-12
SLIDE 12

Type is never neutral

slide-13
SLIDE 13

I love you

slide-14
SLIDE 14

I love you

slide-15
SLIDE 15
slide-16
SLIDE 16

Type is how we ‘hear’ what we read

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

but tension!

slide-20
SLIDE 20

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-21
SLIDE 21

“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-22
SLIDE 22

StyleGuides.io

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

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

slide-26
SLIDE 26

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

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

slide-27
SLIDE 27
slide-28
SLIDE 28

Thanks Greg, Melanie & François!

slide-29
SLIDE 29

We’ve created a new 
 Crystal Goblet

slide-30
SLIDE 30
slide-31
SLIDE 31

Variable Fonts

then came

slide-32
SLIDE 32

a a a a a a a a a

slide-33
SLIDE 33

width width weight

79lb

weight

53lb

x-height x-height

slide-34
SLIDE 34

Registered Axes

slide-35
SLIDE 35

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-36
SLIDE 36

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-37
SLIDE 37

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-38
SLIDE 38

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-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 { }

font-weight: 563; /* 1-999 */ font-stretch: 491; /* 1-999 */ font-style: italic; /* binary */ font-optical-sizing: auto; /* matches font-size */

slide-56
SLIDE 56

.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-57
SLIDE 57

.myvariablefontclass { }

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

slide-58
SLIDE 58

.myvariablefontclass { }

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

} Custom axes must be uppercase

slide-59
SLIDE 59

iOS

Soon

slide-60
SLIDE 60

PSA: you can help

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

slide-61
SLIDE 61

axis-praxis.org

slide-62
SLIDE 62

v-fonts.com

slide-63
SLIDE 63

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

slide-64
SLIDE 64

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

slide-65
SLIDE 65

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

slide-66
SLIDE 66

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

slide-67
SLIDE 67

Standing still, moving ahead

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

Typography for reading

Let’s talk about

slide-74
SLIDE 74
slide-75
SLIDE 75

An even more modular scale

slide-76
SLIDE 76

An even more modular scale

slide-77
SLIDE 77

Locks, stock, & many scaling barrels

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

slide-78
SLIDE 78

: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-79
SLIDE 79

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-80
SLIDE 80
slide-81
SLIDE 81

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

slide-82
SLIDE 82
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

Warm heart & cold fingers

slide-96
SLIDE 96

Warm heart & cold fingers

slide-97
SLIDE 97

Editorial design & art direction

Let’s talk about

slide-98
SLIDE 98
slide-99
SLIDE 99
slide-100
SLIDE 100
slide-101
SLIDE 101
slide-102
SLIDE 102
slide-103
SLIDE 103
slide-104
SLIDE 104

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

slide-105
SLIDE 105

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

—David Sleight, Design Director at ProPublica

slide-106
SLIDE 106

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

—David Sleight, Design Director at ProPublica

slide-107
SLIDE 107
slide-108
SLIDE 108
slide-109
SLIDE 109
slide-110
SLIDE 110
slide-111
SLIDE 111
slide-112
SLIDE 112
slide-113
SLIDE 113
slide-114
SLIDE 114
slide-115
SLIDE 115

“There is no crystal goblet 
 for information”

—David Sleight, Design Director at ProPublica

slide-116
SLIDE 116
slide-117
SLIDE 117
slide-118
SLIDE 118
slide-119
SLIDE 119
slide-120
SLIDE 120
slide-121
SLIDE 121

Type on screen is 
 intrinsically of the web

slide-122
SLIDE 122

One form of typography 
 that presents without coloring meaning or intent

slide-123
SLIDE 123

One form of typography 
 that presents without coloring meaning or intent

slide-124
SLIDE 124

One form of design that can present any content

slide-125
SLIDE 125

One form of design that can present any content

slide-126
SLIDE 126

One form of content that can present any voice

slide-127
SLIDE 127

One form of content that can present any voice

slide-128
SLIDE 128

Typography is intentional good

slide-129
SLIDE 129

Typography is meaning great

slide-130
SLIDE 130

Say something.

slide-131
SLIDE 131

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