Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.
Rich enumerates some changes in how you set up variable fonts. So if you’re pulling in a font that has weight as an axis, you can now add this to your
font-weight: 1 999;
I’m already very excited about variable fonts—I’m going to be positively giddy by the time Ampersand rolls around (which, by the way, you should totally go to—it’s going to be sooo good!).
Here’s an interesting twist on variable fonts: one of variable axes is serificity …serificousness …serifness. The serifs. The serifs, is what I’m trying to say.
One small point: it seems a bit of a shame that there are separate files for regular and italic—it would’ve been nice to have a variable axis for italicity …italicousness …ah, screw it.
Conceding that a typeface is a tool sounds dangerously close to an excuse: toolmakers cannot be held responsible for things made with their tools, or the tasks leading up to those things. They are only responsible for the making of the tool itself. If a person decides to use a hammer to drive home a screw, then so be it. The hammer was only designed for nails. It’s not our fault the typography doesn’t look good. The typeface is just a tool — you’re using it wrong.
I’m soooo excited that Mandy is speaking at Ampersand here in Brighton in June!
Be there or be square.
A simple resource for finding and trying variable fonts.
A handy browser-based tool for examining font files to see which features they support.
Tal Leming’s thoroughly delightful (and obsessive) account of designing the 90 Minutes typeface for U.S. Soccer.
FIFA has strict regulations that govern the size and stroke weight of numbers and letters used on official match uniforms. This made me unbelievably paranoid. I had a nightmare that one of the national teams would be set for kickoff of an important match and the referee would suddenly blow the whistle and say, “Hey, hey, hey! The bottom stroke of that 2 is 1 mm too light. The United States must forfeit this match!”
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.
I like a good em dash, me.
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.