Weekly Platform News: CSS font-style: oblique, webhin browser extension, CSS Modules V1

In this week’s roundup, variable fonts get oblique, a new browser extension for linting, and the very first version of CSS Modules.

Use font-style: oblique on variable fonts
Some popular variable fonts have a ‘wght’ (weight) axis for displaying text at different font weights and a ‘slnt’ (slant) axis for displaying slanted text. This enables creating many font styles using a single variable font file (e.g., see the “Variable Web Typography" demo page).
You can use font-style: oblique… Read article
The post Weekly Platform News: CSS font-style: oblique, webhin browser extension, CSS Modules V1 appeared first on CSS-Tricks.

Link: https://css-tricks.com/weekly-platform-news-css-font-style-oblique-webhin-browser-extension-css-modules-v1/

Variable Fonts Arrive in Firefox 62

Firefox 62 adds support for Variable Fonts, an exciting new technology that makes it possible to create beautiful typography with a single font file. Variable fonts are now supported in all major browsers. And because great features deserve great tools, we’re hard at work building an all new Font Editor into the Firefox DevTools for Firefox 63. Or check it out today in Firefox Nightly.

Link: https://hacks.mozilla.org/2018/09/variable-fonts-arrive-in-firefox-62/

Weird things variable fonts can do

I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that’s a common use case. Just check out many of the interactive demos over at Axis-Praxis:

or
Make sure to go play around at v-fonts.com as well for loads of variable font demonstrations.
But things like boldness, width, and slantyness and just a few…
The post Weird things variable fonts can do appeared first on CSS-Tricks.

Link: https://css-tricks.com/weird-things-variable-fonts-can-do/

Font Playground

This is a wondrous little project by Wenting Zhang that showcases a series of variable fonts and lets you manipulate their settings to see the results. It’s interesting that there’s so many tools like this that have been released over the past couple of months, such as v-fonts, Axis-Praxis and Wakamai Fondue just to name a few.
Direct Link to Article — Permalink…
The post Font Playground appeared first on CSS-Tricks.

Link: https://play.typedetail.com/

Better rendering for variable fonts

I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack to fix the issue which using a text-shadow on the text that’s using the variable font:
.variable-font {
text-shadow: 0 0 0 #000; /* text color goes last here …
The post Better rendering for variable fonts appeared first on CSS-Tricks.

Link: https://twitter.com/thundernixon/status/1009878237068001280

A simple resource for finding and trying variable fonts

This is a website designed to showcase fonts that support OpenType Variations and let you drag a whole bunch of sliders around to manipulate a typeface’s width, height, and any other settings that the type designer might’ve added to the design.
I think the striking thing about this project is that I had no idea just how many variable fonts were out there in the wild until now.
Direct Link to Article — Permalink…
The post A simple resource for finding and trying variable fonts appeared first on CSS-Tricks.

Link: https://v-fonts.com/

Microsoft Edge Variable Fonts Demo

The Edge team put together a thorough demo of variable fonts, showcasing them in all of their shape-shifting and adaptive glory. Equally interesting as the demo itself is a history of web typography and where variable fonts fit in the grand scheme of things.
This demo pairs well with v-fonts.com, which is an interactive collection of variable fonts that allows you to play around with the variable features each font provides.
Direct Link to Article — Permalink…
The post Microsoft Edge Variable Fonts Demo appeared first on CSS-Tricks.

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

Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts!

The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so.
Preload and font-display are landing in Safari and Firefox.
Variable fonts are shipping everywhere.

Using custom fonts in a performant way is becoming far easier. Let’s take a peek at some things we can do when using custom fonts to make sure we’re being as performant as we can be.…

Three Techniques for Performant Custom Font Usage is a post from CSS-Tricks

Link: https://css-tricks.com/three-techniques-performant-custom-font-usage/