Variable Fonts in the Real World

A presentation at Drupal Developer Days Lisbon 2018 in July 2018 in Lisbon, Portugal by Tamás Hajas

Slide 1

LISBON 2018 DRUPAL DEVELOPER DAYS Variable fonts in the real world Ta m á s H AJAS

Slide 2

Diamond Sponsor

Slide 3

Platinum Sponsors

Slide 4

Gold Sponsors

Slide 5

Tamás Hajas Front End Drupal Developer

Slide 6

•

20 countries •

46+ offices •

2500+ professionals •

400+ engineers Digital experiences and products

Slide 7

LISBON 2018 DRUPAL DEVELOPER DAYS Variable fonts in the real world Ta m á s H AJAS

Slide 8

What are variable fonts ?

Slide 9

Ab

Ab Ab Ab

Ab

Ab

Slide 10

Ab

Ab Ab Ab

Ab

Ab

Static font files

Slide 11

Ab

Ab Ab Ab

Ab

Ab

Variable font file

Slide 12

A

Slide 13

A

Slide 14

Slide 15

Slide 16

A

Slide 17

A

Slide 18

https://twitter.com/genramirez/status/1008152208037302272

Slide 19

What

advantages using variable fonts may provide?

Slide 20

Slide 21

Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold 4

files 520 KB

Slide 22

Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold 4

files 520 KB VS

Slide 23

Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold Noboto Flex 179 KB 1

file
4

files 520 KB VS

Slide 24

Advantage 1.

Less data to download

Slide 25

https://dropbox.design

Slide 26

Advantage 2.

More responsive text

Slide 27

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

Slide 28

https://www.axis-praxis.org/playground/horse/

Slide 29

Advantage 3.

It’s animatable

Slide 30

https://justanotherfoundry.com/size-specific-adjustments-to-type-designs

Slide 31

Advantage 4.

Optical size   is back

Slide 32

Advantage 5.

Granular control

Slide 33

Advantage 6.

More typographic richness

Slide 34

https://codepen.io/jpamental/details/OvzpEw

Slide 35

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

Slide 36

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

Slide 37

What are some potential

pitfalls

to look out for?

Slide 38

• Too many options (UX) • More typographic knowledge is needed • Performance gain isn’t always guaranteed • Features and results can be very different • Licensing, price • ???

Slide 39

Where to find them

?

Slide 40

•

v-fonts.com

•

bit.ly/vfont-sheet •

twitter.com/variablefonts •

www.axis-praxis.org •

wakamaifondue.com

Slide 41

How to use

variable fonts   on the web

now?

Slide 42

How to use

variable fonts   on the web

now?

Slide 43

@font-face { font-family : ' Amstelvar Alpha ' ;

src : url ( ' AmstelvarAlpha.woff2 ' ) format ( ' woff2-variations ' ); }

Slide 44

@font-face { font-family : ' Amstelvar Alpha ' ;

src : url ( ' AmstelvarAlpha.woff2 ' ) format ( 'woff2-variations' ); }

Slide 45

But wait!!

Slide 46

But wait!!

Can I use…?

Slide 47

Slide 48

Slide 49

html {

font-family : ' Amstelvar Alpha ' ,

serif ; font-variation-settings: " wght "

400 ; }

Slide 50

html {

font-family : ' Amstelvar Alpha ' ,

serif ; font-variation-settings: " wght "

400 ; } ??

Slide 51

.variable-font { /* Weight axis */ font-variation-settings: " wght "

400 ; }

Slide 52

.variable-font { /* Weight axis */ font-variation-settings: " wght "

783 ; }

Slide 53

.variable-font { /* Width axis */ font-variation-settings: " wdht "

100 ; }

Slide 54

.variable-font { /* Width axis */ font-variation-settings: " wdht "

50 ; }

Slide 55

.variable-font { /* Optical sizing axis */ font-variation-settings: " opsz "

10 ; }

Slide 56

.variable-font { /* Optical sizing axis */ font-variation-settings: " opsz "

72 ; }

Slide 57

.variable-font { /* Italic axis */ font-variation-settings: " ital "

0 ; }

Slide 58

.variable-font { /* Italic axis */ font-variation-settings: " ital "

1 ; }

Slide 59

.variable-font { /* Slant axis */ font-variation-settings: " slnt "

0 ; }

Slide 60

.variable-font { /* Slant axis */ font-variation-settings: " slnt "

8 ; }

Slide 61

registered axis custom axes VS

Slide 62

.variable-font { /* Custom axis */ font-variation-settings: " YTLC "

420 ; }

Slide 63

.variable-font { /* Custom axis */ font-variation-settings: " YTLC "

570 ; }

Slide 64

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

Slide 65

How to use

variable fonts   on the web

when we have CSS4 Fonts Module implemented?

Slide 66

font-variation-setting CSS4 high level props "wght" 718; font-weight: 718; "wdht" 100; font-strech: 100; "opsz" 72; font-optical-sizing: auto; "ital" 0; font-style: italic; "slnt" 8; font-style: oblique 8deg; "YTLC" 718;

Slide 67

@font-face { font-family : ' Amstelvar Alpha ' ;

src : url ( ' AmstelvarAlpha.woff2 ' )  

} format ( ' woff2-variations ' );

Slide 68

@font-face { font-family : ' Amstelvar Alpha ' ;

src : url ( ' AmstelvarAlpha.woff2 ' )  

} format ( ' woff2 '

supports variations );

Slide 69

How to support

Drupal content editors

?

Slide 70

• Create themes using variable fonts!

Slide 71

• Create themes using variable fonts! • Make predefined styles available in CKEditor

Slide 72

• Create themes using variable fonts! • Make predefined styles available in CKEditor • Create Paragraphs with custom font setting options

Slide 73

• Create themes using variable fonts! • Make predefined styles available in CKEditor • Create Paragraphs with custom font setting options

Slide 74

–Jason Pamental “Words have power and   typography is their voice”

Slide 75

• Oliver Schöndorfer ( blogpost ) • Richard Rutter ( blogpost 1 , blogpost 2 ) • Roel Nieskens ( wakanamifondue.com ) Credits

Slide 76

Questions? thamas.github.io

Slide 77

Thanks for your   attention! thamas.github.io