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

May 03, 2023 215 likes •1.47k views

Variable Fonts and the future of typography Jason Pamental | @jpamental Design 4 Drupal | Cambridge Designer, Writer, Tinkerer, Typographer 27 June, 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

Design 4 Drupal | Cambridge 27 June, 2018

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

“cosmografia del 
 minor mondo”

slide-7
SLIDE 7
slide-8
SLIDE 8

“Type well used is invisible as type”

—Beatrice Warde

“The Crystal Goblet”, 1932

slide-9
SLIDE 9

https://fontsinuse.com/uses/12723/odyssey-of-homer-limited-editions-club

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

slant

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

font-style: normal;

slide-40
SLIDE 40

font-style: normal;

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

font-style: oblique 20deg;

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

slide-64
SLIDE 64

https://www.monotype.com/fonts/variable-fonts/

slide-65
SLIDE 65

https://codepen.io/jpamental/pen/MGEPEL/

slide-66
SLIDE 66

https://nightly.mozilla.org

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

Warm heart & cold fingers

slide-94
SLIDE 94

Warm heart & cold fingers

slide-95
SLIDE 95

https://twitter.com/mandy_kerr

slide-96
SLIDE 96

Editorial design & art direction

Let’s talk about

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

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

slide-104
SLIDE 104
slide-105
SLIDE 105
slide-106
SLIDE 106
slide-107
SLIDE 107

https://codepen.io/jpamental/pen/oqJRbo

slide-108
SLIDE 108

https://codepen.io/jpamental/pen/oqJRbo

slide-109
SLIDE 109

https://codepen.io/jpamental/pen/oqJRbo

slide-110
SLIDE 110

https://codepen.io/jpamental/pen/oqJRbo

slide-111
SLIDE 111

https://codepen.io/jpamental/pen/oqJRbo

slide-112
SLIDE 112

https://codepen.io/jpamental/full/MGEPEL/

slide-113
SLIDE 113

https://gesiowka.adactio.com

slide-114
SLIDE 114
slide-115
SLIDE 115
slide-116
SLIDE 116

Type on screen is 
 intrinsically of the web

slide-117
SLIDE 117

One form of typography 
 that presents without coloring meaning or intent

slide-118
SLIDE 118

One form of design that can present any content

slide-119
SLIDE 119

Typography is intentional good

slide-120
SLIDE 120

Typography is meaning great

slide-121
SLIDE 121

Say something.

slide-122
SLIDE 122

Thank you

slide-123
SLIDE 123

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

Thank you