San Francisco, CA

A Recipe for Setting Type

I’m thinking of a simple set of instructions, like a guidebook or an illustration, that details how to make a website with accessible and engaging typography. I’m thinking beyond tips or tricks such as “use this typeface,” instead I want something along the lines of a cook book: ‘Here are the ingredients you need’ says the chef, ‘but feel free to experiment and learn with these rules in mind.

So, what would a recipe for good typography on the web look like?

The answer to that question is always going to be a rather complex and long-winded one, but I think there are a few simple relationships at work here. Just like a fire that requires heat, fuel and oxygen, there are three components that a paragraph of text requires, with each component dependent on and influencing the others: line-height, font-size, and the max-width CSS properties.

We can argue about which typeface might be the best in this case or that, yet for a while now I’ve believed that discussions involving the correct mixture of these three ingredients are far more lucrative and useful for the reader.

On this note, Tim Brown mentioned a while back that in web typography there can be a certain amount of pressure applied to a block of text for various reasons. For example, the width of a component will change due to the width of the viewport or device, however the other properties, such as line-height and font-size, can’t really adapt to this change without requiring us to write a lot more CSS.

There’s a natural bond here, between these relationships, that’s mostly being ignored when it comes to web development and I think the difficulty lies in the design of CSS itself. Since we don’t have element queries just yet we have to sort of guess which is the least-worst combination of these three properties or we have to customise each element by hand, with a million media queries inside to help us ease that pressure.

But now that an interest in responsive typography has serious traction in the community with variable fonts, I’d like to see a simpler approach to ensuring that this relationship isn’t ever under too much pressure.

Anyway, that’s what I’ve been thinking for the last week as I design a new typography framework for our team: how do I make that relationship obvious and easy to apply to a specific view? How can we ensure a clear system in CSS that provides just enough flexibility without being too demanding and obtuse for everyone?

New Type Releases

The Frere-Jones foundry announced Retina a short while ago which comes in two styles: Standard and the horrifying, Frankenstein-esque MicroPlus:

Screenshot 2016-11-05 15.15.20.png

Retina’s MicroPlus sizes are designed for smaller bits of text and once you start looking closely, it’s here that things start to get interesting and beautiful. From the specimen site:

Retina MicroPlus uses exaggerated proportions and details to preserve the identity of each letter and word. Deep-cut notches absorb ink in print and further reinforce the gesture of each shape, on screens as well as paper.

This work is the result of years of careful research into setting type for small print sizes. But here’s how it works: because the MicroPlus series of letterforms are riddled with grooves and freakish bends in the shapes our eyes will fill in the gaps when you scale those letters down to small sizes. Suddenly those irregularities disappear:

retina-fd8689.gif

And, as Tim described in more detail, Retina can now be licensed for use with Typekit, too. More on this in a bit.


A couple of weeks ago there was an awful lot of talk about Noto and its companion Noto Serif. This is an ongoing project by both Monotype and Google, but on the surface of things not much seems to be going on in terms of pure eye-candy:

Screenshot 2016-11-05 15.20.34.png

If I were to imagine what sort of typeface would be created in a boardroom then Noto would be the first image to be conjured. I see many previous designs buried within and so I can’t help but think of Stephen Coles’ rant on the Frankenfont when I think of Noto.

However, the Noto project wasn’t intended to make a beautiful typeface at all. Instead, the goal was to make a collection of typefaces that can fully support every language on Earth:

When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little boxes to indicate your device doesn’t have a font to display the text.

Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”. Noto has multiple styles and weights, and is freely available to all.

Commonly, many typefaces only support a tiny fraction of the more than six thousand languages that are spoken today. And it’s important to remember that the most important goal of text is to be read, first and foremost, rather than it just be pleasing to us armchair typographers.

The team made a cute video that describes the design process and challenges that lay ahead of them:


The Department of Typography and Graphic Communication at the University of Reading has updated their website with work from the type design class of 2016 and oh boy oh boy oh boy.

That’s 14 new typefaces to gawk at all at once:

Above: Ikkat by Rob Pratley

Look at the italics of Byron or Marjolein:

Above: Byron by Gor Jihanian

Or gasp and wonder at the Arabic glyphs of Labiba and Jali. Or take a look at the Greek forms in Amikal, the Latin, Sinhala and Tamil shapes in Maname:

Above: Maname by Pathum Egodawatta

Over on the TypeNetwork, Victoria Rushton just published Embury Text, which is a beautiful text face:

Embury_Lede

In a wonderful write up about her process, Victoria also walks through the design:

Part of what formed Embury is that I had aspired to make a text face before, but didn’t make it text-face-like enough—tall enough x-height, simple enough serifs, wide open counters—to work. So I was determined to do that this time, and the pendulum swung to super sturdiness; very wide with very high x-heights and fairly tall small caps. There would be no mistaking, by myself or by you, that this could be used small for reading.

I can’t wait to use Embury in an upcoming project.


I’m not sure if this is a recent release, but OhNo Type has published Vulf Mono, designed specifically for the band Vulfpeck.

1-UsrpdcQ-z1KyFfVHOhKlLg.png

The designer James Edmondson wrote about the story behind the type family and the whole design process. It’s lovely to hear that James worked on constructing musical dingbats in all four weights for the occasion, too.

1-lla9QqswCfRpc1GLqLa7HQ.png

As a side note, I kinda think of Vulf Mono as Nitti’s cooler, weirder step brother.


The Commercial Type foundry published Robinson by Greg Gazdowicz and I particularly adore the italics:

Screenshot 2016-11-05 15.36.11.png

From the specimen page:

Robinson is evocative of American book cover lettering from the middle of the 20th century while feeling cleanly contemporary. The romans are plainspoken, with proportions more typical of a grotesque than written forms. The italics show a more explicit connection to calligraphy, but have the same dry and stripped down approach to details seen in the romans.


Sharp Grotesk by the Sharp Type foundry was released a couple of weeks ago and it’s just as loud and boisterous as a grotesk ought to be, full of bold forms with a striking lack of white space between each character:

Screenshot 2016-11-05 16.16.36.png


Speaking of grotesks, the website for the GT America typeface is one of the most beautiful type specimens I’ve ever seen. In fact, it’s such a good website that it’s a little difficult to appreciate the type it’s trying to sell.

Screenshot 2016-11-05 16.25.01.png


R-Typography, the type foundry by Rui Abreu, released Pathos:

Pathos is a robust slab serif typeface that follows a simple design idea - to make serifs as large as possible. Because there are obvious limits to how much serifs can grow, for instance the space available between and inside letters, Pathos’ huge serifs test the physical limits to their size.

Screenshot 2016-11-05 16.33.37.png


In early October Hoefler & Co. announced Chronicle Hairline:

To offer designers a new voice to work with, we’ve taken our Chronicle Display family, a smart and newsy design in the ‘Scotch’ style, and extended it into this new collection of bright and graceful typefaces for creating grand, expressive, and picturesque typography.

chronicle_hairline_specimen4.png


And last but not least, type designer CJ Dunn released Dunbar, a geometric sans. It comes in two styles: Tall and Low, with the height of the descenders changing in relation to the capital letters depending on your needs:

Screenshot 2016-11-05 16.44.48.png

Dunbar’s stylistic alternates are certainly worth looking at too since I find them strangely cute:

alt_dieresis_unoutlined_v3

The Week in Type

Typekit announced the Typekit Marketplace, an additional service where you can license fonts from a host of foundries separately from the fonts that they offer in Typekit’s subscription plans. In the past there’s been a bunch of times where I wanted to use a typeface from Typekit but pair it with another outside the Typekit library, with one from another foundry. Previously that meant I would have to load these fonts in a weird way and all that information isn’t in the same place.

There’s already a lot of great foundries on board, such as Frere Jones, Type Together, and Dalton Maag. The team also made some cool promotional videos that interview the foundries that have signed up so far.


Myles Maxfield wrote about variable fonts on the web for the Webkit blog:

There are four CSS properties which affect which fonts are selected to be used in the document: font-weight, font-stretch, font-style, and font-size. With font variation support, each of these four properties will accept a numerical value which will both affect font selection as well as be applied to the font after it is selected. Therefore, a web site declaring font-weight: bold may cause a variable font to be selected, and then bold applied to that variable font. Naturally, CSS animations are supported in all these properties, because the values can be smoothly interpolated. These properties are expected to match the most common variation axes, so most CSS authors won’t need to learn any new properties.

One thing to note here: I find it terribly exciting that web designers might not even know that they’re using variable fonts at all. They don’t need to learn any new CSS properties and they don’t really need to know anything about the font file for things to work properly.

Letter of the Week

Escrow Display’s lowercase x caught my eye this week:

x

In fact, the whole family of upper case characters are delightful, oozing with charm and finesse:

escrow

Until next time!
✌️ Robin

Sign up for more adventures

Adventures in Typography is published every Sunday. Be sure to sign up to get these brief updates delivered straight to your inbox.