An ode to the Inter typeface

Inter might be the most useful typeface available for free today. No typeface is right for every situation, but you’d be hard-pressed to find an open-source alternative that matches its simple beauty, amazing flexibility, and stunning attention to detail. Conspicuously in the lineage of Helvetica — and especially Apple’s newer San Francisco — Inter is just as beautiful in 11px Regular as it is in 50px Bold.

Increasingly, sites are turning to the ‘system font stack’ for speed, legibility, and aesthetics. With Inter, you can achieve similar benefits while ensuring your product looks the same to every user. If you’re into the Swiss style, look no further.

This post compares Inter to well-known alternatives and describes its quirks and features.

Versus Roboto

Inter started as a fork of Google’s Roboto system font, but as you can see above, it quickly departed stylistically. Roboto appears slightly condensed, with straightened sides and a peculiar unevenness in terminal angle designed to mimic handwriting¹². Also visible above is the tight tracking Roboto sports by default, revealing its origins in small mobile phone screens, where space is at a premium.

A quick glance of both typefaces on Google Fonts might convince you Inter is, to quote Reddit, "essentially a very fast Roboto clone" (referring to the fact that Inter is available as a variable font, so browsers only need to download a single file). But don’t be fooled, they are very different beasts. Inter is much closer to a classic neo-grotesque and very capable of commanding attention at large sizes or representing your brand identity.

Versus San Francisco

The best comparison is to Apple’s San Francisco (known as SF Pro). To my eye, they are almost indistinguishable. Careful inspection reveals the following differences in the image above:

1. the crotch³ of the y descends lower in SF Pro, matching the baseline of the other counters and giving it a lighter feel;
2. the counter of the a curves upwards in Inter, a charming touch it shares with Helvetica; and
3. Inter is slightly heavier at the same weight.

The similarity is a complement to Inter, since with San Francisco, Apple set out to improve on the notoriously unimprovable Helvetica — and arguably succeeded. Helvetica-derivatives typically lose some of its character and San Francisco is no exception. See the R and a, for example, which became very plain in comparison:

But Apple did succeed in improving the legibility problems at small sizes, and the rounder punctuation feels modern and approachable. Overall it’s a beautiful, if conservative, update of a classic. The only problem was Apple that didn’t release it with an open license — thus the need for Inter.

For text/UI elements

Inter has a very large x-height and slightly open apertures in the lower case glyphs (highlighted below).

Its origins in small-size UI elements enable it to achieve excellent legibility even lower than 11px — no small feat, usually the domain of system fonts. This is perhaps Inter’s best selling point: you gain the legibility of a system font, but you can be sure it will look the same to every user of your app.

As with other neo-grotesques, you might accuse it of feeling anonymous or generic, especially in long paragraphs in the regular weight. Compared to open-source competitors, it certainly doesn’t have the whimsy of the more geometric Work Sans or the friendliness of Open Sans. But it does have incredible clarity, beautiful rhythm, and a clean Swiss aesthetic.

For display

At the time of writing, the display face is a beta release. It’s a subtle refinement of the core design with tighter tracking, a lower x-height, and closed terminals, all visible below:

The terminals are, in fact, one of the curious aspects of the non-display design: the apertures of the lower case e, a, s, and g are slightly open — but surprisingly not the c. Presumably these are legibility optimisations for small sizes (where they are almost imperceptible), and accordingly they are absent from the display face.

For headings, the Medium weight around 44px looks very elegant. High-impact marketing copy looks awesome in Semi-bold from 50px and above. You can find examples at the Inter site, typ.io, One Page Love, and Typewolf.

Features

Inter has an extensive feature-set, more commonly seen in proprietary fonts. The following are worth noting:

• Weights range from 100-900, all of which are usable, giving designers incredible flexibility.
• It’s available as a variable font, which means you can deliver the whole range of weights to the browser in a single smaller file.
• There are many character alternates, both for disambiguation and stylistic reasons, e.g. a slashed zero and a single-story a.
• Language support is fantastic, thanks in part to its Roboto ancestry.

Conclusion

Inter provides a stunning, modern, extremely flexible neo-grotesque typeface for the web and beyond. For those of us looking for high-quality free and open source typefaces, it has massively broadened space of possible designs. Thank you to Rasmus Andersson for his brilliant contribution to the open source community.