Line height and letter-spacing: a practical guide

Achieving harmonious typography involves mastering two critical elements: line height (leading) and letter-spacing (tracking). Sensible defaults for these

What is line height and why is it important?

Line height, also known as leading, is the vertical distance between lines of text. It plays a key role in the readability and overall aesthetic of a text block. A line height that is too tight can make text feel cramped and difficult to read, while a line height that is too loose can disjoint the text and make it hard to follow. For body text, a line height of 1.4 to 1.6 times the font size is generally recommended. However, this can vary depending on the specific font and the length of the text line.

What is letter-spacing and how does it affect readability?

Letter-spacing, or tracking, refers to the uniform spacing between letters in a word or block of text. Proper letter-spacing can enhance readability and the visual appeal of text. Generally, larger text sizes can handle tighter letter-spacing, while smaller text sizes often require slightly looser spacing. Fonts with a higher x-height, such as Inter and Source Sans 3, often require less letter-spacing due to their naturally open character.

How do I choose the right font for my project?

Choosing the right font involves considering the purpose of your text, the audience, and the medium. Here are some recommendations:

For body text: Fonts like Merriweather, Libre Franklin, and IBM Plex Sans offer excellent readability and a balanced x-height.
For headings: Fonts with higher contrast and distinct letterforms, such as Playfair Display and Fraunces, can add a touch of elegance and authority.
For digital screens: Fonts like Inter and Source Sans 3 are designed for screen readability and work well across different devices.

How does font size affect line height and letter-spacing?

As font size increases, the optimal line height and letter-spacing often decrease. For example, a larger font size can accommodate a tighter line height and letter-spacing without sacrificing readability. Conversely, smaller font sizes typically require more generous line height and letter-spacing to ensure clarity. Here are some specific recommendations:

Body text (12-16px): Use a line height of 1.5 to 1.6 and slightly looser letter-spacing.
Headings (18px and above): Use a line height of 1.2 to 1.4 and tighter letter-spacing.
Display text (24px and above): Consider a line height of 1.1 to 1.2 and tighter letter-spacing, especially for fonts with distinct letterforms like Playfair Display.

How does the measure (line length) influence typography choices?

The measure, or line length, affects how readers perceive and process text. Longer lines can accommodate more characters but may require increased line height and letter-spacing to maintain readability. Here are some guidelines:

Short measures (45-60 characters): Use a line height of 1.4 to 1.5 and standard letter-spacing.
Medium measures (60-80 characters): Use a line height of 1.5 to 1.6 and slightly looser letter-spacing.
Long measures (80+ characters): Increase the line height to 1.6 to 1.7 and consider looser letter-spacing to enhance readability.

What are some recommended fonts for different purposes?

Here are some specific font recommendations from the Google Fonts library that work well with the guidelines discussed:

For body text: Merriweather, Libre Franklin, IBM Plex Sans, and Inter are excellent choices due to their readability and balanced x-height.
For headings: Playfair Display, Fraunces, and Source Sans 3 offer high contrast and distinct letterforms that make headings stand out.
For digital screens: Inter and Source Sans 3 are designed for screen readability and work well across different devices.
For a modern look: IBM Plex Sans and Source Sans 3 offer a clean, contemporary aesthetic.
For a traditional feel: Merriweather and Playfair Display provide a classic, elegant touch.

Frequently asked questions

How do I determine the optimal line height for a specific font?

The optimal line height depends on the font’s characteristics, such as x-height, contrast, and weight. As a general rule, start with a line height of 1.5 times the font size and adjust from there. Test the text on different devices and screen sizes to ensure readability.

Can I use the same letter-spacing for all fonts?

No, letter-spacing should be adjusted based on the font’s characteristics. Fonts with a higher x-height and open letterforms, like Inter, often require less letter-spacing. Conversely, fonts with tighter letterforms may benefit from slightly looser spacing.

What is the best way to test typography choices?

Test your typography choices across different devices and screen sizes. Use tools like Google Fonts’ preview feature to see how text looks with different fonts, sizes, and spacing. Additionally, consider user testing to gather feedback on readability and aesthetic appeal.

How important is font choice in web design?

Font choice is key in web design as it affects both readability and the overall user experience. A well-chosen font can enhance the visual appeal of a website and improve user engagement. Consider the purpose of the text, the audience, and the medium when selecting a font.