A presentation at dotCSS 2018 in in Paris, France by Mandy Michael
and the future of web design. PRESENTED BY Mandy Michael
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
@mandy_kerr
020f15 @mandy_kerr
Weight Axis @mandy_kerr
@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
@mandy_kerr
@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
@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
Variable fonts are a game changer for how we use typography on the web. With improvements to performance and responsive typography, variable fonts deliver practical improvements for designers and developers alike.
We’ll explore what variable fonts are, how to use on your website as well as the benefits of variable fonts including reduced payload, responsiveness, optical sizing and animations.
With an increase in support and creation of variable fonts in the past year, now is the time to start understanding, exploring and experimenting the exciting future ahead for typography on the web.
The following resources were mentioned during the presentation or are useful additional information.
A great resource for Variable Fonts
A great resource for variable fonts
A really incredible and detailed guide on using Variable fonts on the web! High recommend reading if you want to know more.
Here’s what was said about this presentation on social media.
for free. You
can too.