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

▶

variable fonts

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

Jan 01, 2024 393 likes •1.74k views

Variable Fonts and the future of typography Jason Pamental | @jpamental BostonCSS Meetup | Vermonster Designer, Writer, Tinkerer, Typographer 25 April, 2018 cosmografia del minor mondo Type well used is invisible as type

slide-1

SLIDE 1

and the future of typography

Jason Pamental | @jpamental

Designer, Writer, Tinkerer, Typographer

Variable Fonts

BostonCSS Meetup | Vermonster 25 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

Type is how we ‘hear’ what we read

slide-15

SLIDE 15

slide-16

SLIDE 16

slide-17

SLIDE 17

but tension!

slide-18

SLIDE 18

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-19

SLIDE 19

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

SLIDE 20

StyleGuides.io

slide-21

SLIDE 21

slide-22

SLIDE 22

slide-23

SLIDE 23

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

slide-24

SLIDE 24

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

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

slide-25

SLIDE 25

slide-26

SLIDE 26

Thanks Greg, Melanie & François!

slide-27

SLIDE 27

We’ve created a new   Crystal Goblet

slide-28

SLIDE 28

slide-29

SLIDE 29

Variable Fonts

then came

slide-30

SLIDE 30

a a a a a a a a a

slide-31

SLIDE 31

width width weight

79lb

weight

53lb

x-height x-height

slide-32

SLIDE 32

slant

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

Slant

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

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; font-variation-settings: 'slnt' 1000; 'slnt'

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

slide-40

SLIDE 40

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-41

SLIDE 41

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-42

SLIDE 42

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-43

SLIDE 43

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-44

SLIDE 44

But wait, there’s more

slide-45

SLIDE 45

Grade

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

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

slide-46

SLIDE 46

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-47

SLIDE 47

Grade

font-variation-settings: 'GRAD' 88; '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');

slide-55

SLIDE 55

@font-face { }

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

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

slide-66

SLIDE 66

https://nightly.mozilla.org

slide-67

SLIDE 67

https://nightly.mozilla.org

slide-68

SLIDE 68

slide-69

SLIDE 69

slide-70

SLIDE 70

Standing still, moving ahead

slide-71

SLIDE 71

slide-72

SLIDE 72

slide-73

SLIDE 73

slide-74

SLIDE 74

slide-75

SLIDE 75

slide-76

SLIDE 76

Typography for reading

Let’s talk about

slide-77

SLIDE 77

slide-78

SLIDE 78

An even more modular scale

slide-79

SLIDE 79

An even more modular scale

slide-80

SLIDE 80

Locks, stock, & many scaling barrels

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

slide-81

SLIDE 81

: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-82

SLIDE 82

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-83

SLIDE 83

slide-84

SLIDE 84

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

slide-85

SLIDE 85

slide-86

SLIDE 86

slide-87

SLIDE 87

Sidebar ☞

Optical sizing

ne shape is not for all sizes

slide-88

SLIDE 88

slide-89

SLIDE 89

Caslon, 72pt Caslon, 6pt

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

slide-90

SLIDE 90

Caslon, 72pt Caslon, 6pt

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

slide-91

SLIDE 91

Meanwhile, back in your reading experience…

slide-92

SLIDE 92

slide-93

SLIDE 93

slide-94

SLIDE 94

slide-95

SLIDE 95

slide-96

SLIDE 96

slide-97

SLIDE 97

slide-98

SLIDE 98

slide-99

SLIDE 99

slide-100

SLIDE 100

Warm heart & cold fingers

slide-101

SLIDE 101

Warm heart & cold fingers

slide-102

SLIDE 102

https://twitter.com/mandy_kerr

slide-103

SLIDE 103

Editorial design & art direction

Let’s talk about

slide-104

SLIDE 104

slide-105

SLIDE 105

slide-106

SLIDE 106

slide-107

SLIDE 107

slide-108

SLIDE 108

slide-109

SLIDE 109

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

slide-110

SLIDE 110

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

—David Sleight, Design Director at ProPublica

slide-111

SLIDE 111

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

—David Sleight, Design Director at ProPublica

slide-112

SLIDE 112

“There is no crystal goblet   for information”

—David Sleight, Design Director at ProPublica

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

https://www.youtube.com/watch?v=MYLtwQWjTW4

slide-120

SLIDE 120

slide-121

SLIDE 121

slide-122

SLIDE 122

slide-123

SLIDE 123

slide-124

SLIDE 124

slide-125

SLIDE 125

slide-126

SLIDE 126

slide-127

SLIDE 127

Type on screen is   intrinsically of the web

slide-128

SLIDE 128

One form of typography   that presents without coloring meaning or intent

slide-129

SLIDE 129

One form of design that can present any content

slide-130

SLIDE 130

One form of content that can present any voice

slide-131

SLIDE 131

Typography is intentional good

slide-132

SLIDE 132

Typography is meaning great

slide-133

SLIDE 133

Say something.

slide-134

SLIDE 134

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