View profile

#62 • Mono Duo Quattro

Beautiful type friends, 👋 I can't help but to start the first edition of 2019 without thanking every
Coffee Table Typography
#62 • Mono Duo Quattro
By Coffee Table Typography • Issue #62 • View online
Beautiful type friends, 👋
I can’t help but to start the first edition of 2019 without thanking every single one of my Patreons who’ve been continuously supporting this newsletter. All the times (and there were plenty) I thought I couldn’t do this anymore, in all of them I thought about everyone believing in the newsletter with a dollar or two each month. That thought is very fuelling and keeps this typography work going.
So, dear Rik Ward, Aceler Chua, Aleksandra Runowska, Carlos Gavina, Chen Hui Jing, Gonçalo, Jacqueline Jensen, Menges Design, Pedro Almeida, Qi Xi, Rachel Baker, Rafael Conde, Richard Littauer, and Tzu Ching — my deepest gratitude for your vote of confidence 🙏
The talented people at Okay Type have come up with a redesigned website over the holidays, and with it even more typefaces, updates and licenses. Spend a little time paying them a visit, and as I always do, contemplating just how gorgeous Harriet Text and Display are.
There’s also one more addition to the stunning type arsenal over at v-fonts.com, this time by David Jonathan Ross himself. Roslindale is an interesting type experiment for variable fonts, allowing you to control the slant independently from the italicisation of the characters. Upright italics never looked so good and made so much sense!
Still on David’s work, we have Output, which is finally just about to be officially released as I type these words. It’s such an elegant sans-serif, I highly encourage you to play around with it and read David’s notes on it.
Marcin Wichary wrote about a magnificent Twitter thread on “the ghosts of technology in today’s language” that’s a must read (and maybe even memorise) for any language aficionado. A fantastic reminder that language shapes how we talk about our actions, and of just how long they can stick around even after they don’t make much sense anymore.
I’ve accidentally stumbled upon a Kickstarter project, Ithaca Scrollery, which promises to bring back… scrolls. Scrolls! Sort of medieval scrolls, but not really. If you feel like reading a few classic titles in a surprisingly portable scroll format, check them out.
And lastly but not least, I completely forgot to feature Noemi Stauffer’s (who I had the pleasure to meet over the holidays 👋) own article on the best new type foundries of 2018. A great read with tons of bookmarkable type content.
May your 2019 be full of character, and only lacking in lame and pretentious typography puns.
—Ricardo

A Typographic Xmas for iA Writer
Christmas may be behind us already (or still ahead, depending on how you choose to perceive it), but the people at iA Writer have been hard at work to deliver one of their biggest updates yet. And, of course, it’s deliciously typographical.
The 5.2 version sees the introduction of 3 variable fonts, which gives the app the ability to provide literally thousands of typographical variations. It also received some updates regarding line height and space — but all of this doesn’t matter if you don’t use the iA Writer app… today, I’m sharing with you some of their reasoning for their updates.
The typefaces:
Mono, Duo and Quattro are the typefaces on display, all more or less similar but serving different purposes. As it turns out, there’s as many people desiring the classical typewriter, wide-space look between characters as there are people wanting a more optically adjusted font. You can see how Quattro saves space on smaller screens below, which would be ideal for iA Writer on mobile:
Quattro being the space-saver
Quattro being the space-saver
In practice, they look like the following:
It’s remarkable to hear that all these typefaces have been redesigned and built upon the fantastic IBM Plex; stripped out of its most characteristic features, of course. Here’s what they’ve done to achieve so:
Using square dots instead of round ones, adjusting the swirls and curves on a, j, f, l, t, y, Q, and lots of non-latin characters, we unified mono, Duo, and Quattro under a common look. This was a lot of work.
Their usage of variable fonts is quite clever, and something I would love to see more of on the web. Behind the scenes, several axis like optical weight and spacing are adjusted to beautifully adapt to different sizes, screens and even background colours. As they themselves have put it,
In iA Writer 5.2 we automatically adjust the optical weight depending on the type size you use. Weights change depending on size. The font is getting thinner and tighter spaced as we increase the type size. This has not been possible in the past.
Not just size, but different screens demand different weights, too. Fonts look different on screens; some screens have more or fewer pixels, like retina and high-density retina. Depending on what device you use, we apply different gradings.
That’s why iA Writer 5.2 tones the optical weight down another 5% for night mode. Who does such crazy things? Crazy people.
Crazy people indeed. “…toning the optical weight down another 5% for night mode” — do you hear this, every app who redesigned recently a night mode?
Another interesting detail is the implementation of dynamic line height, since we need a higher line height, the wider the column width. This makes sure that the eye can still easily jump to the next line, even with long lines. According to iA,
Depending on how large your type and wide your text columns are, we calculate the appropriate line height. We also take in account that small fonts need more line height than big fonts and that line height for non-proportional fonts requires to be a bit bigger than for proportional fonts (due to differences in gray value)
There are a ton more delicious little details to learn more about, so please make sure to read the article in its entirety. And even if you don’t use iA Writer yourself, a little reminder that all the typefaces are available for free on Github.
Airbnb Design — Working Type
A really interesting breakdown on how Airbnb Design introduced their newly released typeface, introduced in May last year, (Cereal), across their branding and design system. Both from a product and design-engineering perspective, which makes this a read worth dissecting into.
Typeface design is like any other design project. Our business needs included brand differentiation, the ability to span brand and product, and text legibility in the UI. Through research, user testing, and observation over the years, we learned that, especially in small sizes, the our previous typeface was hard to read.
Choosing the type
Typography doesn’t exist in a vacuum — it’s rooted in the culture and tradition of a given language. It’s not invented from thin air, it’s a continuation of existing traditions. Some of the characters chosen for Cereal were inspired by Airbnb pre-existing design, which is typically known to be a recipe for disaster (remember Youtube’s typeface? Yeah). So it is interesting to read how they connected both brand and UI.
With UI typography, the content, screen sizes, and qualities are dynamic — text size, copy length, format, and device resolution all vary. The UI must support complex or critical moments when the community needs to read, understand, or take action based on the information provided, while connecting back to the brand.
Following the ideation stage, we started to receive iterations of the font from Dalton Maag. Each character takes times to create and modify, which meant we had to work with a limited set in the beginning.
Here’s the most interesting part of this: testing the typeface with the UI, especially without using the same copy text everywhere, which is always an unrealistic approach to real-world UI usage. Unable to find a limited-character copy generator, Airbnb came up with their own tool to produce words.
To resemble a natural sentence structure, the tool had to include nouns, verbs, and adjectives. I started with the English dictionary, accompanied by regular expressions and AWK programming in Unix, to create a set of words that only contained the characters we had available. I manually removed words that didn’t feel worth showcasing, and added a few names and places such as Airbnb and Alice.
Airbnb's sentence generator
Airbnb's sentence generator
UI Testing
According to them, being armed with a custom content generator made it much easier to test the font in realistic designs. While testing in UI, there was a huge focus on legibility at all sizes, balanced weights for hierarchy, and non-distracting texture — all qualities of a functional typeface.
Distinct letterforms and apertures: If letters have similar shapes or look alike — such as ‘e’, ‘c’, and ‘o’, or in words like Illinois — the eyes and brain have to work harder to process. By distinguishing similar characters and widening the apertures, like the opening in the letter ‘c’ for example, we made it easier to read.
A few other considerations and advice is shared in the article, like x-height for example, which I won’t mention here for brevity’s sake. It is interesting however, to point out the seemingly exhaustive process that the team went through in order to tone down the typeface’s personality:
“Type that’s too decorated or playful can distract or cause people to miss important information, therefore failing its intended purpose.”
What testing taught us: Over about six months, we created hundreds of screens and tested around 30 iterations for style and weight. This type of testing was extremely useful because it allowed us to judge the typeface by its merits in UI. Many of the typeface features — especially the texture — were difficult to assess until we saw it in text-heavy UI.
That’s 6 months of work, producing hundreds of screens and 30 styles for each weight. There’s a lot more information about the practical design methods used to develop this process, so make sure to check the full article yourself. Or you can play with Cereal, too.
Q: What defines a "Book" weight?
A question which was sent to The Alphabettes got my attention. You know how some type families have the Book weight? Maybe Thin, Book, Bold, Extra Bold… why Book, and not Regular? Well, that’s the question exactly:
Is ‘Book’ supposed to be lighter or bolder than ‘Regular’? — Lisa asks.
And what an interesting question it is. What would you say? Is a Book weight slightly lighter or slightly bolder than Regular? The Alphabettes have put up a poll, and the results were in about this expectation:
58% of the votes claim it should be lighter, while 42% claim it should be darker. There are historic, conceptual and technical considerations for why it might be so uneven.
These puzzled me. But some facts:
The reasoning for ‘Book’ to be lighter than ‘Regular’ is as good as the one for it to be bolder. A lighter weight ‘Book’ style may have been made to counteract the print gain of paperback printing, and a darker ‘Book’ style may have been made to look better when smaller (just as optical sizes tend to gain weight towards the smaller end).
If it is reasonable for a weight to be two different things, perhaps the best solution is to avoid the name ‘Book’, at least in combination with ‘Regular’. 
Doing my own research on the origins of the Book terminology, I came across an interesting answer on Quora:
“Book” was traditionally (in metal) an exceedingly rare style designation. I was only ever aware of it as referring to the regular weights of Bodoni and Futura, and a subsequent perusal of McGrew’s index adds only Graydon Book. There was also Craw Clarendon Book. Why certain foundries chose to use those terms rather than just leave the family name plain for the default (presumably body text weight), which was the common practice for what we now term “Regular”, is open to conjecture.
Funnily enough, it ends with two similar conclusions: 1) it depends. And 2) don’t ship a type family with both ‘Regular’ and 'Book’ as fonts.
Typeface Du Jour ✍️
Inter UI Family
How can one not feature Inter UI, as everything about this typeface, and how it’s presented, could easily fill the entire newsletter? Plus of all, it’s OpenSource, meaning than you can and should download it straight away.
Inter UI is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.
The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate “0” from “o”, tabular numbers, etc.
Its samples and showcase section quickly shows you just how much potential this typeface has for any kind of UI work. But perhaps the most astonishing work of all is the Labs section, where you can play with literally every single OpenType variation. Get it, pay it some much deserved love.
On the Coffee Scene ☕️
Jerry Seinfeld Of Comedians In Cars Getting Coffee: The Sprudge Interview
Did you enjoy this issue?
Coffee Table Typography

A love for words, letters, language—and coffee.
A digest of curated resources, articles and knowledge sharing about the beauty of typography; in design, on the web, or books.
You will read these over your morning cup of coffee, while the aromas of freshly ground beans are still in the air, quickly realising that words are beautiful and that you might need that second cup after all.

If you don't want these updates anymore, please unsubscribe here
If you were forwarded this newsletter and you like it, you can subscribe here
Powered by Revue
With 💙 from Montreal, Canada