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 20, 2022 25 likes •977 views

Variable Fonts and the future of typography Jason Pamental | @jpamental SmashingTV | Online Designer, Writer, Tinkerer, Typographer 18 September, 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

SmashingTV | Online 18 September, 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

Type is never neutral

slide-10
SLIDE 10

I love you

slide-11
SLIDE 11

I love you

slide-12
SLIDE 12
slide-13
SLIDE 13

Type is how we ‘hear’ what we read

slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

but tension!

slide-17
SLIDE 17

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

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

StyleGuides.io

slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

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

slide-23
SLIDE 23

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

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

slide-24
SLIDE 24
slide-25
SLIDE 25

Thanks Greg, Melanie & François!

slide-26
SLIDE 26

We’ve created a new 
 Crystal Goblet

slide-27
SLIDE 27
slide-28
SLIDE 28

Variable Fonts

then came

slide-29
SLIDE 29

a a a a a a a a a

slide-30
SLIDE 30

width width weight

79lb

weight

53lb

x-height x-height

slide-31
SLIDE 31

slant

slide-32
SLIDE 32

Registered Axes

slide-33
SLIDE 33

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

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

Width

font-stretch: 80%; font-variation-settings: 'wdth' 80; 'wdth'

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

slide-36
SLIDE 36

Width

font-stretch: 80%; font-variation-settings: 'wdth' 80; font-stretch: 100%; font-variation-settings: 'wdth' 100; 'wdth'

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

slide-37
SLIDE 37

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

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

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

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

Optical Size

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

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

font-optical-sizing: auto;

slide-42
SLIDE 42

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

font-optical-sizing: auto;

slide-43
SLIDE 43

But wait, there’s more

slide-44
SLIDE 44

Grade

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

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

slide-45
SLIDE 45

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

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

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

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

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

superpolator.com

slide-51
SLIDE 51

So, you want to see code then

slide-52
SLIDE 52

@font-face { }

font-family: 'Amstelvar'; src: url('amstelvar.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 75% 125%; font-style: oblique 0deg 12deg;

slide-53
SLIDE 53

.myvariablefontclass { } .myvariablefontclass { }

font-weight: 563; /* 1-999 */ font-stretch: 95%; /* 50-200(ish) */ font-style: italic; /* binary */ font-optical-sizing: auto; /* matches font-size */ font-variation-settings: 'wght' 563, 'wdth' 95, 'ital' 1, 'opsz' 16;

slide-54
SLIDE 54

.myvariablefontclass { } font-variation-settings: 'wght' 563, 'wdth' 95, 'ital' 1, 'opsz' 16, ‘GRAD' 88, 'YTAS' 680, 'YTDE' 190 ;

slide-55
SLIDE 55

.myvariablefontclass { } font-variation-settings: 'wght' 563, 'wdth' 95, 'ital' 1, 'opsz' 16, ‘GRAD' 88, 'YTAS' 680, 'YTDE' 190; } Custom axes must be uppercase

slide-56
SLIDE 56

iOS

slide-57
SLIDE 57

PSA: you can help

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

slide-58
SLIDE 58

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

slide-59
SLIDE 59

axis-praxis.org

slide-60
SLIDE 60

v-fonts.com

slide-61
SLIDE 61

https://play.typedetail.com

slide-62
SLIDE 62

https://wakamaifondue.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://www.monotype.com/fonts/variable-fonts/

slide-67
SLIDE 67

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

slide-68
SLIDE 68

https://zeichenschatz.net/demos/vf/variable-web-typo/

slide-69
SLIDE 69

https://nightly.mozilla.org

slide-70
SLIDE 70
slide-71
SLIDE 71

Typography for reading

Let’s talk about

slide-72
SLIDE 72
slide-73
SLIDE 73

An even more modular scale

slide-74
SLIDE 74

An even more modular scale

slide-75
SLIDE 75

Locks, stock, & many scaling barrels

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

slide-76
SLIDE 76

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

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-78
SLIDE 78
slide-79
SLIDE 79

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

slide-80
SLIDE 80
slide-81
SLIDE 81

Sidebar ☞

Optical sizing

  • ne shape is not for all sizes
slide-82
SLIDE 82
slide-83
SLIDE 83

Caslon, 72pt Caslon, 6pt

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

slide-84
SLIDE 84

Caslon, 72pt Caslon, 6pt

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

slide-85
SLIDE 85

Meanwhile, back in your reading experience…

slide-86
SLIDE 86
slide-87
SLIDE 87
slide-88
SLIDE 88
slide-89
SLIDE 89
slide-90
SLIDE 90
slide-91
SLIDE 91

Warm heart & cold fingers

slide-92
SLIDE 92

Warm heart & cold fingers

slide-93
SLIDE 93

https://twitter.com/mandy_kerr

slide-94
SLIDE 94
  • Lets. Go. Coding :)
slide-95
SLIDE 95

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