Let’s talk about space

Typefaces are all about forms and how they relate to each other. Most configurations come with the typeface itself, and some can be done by its users. Here is an overview.

First, let’s start with the basis — a digital typeface is drawn on a grid. Each step in that grid is one unit. Depending on the typeface, a font is usually around 1000 units high.

A period of the typeface Cádiz with the grid in the background.

Spacing

The Spacing is the most important aspect of a typeface. It defines the distance before and after a letter. This is specified by the type designer — the aim is to have the perfect rhythm of letters in words. Round forms (e.g. O) usually have less space than letters that end in a straight line (e.g. H).

Spacing of Messina Sans, the numeric values are the units.

Kerning

Thanks to Kerning, a typeface automatically adjusts the Spacing for a specific pair of letters. Kerning is used when the Spacing is not sufficient to have a harmonious mix of a pair of characters. Typical combinations that require Kerning are AT or Vo. In some applications, you need to turn Kerning on (e.g. Microsoft Word).

The kerning pair AT of Messina Sans. The undercutting changes the spacing from +30 to −80 units.

In Adobe apps, when using a well design typeface, always set Kerning to Metrics. This ensures the typeface maintains the Spacing and Kerning exactly as the designer intended. If you choose Optical instead, Adobe changes its original design.

If you place the text cursor between two letters, you can see the Kerning value from the typeface. In this example, this pair of letters has a negative Kerning of 80 units. When using a font on a website, the Kerning has to be switched on with CSS. Take a look at the entry on web typography.

Tracking

With Tracking, a user can decrease or increase the overall spacing of a typeface. So you can uniformly add or reduce the spaces between every letter.

By default, the Tracking is set to zero. As a general rule, larger text needs to have less Tracking. Small text needs to have a bit more Tracking.

A large title with 0 Tracking looks too wide...
with −15 Tracking, the title looks more present and balanced.

A small text with 0 Tracking looks a bit tight...
adding +15 Tracking enhances readability.

In Adobe applications, you can adjust Tracking with the marked input field. When using a typeface on a website, you can change Tracking with CSS. Please see the essay on web typography.

Some programs turn off ligatures when you add a lot of Tracking, usually more than 17 units.

It is common to add Tracking for all caps titles. This is because, in most fonts, the spacing of capital letters is optimised to fit next to lowercase letters.

With Tracking, you can optimize a font for its optical size (the font size). Some of my typefaces have two versions: one for text and one for display usage in large sizes. These two versions already have adjusted Tracking — however, when you go to the extremes, I would still recommend adjusting the Tracking.

Beirut Display is at the top for larger sizes, while Beirut Text at the bottom is optimised for smaller sizes, with slightly more Tracking and less contrast in the letters.

With Spezia Serif, you can adjust the optical size.

In this example, I haven’t changed the Tracking; it is controlled by the variable font itself. You can find more information about variable fonts here.

Line Height

The Line Height or Leading is the amount of space between the baselines of each line of text. Each software calculates the Line Height on its own, so there may be slight differences between different applications.

A large title set in Cádiz 100pt font size with a 92pt Line Height

A small text set in Cádiz 21pt font size with a 26pt Line Height

As a rule of thumb, larger text needs to have less Line Height, while small text needs to have a bit more Line Height. The ideal Line Height also depends on the font itself. If the font has large ascenders or descenders (e.g., deep-reaching "g"), the Line Height needs to be adjusted accordingly.

In Adobe applications, you can adjust the Line Height using the designated input field. When using a typeface on a website, you can change the Line Height with CSS. Please refer to the essay on web typography.

I would like to emphasise that, as with everything visual, there is no clear rule for all of the aforementioned. There are different traditions and individual stylistic opinions, which is great.

Voilá, that’s it. I hope this helps you navigate in the typographical space.