Home icon
Data Visualisation Guide

Small fonts

5 minutes read

Typography

Another technique for packing more text into a small space is, of course, to reduce the font size. The readability of fonts at small font sizes is determined by a few characteristics of the font.

The x-height is the distance between the baseline and the mean line of the font. This is the height of the letter x (but also of the letters v,w and z).

The word Sphinx is used to show the baseline and the x-height of serif font

Illustration of the x-heigh. Source: Max Naylor, public domain

Fonts with large x-heights have better legibility when used in small font sizes.

A snippet of text in the Merriweather font

Merriweather has a large x height. Source: Google Fonts

A snippet of text in the Merriweather font displayed very small. The text is still readable

A snippet of text in the Bellefair font

Bellefair has small x height. Source: Google Fonts

A snippet of text in the Bellefair font, displayed very small. The text is less readable

Source: Google Fonts

The counters of a font are the areas that are entirely (”closed counter”) or partially enclosed (”open counter”) by the letter forms. The letters “o” and “p”, for example, have closed counters, the letter “a” has both an open and a closed counter and the letter “c” only has an open counter.

The opening between the inside of an open counter and its outside is called an apperture. The size of appertures varies between fonts, with some fonts having wide openings (”open appertures”), while others have narrow openings (”closed appertures”). Fonts with open appertures are preferred for displaying text with small font sizes. Example fonts with open appertures include Lucida Grande, Trebuchet MS and Corbel.

Below are some fonts with closed appertures, which become problematic for small font sizes: distinguishing between the numbers 8 and 9 becomes very difficult.

The number 89 in the Anton font

The number 89 in the Bebas Neue font

The number 89 in the Archivo Black font

Source: Google Fonts

Some fonts are designed to be used in titles and in large displays, like billboards or big screens. These fonts may have characters with very fine lines. These hairlines have good visibility when the font is used in large font sizes, but can be barely visible on small font sizes. These fonts (called “display fonts”) can be best avoided for small font sizes.

The number 1234567890 in the Libre Caslon Display

The number 1234567890 in the Libre Caslon Display, displayed very small. The hairlines are not very visible

Source: Google Fonts

Similarly, the serifs of serif fonts can be hard to distinguish or even hinder the identification of characters when used in small font sizes. So sans serif fonts are more suited for these circumstances.

Related pages

Fonts for numbers

Font connotations

Fonts

Serif vs Sans serif

Fonts and typefaces

Condensed fonts

Typography