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.
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.
Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity.
Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation. Let me show you how to do it by taking a fairly simple component as an example.
The post Theming With Variables: Globals and Locals appeared first on CSS-Tricks.
Explore what the world is searching. Enter a search term or a topic.
