The technology behind beautiful text. Part 3 of 3.

10 min readMay 9, 2023

Part 1. Unicode and Font Fallback
Part 2. OpenType

3. Layout & Reading

As we discovered, there are a lot of amazing technologies behind the text, and creating a layout is the territory where all this splendor can be easily ruined by doing nothing or doing too much.

How we read

Before going deeper into layout issues, we need to say a few words about how we read. Can you read this example?

We don’t read words by letters, we recognize them as a whole. Actually, we make guesses about what the words are. Our eyes do a lot of rapid movements scanning the text and looking for familiar details of the words. Sometimes they skip the words and return to them later. These movements are called Saccades.

It gives us an answer to why it’s not recommended to use ALL CAPS for long texts. We are used to reading lowercase letters and recognize them better. Also, the lowercase text has more varied details which makes the guessing easier.

But do we need to care about the legibility of the Typeface if we are able to read a complete mess? We must. According to the theory of Daniel Kahneman, a Nobel prize winner, our brain doesn’t like to waste energy in vain and encourages us when we feel cognitive ease. Moreover, if the text is easy to read, people tend to trust it more. Why is that? When we read something we agree with or from a source we trust, we feel cognitive ease. But our brain doesn’t analyze the source of this feeling, the source can be just a good choice of font.

Font Choice

And a good choice of the font means a font of maximum readability: no fancy elements, good legibility, and standard graphemes we are used to, but:

If you lived in the middle age you would prefer Blackletters. A lot of old-school people would say Serif is better but that is because they were brought up on printed books. Modern studies show that there is no real difference between Serif and Sans-serif typefaces. On the contrary, Sans is slightly better for people with low vision or dyslexia. Also Sans is better for standard screens.

One more thing to consider: Sans-serif fonts look more neutral, while Serifs can be perceived as formal, mature, practical, or stable. Serif fonts tend to add emotions to the text.

And finally: for text on a screen you should use fonts designed for screens.

Even using the equal lowercase height, Baskerville is less legible. All these fine high-contrast strokes don’t work at small sizes on standard screens.

Some Variable fonts like Amstelvar or Roboto Flex automatically roughen their forms towards small sizes. Great choice as well.

Finally, a small life hack: if you want to make your text more emotional — use large headings with any font you like. Practically any font will look good in large size and the size contrast will pair the heading with the base text well enough. For more precise pairing see this great article.

Layout issues

Let’s start the discussion of the text layout with a simple question. What is the Font Size in this picture?

“a” stands for lowercase height (x-height), “b” is for Cap height, “c”, “d”, and “f” don’t make much sense. The correct answer is “e”. The one that measures nothing. In the picture below it is represented by blue background. How crazy is that?

if you set the line-height to the same value as font-size and set overflow to hidden, you’ll see the text cut at the bottom:

Why can’t everything just fit the boundaries? Let’s shift the text a little and make it a bit smaller. Unfortunately, it won’t help:

Ok, we cannot fit the text to the boundaries, but what is the font size? Let’s compare different fonts with the same font size, maybe it will give us a clue.

The text of the same font size just somehow fits the same boundaries. Cap height, x-height, and even the position of the baseline can be completely different. Baskerville has a smaller x-height and at a small size looks even worse than in the previous example, let alone Zapfino, which is impossible to read. So, giving the recommendation that the font-size should be at least 16 px is like saying “The font-size should be at least any size inside 16 px”. Ok, it doesn’t mean that, but I just want to draw your attention to the fact, that this recommendation is just a starting point. Roboto can be perfectly readable at lower values while Zaphino needs twice the recommended at least.

Doesn’t it make more sense to set the size of the font using x-height or cap height? It does, and Adobe Illustrator allows you to do it, hopefully, the web will catch up.

Still, what is the font size?

Font size is the size of the base of a letter when letters used to be metallic. In those days using the same size of the bases in one line was crucial, otherwise, whole the layout could literally break apart. It was more important to keep the letter bases of the same size, not letters.

By the way, Uppercase letters usually were stored in a case above all other symbols (in an upper case).

Nowadays the size of a letter is defined by the same imaginary base behind it. Using such an abstract measure creates different problems. At small sizes, the border of the letter and the boundary are practically the same, while at large sizes the difference is significant.

The next problem is the line height. Obviously, the recommendation to set it to 1.5 of the font size doesn’t correlate with the real text size (x-height or Cap-height). But on the Web, there is one more thing with the line height. Line height is the distance from one baseline to another. In classic typography it really is, but the same distance can be measured from any point on one line of text to the same point on the next line of text. And on the Web line-height is shifted to grow from the center of the text.

Ok, it helps (somehow) to align the background of the text, every web developer knows how to align text in a button by setting the line-height to 100% of the parent object. Again, somehow, because the text can’t be vertically aligned inside its boundaries by Caps and small letters at the same time. Sometimes a type designer decides to align Caps, sometimes — small letters and that’s why the position of the baseline differs from font to font.

Such line height also means that by increasing it the text shifts away from the top boundary. While the alignment still works with boundaries.

Another issue is that we cannot measure the visual distance between two paragraphs:

The main takeaway from this section is that the font size is an abstraction. Any measurement system based on the font-size cannot be universal. And every font requires its own manual adjustments (that’s why I am not a big fan of using “em” on the Web).

Building layout

Remember the trajectory of our eyes while reading a line? Put two lines too close to each other and our eyes will catch what they don’t need. Make lines too long — it will be hard to jump to the next one. Too short — too many movements.

At the layout level, we are increasing readability by creating an even pattern of the text. Horizontally — we avoid unnecessary gaps and keep a comfortable line width. Vertically — comfortable line height supports eye movements and creates a visual rhythm. Ideally, all the elements of the page should be consistent with this rhythm.

I think everybody knows that the optimal line length in English is 45–75 characters. Fewer people know that the line height depends both on the Type face and line length. Shorter the line — the smaller the line height.

This brings up an interesting question — what should we do with our site when it transforms from desktop to mobile? Keep non-optimal line height? Change line height but not all other elements? Change line height and all other elements? It’s a task for a web designer to solve.

Smaller x-size and lighter letterforms require smaller line height. The same Type face with a lighter color also requires a smaller line height.

I won’t talk about hanging punctuation a lot, on the Web we do not justify text. We are trying to create an even pattern, remember? When the text is justified, it’s impossible to achieve without automatic hyphenation (and we don’t have it yet). Concerning the left alignment, all we can hang from the line is a quotation mark — not much.

Btw, you can justify paragraphs if you have previously inserted Soft Hyphens to all the words (search engines ignore them). But only Safari supports hanging punctuation so far, so it’s not easy to make your text look equal on any platform.

Do and Don’t

Letter-spacing. It’s not recommended to letter space lowercase letters. Actually, you can. Justifying is all about letter spacing, but let’s not talk about it longer. The extremely small text requires letter spacing, otherwise, it looks cluttered. Long lines of text (especially typed with serifs) look better with letter spacing too.

Negative letter spacing can create a positive effect too. Remember big headings with all those additional spaces between letters? Reducing the space also helps to rhyme the headings to the body text better.

Letter spacing All Caps is recommended. Won’t be arguing with that. It balances an inner white of a letter and an outer white between letters better.

Let’s talk about figures now. I mentioned that the ability to switch between Proportional and Monospace Figures is real gold.

“A man who would letterspace lower case would steal sheep”, well, a man who would use proportional figures in a table would steal a cow! Proportional Figures are better in text because they create an even pattern, but if you intend to compare numbers (which is the purpose of tables) you must use the right alignment and Monospace Figures. It’s also good to chunk numbers in both cases. I prefer to use “Narrow No-Break Space” (U+202F) for this purpose.

At the symbol level, the typography is all about using the right character in the right place. Remember, that we are increasing readability by avoiding unnecessary gaps and collisions.

It’s a good practice to insert hair spaces in places where no spaces are required by the language rules to avoid collisions. Another practice is to use a narrow space instead of a normal one after (or before) symbols with small visual weight.

Some more examples of the right symbols in the right place:

By the way, scientists think that the Pointing finger — when it started to mean not a finger itself but a thing it was pointed at — was the first ever attribute of the language. We can still use it thanks to Unicode, font fallback, vector glyphs of OpenType, and an accurate rasterization algorithm of your system.