A presentation at Drupal Developer Days Lisbon 2018 in in Lisbon, Portugal by Tamás Hajas
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-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
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.