Get Started for FREE
Sign up with Facebook Sign up with X
I don't have a Facebook or a X account
 Your new post is loading...
Your new post is loading...
Scoop.it!
We will look at what variable fonts are, how we can use them in our work. 
No comment yet.
Sign up to comment
Scoop.it!
In September 2016 the font world was super-excited by the announcement (by Google, Microsoft, Adobe and Apple) of the OpenType 1.8 Variable Font format. Development versions of Safari soon supported Variable Fonts via the ‘font-variation-settings’ CSS property. Chrome since added support on all platforms. Yet the technology’s success depends on being embraced by typography’s new vanguard: UX designers and front-end developers.
Scoop.it!
A collection of experiments with variable font text effects. Warning: These are really heavy on your computer.
|
Scoop.it!
OpenType Font Variations make it possible to access multiple typefaces within a family from a single resource. Take an expedition into the typographical variety available via variable fonts
Mickael Ruau's insight:
Design toolsYou may be asking yourself, “Ok, so if I’m using a font that has axes that aren’t reserved—how do I know what they’re named in the font to control them via font-variation-settings.” That’s a great question. Luckily, common design tools and operating systems are stepping up to fill this gap. Here are just a few ways you can inspect variable fonts for use in your websites.
Scoop.it!
The most fun place to experiment with layouts using variable fonts, and export front-end code right from this little web app.
|
Fallbacks and browser support
Current support is limited, but variable fonts will work today out of the box in Chrome and Safari, with support coming soon to Edge 17 and Firefox. See caniuse.com for more details.
It is possible to use @supports in you CSS to create a viable fallback:
@font-face {
/* https://github.com/TypeNetwork/Amstelvar */
font-family: AmstelvarAlpha;
src: url('../fonts/AmstelvarAlpha-VF.ttf');
font-weight: normal;
font-style: normal;
}
#font-amstelvar {
font-family: AmstelvarAlpha;
font-variation-settings: 'wdth' 400, 'wght' 98;
}
}