Inter 4.0; font-variation-settings; Featured Foundry: The League of Moveable Type

The release of Inter 4.0 made an already great week that much better, so it was super fun to be able to post about it today, along with some other resources to help y’all find some new fonts, and make use of the features of these variable fonts.

TL;DR

This is an AI-generated summary of today’s Drop.

(Perplexity failed to generate links, again.)

• The first section discusses the release of Inter 4.0, a font that has been carefully crafted for digital screens. The font, which started as an experiment in 2016, now offers a wide range of weights and styles, with over 2,000 glyphs covering 147 languages. Inter 4.0 is characterized by its tall x-height, which aids in the readability of mixed-case and lower-case text, making it an excellent choice for web apps, ebooks, and any digital project where legibility is crucial. The font comes in both separate, standard OTF/TTF format and as two variable fonts (plain/italic).

• The middle section provides a brief tutorial on how to use variable fonts with the font-variation-settings CSS directive. The syntax is straightforward, allowing users to use the default settings or set values for variable font axis names. The post warns that axis names are case-sensitive and that font-variation-settings will always override those set using the corresponding basic font properties, e.g., font-weight, regardless of where they appear in the cascade.

• The final section features The League of Moveable Type, a foundry that was created to raise the standards of web design. The League’s fonts are all subject to the SIL Open Font License, meaning they’re free to use, modify, and distribute. The League is committed to maintaining a high standard of design and promoting the work of talented typographers. They also offer educational resources about typography, making them a valuable resource for both seasoned designers and those just starting out in the field.

Inter 4.0

Inter 4.0 is out! I’ve been a big fan of it for a while and was elated to learn about this new version and dig into the “why”. You’ve absolutely seen Inter on the web as designers (real ones, not amateurs like me) appreciate how it has been carefully crafted and designed for these glowing rectangles we stare at all day.

Inter started as an experiment in 2016 to build a perfectly pixel-fitting font at a specific small size (11px). However, the initial approach made it difficult to read longer text, so the project was rebooted with a different approach, focusing on crafting glyphs and kerning in a way that made for more variation in rhythm and smoother vertical and horizontal stems.

Version 4.0 offers a wide range of weights and styles, with over 2,000 glyphs covering 147 languages O_O. The font family features nine different weights, each with its associated italic, for a total of 18 different styles. This wide range of styles allows for greater expressiveness and flexibility in design.

One of the key features of Inter 4.0 is its tall x-height, which aids in the readability of mixed-case and lower-case text. This makes it an excellent choice for web apps, ebooks, and any digital project where legibility is crucial.

We’ve dabbled a bit with variable fonts in previous Drops, and Inter 4.0 comes in both separate, standard OTF/TTF format and as two variable fonts (plain/italic). If you use multiple styles in a web context, leaning on the variable font can lead to significant reductions in font file sizes, making it a more efficient choice for your content design.

In addition to its performance benefits, Inter 4.0 also supports a wide range of OpenType features, such as slashed zero and tabular numbers for data display (a huge plus for datavis folks). It’s also an excellent choice for UI design, as it provides a neutral tone and high readability. Its wide range of weights and styles makes it suitable for logos, branding, and marketing materials, as well as user interfaces and digital content

I’m working on pairing it and the new Monaspace fonts for some projects I’m cooking up, and highly recommend giving Inter a go if you haven’t used it before.

font-variation-settings

“Hey hrbrmstr…you keep showcasing these cool variable fonts, but how do we use them?”

I have no idea if that thought has entered the minds of any Drop readers, but I came to this realization as I worked on the Inter section, and felt pretty daft for not giving a short in-Drop ‘splainer on this, before.

In an odd twist of sense, you can machinate these variable fonts with the font-variation-settings CSS directive. MDN has your back, of course, but that doesn’t mean we can’t do a bit of details-digging here.

The syntax is pretty straightforward. You can use the default settings with font-variation-settings: normal; or set values for variable font axis names like font-variation-settings: "XHGT" 0.7;. Here, “XHGT” is the four-letter axis name and 0.7 is the value.

p {
  font-variation-settings: "wght" 700, "wdth" 110;
}

In this example, we’re adjusting the weight (“wght”) and width (“wdth”) of the font.

One super cool thing about font-variation-settings is that it can be used in conjunction with CSS Custom Properties and media queries to adapt the variable font settings based on user preferences.

body {
  --base-weight: 400;
  --base-grade: 0;
  font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade);
}

In this example, we’re using CSS variables to set the weight and grade of the font.

There are some “footguns” when it comes to this property. Axis names are case-sensitive. Use of any registered axis names must be in lower case, and custom axes must be in upper case. Also, be aware that font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade.

While Inter has a fun playground, I’ve got a starter Observable notebook with Inter loaded and some dynamic settings bound to controls. Perhaps load up some of the other variable fonts we’ve talked about and add in other controls to see what you can come up with.

Featured Foundry: The League of Moveable Type

The League of Moveable Type (GH) foundry was birthed out of a desire to raise the standards of web design. Back in 2009, when browsers were just beginning to support more than the standard dozen or so web-friendly fonts, The League emerged as a beacon of hope for designers seeking to push the boundaries of online typography. The League’s fonts are all subject to the SIL Open Font License, meaning they’re free to use, modify, and distribute. This open-source approach has not only democratized access to high-quality fonts but also fostered a vibrant community of contributors.

But The League of Moveable Type isn’t just about providing free fonts. It’s about maintaining a high standard of design and promoting the work of talented typographers. Not every free or open-source font makes it into their collection. Instead, they hand-pick the best typefaces that align with their vision for their catalog. This commitment to quality has earned them a solid reputation in the design community.

The League’s open-source ethos extends beyond just providing free fonts. They’re also committed to educating fellow humans about typography. They offer a newsletter, blog posts, and small books about how to use free fonts. This educational aspect, combined with their high-quality font offerings, makes The League a valuable resource for both seasoned designers and those just starting out in the field.

Take a moment to hit their bold/striking site (I really like the design) and linger to learn more about typography from some of the best in the field (and, pick up a classy font or three while you’re there).

FIN

If you use any of the fonts from the League, or kick Inter’s tyres, drop a note! ☮️