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

Diamond Sponsor

Platinum Sponsors

Gold Sponsors

Tamás Hajas Front End Drupal Developer

•

20 countries •

46+ offices •

2500+ professionals •

400+ engineers Digital experiences and products

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

What are variable fonts ?

Ab

Ab Ab Ab

Ab

Ab

Ab

Ab Ab Ab

Ab

Ab

Static font files

Ab

Ab Ab Ab

Ab

Ab

Variable font file

A

A

A

A

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

What

advantages using variable fonts may provide?

Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold 4

files 520 KB

Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold 4

files 520 KB VS

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

file
4

files 520 KB VS

Advantage 1.

Less data to download

https://dropbox.design

Advantage 2.

More responsive text

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

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

Advantage 3.

It’s animatable

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

Advantage 4.

Optical size 
 is back

Advantage 5.

Granular control

Advantage 6.

More typographic richness

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

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

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

What are some potential

pitfalls

to look out for?

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

Where to find them

?

•

v-fonts.com

•

bit.ly/vfont-sheet •

twitter.com/variablefonts •

www.axis-praxis.org •

wakamaifondue.com

How to use

variable fonts 
 on the web

now?

How to use

variable fonts 
 on the web

now?

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

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

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

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

But wait!!

But wait!!

Can I use…?

html {

font-family : ' Amstelvar Alpha ' ,

serif ; font-variation-settings: " wght "

400 ; }

html {

font-family : ' Amstelvar Alpha ' ,

serif ; font-variation-settings: " wght "

400 ; } ??

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

400 ; }

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

783 ; }

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

100 ; }

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

50 ; }

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

10 ; }

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

72 ; }

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

0 ; }

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

1 ; }

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

0 ; }

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

8 ; }

registered axis custom axes VS

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

420 ; }

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

570 ; }

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

How to use

variable fonts 
 on the web

when we have CSS4 Fonts Module implemented?

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;

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

src : url ( ' AmstelvarAlpha.woff2 ' ) 


} format ( ' woff2-variations ' );

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

src : url ( ' AmstelvarAlpha.woff2 ' ) 


} format ( ' woff2 '

supports variations );

How to support

Drupal content editors

?

• Create themes using variable fonts!

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

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

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

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

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

Questions? thamas.github.io

Thanks for your 
 attention! thamas.github.io