You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.
A look at the font stack that Github is using.
The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.
In fact, you can do more than saving the date: you can snap up a super early bird ticket for whopping £85 saving.
Better Typography with Font Variants - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
A quick guide to all the
font-variant-... stuff in CSS.
A rather handsome looking free serif typeface based on Gargantua. Spectral is available under an Open Font License.
These experiments with transitioning variable font styles on hover might be silly, but I can see the potential for some beautiful interaction design.
Rob walks us through the typographic choices for his recent redesign:
Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.
A nice free and open source font designed for digital interfaces:
Inter UI is a font for highly legible text on computer screens.
Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.
Interestingly, they set a flag for subsequent visits using
localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.
This forthcoming sci-fi quarterly publication looks intriguing:
Each issue contains a part of a previously untranslated novel as well as essays looking at the world through the lens of different writers.
I’m loving their typeface. It’s called Marvin. It was specially made for the magazine, and available to download and use for personal use for free.
Marvin gets its distinctive voice not only from its Art Nouveau vibe but also from its almost geometrically perfect construction. Its roundness and familiarity with Bauhaus typefaces shows its roots in geometric sans serifs at the same time.
A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?
Interface is a font for highly legible text on computer screens.
And it’s free!
Everyone’s been talking about
font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at
font-display: optional and
font-display: fallback as well.
This is a fun game (I scored a measly 73/100). The idea is to develop a feeling for the balance between font-size, line-height, and line length …just like the three sides of an equilateral triangle.
Too many of them still set line-height, font size and line width as independent features when in fact they should all be considered together. The equilateral triangle is a perfect representation of how the three features work in harmony.
Fontlandia is yours to explore.
By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.
I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.
Rich has posted a sneak peek of one part of his book on Ev’s blog.
Here’s one of them new-fangled variable fonts that’re all the rage. And this one’s designed by David Berlow. And it’s free!
I like the feel of this typeface a lot.
Bubbling, strong, but very accurate.