Let’s talk about space

Typefaces are all about forms and how they relate to each other. Most configurations come with the typefaces 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) have usually less space than letters which end in a straight (e.g. H).

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

Kerning

Thanks to the Kerning, a typeface adjusts automatically 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 which requires on Kerning are AT or Vo. In some aplications you need to turn the 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 applications, you can activate the Kerning by selecting a text and set the marked field to Metrics.

If you put 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. Have a look how at the entry web typography.

Tracking

With the Tracking, a user can reduce or add the overall spacing of a typeface. So you can add/reduce uniformly all 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 big 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 the readability.

In Adobe applications you can adjust the Tracking with the marked input field. When using a typeface on a website you can change the 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 lower case letters.

With the Tracking you can optimise 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. These two versions have an already adjust Tracking — however, when you go in the extremes, I would still recommend adjusting the Tracking.

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

Angebot

With Spezia Serif you can adjust the optical size.

In this example, I did not change the Tracking; it is done via the variable font itself. You can read more 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 can be slight differences between different applications.

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

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

As a rule of the thumb; larger text needs to have less Line Height. Small text needs to have a bit more Line Height. The ideal Line Height depends also on the font itself. If the font has a large ascender or descender (e.g. deep reaching g) the Line Height has to be adjust.