We use cookies to provide some features and experiences in QOSHE

More information  .  Close
Aa Aa Aa
- A +

Type in the digital era is a mess

1 3 0

It’s easy to overlook one of the most important elements of UI design: text. It hides everywhere – tucked inside button labels, scattered through tool tips, skulking under home-screen icons.

In laying out text, designers must strike a balance between historic principles, forged through the centuries, and new practices. Just like in the days of metal type, white space must still be perfectly balanced, and text aligned to other objects –but now everything also needs to be rendered correctly on pixels of many sizes and screens of many dimensions. It’s a cacophony of factors, and it makes handling text very difficult.

I’ve made a career out of thinking about this kind of thing. I’m writing a book on the history of keyboards, and earlier this year, joined the collaborative design tool Figma to focus on typography. We recently changed the way we handle line height, and this project took me deep into the annals of type alignment history. I studied how laying out text evolved since Gutenberg, and how computers – first graphical user interfaces, then the web – further complicated the issues.

Things were simpler in the days when type was made out of metal. There were two main roles – type designer and typesetter – and their work was constrained by the rules of the physical universe.

It also helped that by the late 1800s, the type industry had figured out most of the basics. A life of a typeface would start on paper, with a type designer spending weeks or months sketching all the necessary letterforms. After they were done, the drawings of the typeface were turned into a font: actual physical blocks of lead.

You needed to buy one or more such blocks for each letter. You also needed to buy additional metal blocks for different sizes of text. But font size wasn’t defined as the size of the letters –it was the height of the metal block holding them, expressed in a unit known as point (each point was a 1/72 of an inch, or about 0.4 mm). The block height was known, but within it, the type designer could do whatever they wanted: Fonts of the same size could be bigger or smaller, their baseline (the line each letter “sits” on) placed higher or lower, and so on.

Four metal fonts with the same 16-point font size. Notice some fonts take up more space than the others, and the baselines vary. [Image: courtesy of the author]When the typeface was finished and the fonts made, the type foundry that employed the designer would sell them to printing shops. Those, in turn, would employ typesetters whose job was to lay out the metal blocks into words, then sentences, then paragraphs, then pages.

Typesetters could put lines of blocks immediately one after another, in a process called setting type solid, since it resulted in solid, unspaced blocks of lead. Usually, however, they inserted extra-narrow strips of metal to space things out, let text breathe, and make it easier for the reader’s eyes to jump from one line to another.

Since the spacing strips were made of lead, the practice of adding that space was called leading (pronounced “ledding”). Here is an example of a 16-point type with 4-point leading, which gives us text with a combined line height of 20pt.

[Image: courtesy of the author]Finding the right amount of leading was its own art. The leading needed to be different depending on the font sizes and lengths of lines. Even dealing with the same font size and identical amount of leading could make one font look cramped and another look as though it was floating in space.

On the left, one foundry brags that their baselines are finally consistent. On the right, an announcement of a new idea: font sizes expressed in numbers, rather than a completely arbitrary set of names. One of these problems remains unsolved. [Image: courtesy of the author]It was a relatively simple system, with clearly defined roles and rules. The font came from the type foundry as a monolithic, unchangeable block, and line height could only be added, never removed. Yes, you could order a font with an unusual line height built in, but that was uncommon. (Any such font came with a discouraging name –“bastard type.”) Your job was to lay things down and space them to your heart’s content.

Then computers ruined it all. As we transitioned from paper and metal to screens and software, typography inherited everything that computers have to offer–including bugs, incompatibilities, and updates.

Fonts were no........

© Fast Company