Viewed: 3769

The best ink trap typefaces for websites

Design in 6 minutes

If I think back to the first time I saw a typeface with ink traps, it was Retina by Frere-Jones. I wasn’t immediately fond of the style at first, but trends have a habit of growing on you.

I’ve wanted an opportunity to look at this particular style of type—as I’ve worked on my portfolio and I consider a redesign for this website. Within this post I’m going to detail the things to look for and a bunch of typefaces.

What details are you looking for?

The majority in this post will be ‘ink trap’ by definition, but some may use similarly exaggerated forms. As you can see in the example, Averta has a steady tapering towards the joins. Whereas, Whyte has angular notches, which give a sense of the individual letters having part missing.

Looking at another less apparent example, with Degular Display the tapering happens far quicker to create a stronger contrast. Unlike Whyte it isn’t as like a ridge, creating a different feel.

Fonts

Let’s get into the fonts that have this feature.

Whyte Inktrap

In terms of Ink trap fonts, I feel like Whyte could be the ‘Circular’ of this style. The Figma website was the first time I’d come across Whyte and I’ve seen it used a few times elsewhere.

It feels futuristic, because of its curves on the ascenders—which goes against the feeling of a traditional grotesque. It surprised me how it remains legible at small sizes—even in the heavier weights—despite the ink traps being as prominent as they are.

Degular

Available on Adobe Fonts and one of my favourite typefaces I’ve come across recently—I had to use it in my portfolio.

The first typeface by OH no Type Co featured in this article. Which comes in three optical sizes, each with ink traps that lead to wonderfully exaggerated curves at the joins.

Retina

It’s important to note the microplus version is where we see the ink traps.

In smallish sized lighter weights, it adds extra character. In larger sized heavier weights it feels overdone—which makes it have a much more limited use case.

GT Flexa

An incredibly flexible and versatile typeface—to be fair it’s in the name—as the website will demonstrate. You could create endless compositions, I wish I could afford the full thing.

I enjoy the wide crossbars on the lowercase ‘t’ and ear of the lowercase ‘r’. They add a uniqueness.

Neue Machina

A typeface which has a lot of character, it has deep ridges at the joins for a real exaggerated style.

It has an almost monospace feel with the lowercase ‘a’, ‘i’ and ‘l’ which gives it a quite futuristic feel. But combining abrupt curves with lovely geometry, it feels unique but familiar.

Juane Grande

A typeface that throws out a lot of conventions. The bolder weights are particularly nice, letters push the limits of legibility.

It’s as if this is what the Didone of the sans serif world would look like—with the characteristic contrast between thick and thin lines.

Halyard (text & micro)

At first it looks like a pretty plain sans serif, but on closer inspection at the micro variation, it feels delicate and legible.

The micro italic really embraces the ink traps and almost as if the letterforms were written. The italic lowercase ‘h’ and ‘p’ in the light weight are excellent.

On a similar level, the text version is slightly more subtle, but just as nice.

Albeit each of these have different intended use cases. I’d definitely use the micro italic with some tighter letter spacing for more decorative uses.

Fraktion Sans

Another option from Pangram Pangram, with plenty of weights and styles, it’s an option which is more on the compact side.

Like many of the choices in this article, it has an angular style about it. The lowercase ‘a’ is identical (or almost) to its monospace counterpart—which sets this typeface apart.

Uxum Grotesque

Uxum features a more subtle approach to ink traps. They have the depth of other typefaces, but are much finer. It creates a nice harmony and allows for unique characteristics—which sets itself apart from your Circular and FF Mark styles.

Polysans

Polysans is similar to Uxum, in the sense it has much finer ink traps. It has a Helvetica feel about it, especially with lighter weights. The difference being it comes with proper italics.

Covik Sans / Mono

The final OH no Type Co. option and it’s a push to include this as it doesn’t feature ink traps. It has a contrast to suggest, which is why I want to include it. It’s different to a lot of the type in this article too.

F37 Jan

If you’re looking for geometric type, then look no further than F37 Jan. It’s inspired by Matthew Carter’s Bell Centennial and Jan Tschichold’s Untitled Sans Serif—which makes for a great blend of styles.

The one thing I’d like to see is heavier weights as part of the set.

Tomato Grotesk

A typeface with a few unique properties of its own along with the ink traps. The double storey ‘a’ and lowercase ‘k’ have a unique style to them compared to others in this post.

Google Fonts

I’ve always got to include a Google option where I possibly can. But as of writing, it’s hard to come by this trend on Google Fonts and there is the one option.

Darker Grotesque

This appears to be the only example I could find that you could argue features ink traps. Subtle in areas and clearer in others, particularly on lowercase letters. The abrupt curves on ascenders and descenders, make this a unique choice—similar to a few others in this post.

Looking towards uppercase letters like ‘A’, ‘M’ and ’N’ you can see where they join it’s angular. There’s a lot of nice details in this typeface.

Scraping the barrel mentions go to Karla and DM Sans. As I was going to include these with the caveat they aren’t before I stumbled across Darker Grotesque.

What’s the purpose of an ink trap

Ink traps retain legibility at smaller sizes in print. They’re carefully designed parts of type, which disappear when printed—due to the ink bleeding and filling in the gaps.

While it may display a certain way on screen, the appearance will change when printed. If you pay attention to printed material and notice the type isn’t as crisp as it could be, this could be down to the choice of typeface.

What’s this got to do with websites?

It can serve the same purpose on the web. Looking at the examples at smaller type sizes, ink traps help by opening spaces in the letters further. This can make legibility better at those sizes.

A style that’s grown on me

As I reflect on it, it’s a nice response to the “plainer” sans serif typefaces that have dominated since 2015 give or take. It gives us more creative options for our designs without hindering legibility and readability of some of the more experimental typefaces out there.

Nonetheless, it’s an interesting use of a design detail that otherwise fulfilled a purpose. It’s grown on me and I feel it’s going to gain more popularity than it already has.


If you found this article useful, why not support the upkeep of this website?

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites.

I also do the occasional design critique, which you get access to for being a subscriber—send a design through after subscribing. Also, there’s some older templates and post files included. You can unsubscribe anytime.