Improve your designs with these typography tips
By: Monica Galvan
Tags: UI, Visual Design, Typography, Design, UX Design

Elements of typography

Elements of typography (Image source)

Now let’s get into some of the technical terms of typography. There’s an endless amount of nerdy type terms like cap height, baseline, ascender, descended, terminal, and more. If you’re curious to learn more about the history of typography, check out What is Typography? A Deep Dive Into All Terms and Rules.

But it’s not really important to know these terms by heart to be a good designer. Instead, we’ll stick to a few core elements, ones you’ll need to know as you’ll use them on a daily basis when designing any project.

Leading

Leading refers to the space between lines. It’s measured from one baseline to the next. Leading, as well as the following elements of typography, are important for legibility.

The tighter the lines are, the more difficult it is to read. However, if there’s too much space between the lines, it can also be hard to read. It’s a delicate balance and something you’ll have to adjust for every font you use and how you’re using it.

Leading is the spacing between baselines (Designer: Monica Galvan)

Tracking

Tracking refers to the letter spacing over a range of characters, usually one or multiple lines. Negative tracking makes your words appear tight and compact. Increased tracking will add more air or white space in between.

When it comes to tracking, it also varies depending on the typeface you use and the context you’re designing in. Super tight or wide tracking will impact legibility for the user so be sure to adjust accordingly.

In general, titles in all caps should use increased tracking. Lower case and italics usually need to be tracked in tighter.

Tracking is the letter spacing over a range of characters (Designer: Monica Galvan)

Kerning

While tracking refers to the spacing over a range of characters, kerning refers to the spacing between individual letters.

Kerning is the spacing between individual letters (Designer: Monica Galvan)

Most of the time you won’t need to adjust kerning, especially for large blocks of body copy. Kerning mostly comes into play for 1–5 words in a title or a logo. The larger the type is, the more noticeable awkward spacing will be between individual letters. There’s no mathematical formula, you’ll have to train your eye to learn where there’s too much or too little space between letters.

In most design software, you can choose between optical and metric spacing. Metrics kerning uses kern pairs, which are included with most fonts. Kern pairs contain information about the spacing of specific pairs of letters. Optical kerning adjusts the spacing between adjacent characters based on their shapes (article source).

Alignment

For paragraph alignment, you can choose from left align, right align, center align, and justified. In general, right-aligned is rarely a good choice. Center aligned text can work with small amounts of copy or for a headline. But for the most part, you’ll want to left-align your body copy paragraphs.

Left-aligned text is easier on the eyes and best for legibility. We’re used to reading a page of words from left to right. Most books are either left-aligned or left-aligned justified. Justified text is more traditional, often used in newspapers and magazines. For justified text, you’ll need to adjust the tracking to compensate for the forced awkward spacing.

Paragraph alignment styles (Designer: Monica Galvan)

An important tip when it comes to paragraph alignment is to think about the visual appearance of the rag. When you left-align or center text, you’ll notice a rag on the edge. Sometimes you’ll need to manually adjust tracking or line breaks to create a better visual rag. Here’s an example of a bad vs good rag. Which looks better to you?