Variable Fonts and the Future of Web Design

and the future of web design. PRESENTED BY Mandy Michael

I am a Developer that loves to Design. @mandy_kerr

But I love experimenting with CSS @mandy_kerr

@mandy_kerr

020f15 @mandy_kerr

Weight Axis @mandy_kerr

@mandy_kerr

900 810 700 600 500 400 360 200 Source Sans Variable Fonts 394kb @mandy_kerr

900 810 700 600 500 400 360 200 234kb 234kb* 235kb 233kb 234kb* 230kb 234kb* 222kb 1856kb Source Sans Standard Fonts @mandy_kerr

900 810 700 600 500 400 360 200 234kb 234kb* 235kb 233kb 234kb* 230kb 234kb* 222kb 924kb Standard Fonts @mandy_kerr

Variable fonts can improve actual and perceived performance. @mandy_kerr

font-family: "Source Sans Variable”, Variable Fallback, Arial, sans-serif; @mandy_kerr

Layout shifting caused by mis-matched fallback and custom font. @mandy_kerr

meowni.ca/font-style-matcher Attempts to match the fonts as closely as possible. @mandy_kerr

The implementation of variable fonts in CSS is very similar to what we do right now. @mandy_kerr

@font-face { font-family: "Source Sans Variable"; src: url("source-sans-variable.woff") format("woff-variations"); font-weight: 200 700; } @mandy_kerr

@font-face { font-family: "Source Sans Variable"; src: url("source-sans-variable.woff") format("woff-variations"); font-weight: 200 700; } The available range — you cannot access any values outside of this range. @mandy_kerr

h1 { font-family: "Source Sans Variable”; font-weight: 658; } @mandy_kerr

h1 { font-family: “My Variable Font”; font-variation-settings:'wght' 375, 'INLI' 88; } A named axis for font weight A custom axis called inline @mandy_kerr

h1 { font-family:"Source Sans", sans-serif; font-weight: 700; } @supports (font-variation-settings: normal) { h1 { font-family: “Decovar"; font-variation-settings: "INLI" 88; } } @mandy_kerr

When we are not limited by technical considerations, creativity can determine our choices. @mandy_kerr

Font: Decovar by David Berlow @mandy_kerr

Because variable fonts can have an interpolated range of values, we can create fluid variations. @mandy_kerr

h1 { font-family: "Decovar"; font-variation-settings: "INLI" 1000, "SWRM" 0; } @mandy_kerr

h1 { font-family: "Decovar"; font-variation-settings: "INLI" 0, “SWRM” 1000; } @mandy_kerr

h1 { font-family: "Decovar"; font-variation-settings: “INLI" 0, “SWRM" 1000; } @keyframes grow { 0% { font-variation-settings: "INLI" 1000, "SWRM" 1000; } } 50% { font-variation-settings: "INLI" 1000, "SWRM" 0; } @mandy_kerr

h1 { font-family: "Decovar"; font-variation-settings: “INLI" 0, “SWRM" 1000; animation: grow 4s linear infinite; } @keyframes grow { 0% { font-variation-settings: "INLI" 1000, "SWRM" 1000; } } 50% { font-variation-settings: "INLI" 1000, "SWRM" 0; } @mandy_kerr

Font: Decovar by David Berlow @mandy_kerr

Font: Duos Writer by Underware @mandy_kerr

Font: Gingham by Christoph Koeberlin @mandy_kerr

Font: Decovar by David Berlow @mandy_kerr

Font: Wind VF by Hansje van Halem @mandy_kerr

Font: Zycon by David Berlow @mandy_kerr

Font: Decovar by David Berlow @mandy_kerr

Font: Chee by OH No Type Co @mandy_kerr

Variable fonts allow web typography to adapt to screens, environments and our devices or technologies. @mandy_kerr

@mandy_kerr

by Andrew Johnson and Erik van Blokland https://medium.com/@aetherpoint/reading-distance-and-variable-fonts-1f6e1ffd1879 @mandy_kerr

@mandy_kerr

AMBIENT LIGHT @mandy_kerr

CSS Media Queries, Level 5 will give us more control over things like environment, light, contrast and colour scheme directly in our CSS. @mandy_kerr

h1 { font-variation-settings: "TEMP" 0; transition: all 4s linear; } @media (prefers-color-scheme: dark) { h1 { font-variation-settings: "TEMP" 1000; } } @mandy_kerr

@mandy_kerr

We can improve the readability and accessibility of our content. This is a level of control that is unprecedented. @mandy_kerr

When we are not limited by technical considerations, creativity can determine our choices. @mandy_kerr

100 200 240 320 400 500 560 640 720 800 900 1 x serif font 1 x sans serif 11 x weights 226kb @mandy_kerr

200 300 500 600 850 900 1 x serif font 1 x sans serif 6 x weights @mandy_kerr

@mandy_kerr

There has never been a better time to create for the web. @mandy_kerr

Thank you. @mandy_kerr @mandymichael

This presentation was proudly brought to you by Arial Black and Times New Roman. @mandy_kerr