Typographic Terms

Decode the components and anatomy of type
Typographic Terms Lesson

Well-designed typography can keep users reading your content for longer. Poor typography can quickly hinder readers and send them looking for information elsewhere. To create better typographic designs, you must first understand the basic typographic terminology.

Typographic hierarchy

When visual hierarchy is applied to text, it’s called typographic hierarchy. Typographic hierarchy is influenced by factors like size, font, style, color, and position.

Text is generally grouped into 3 levels of importance: primary, secondary, and tertiary. Good typographic hierarchy makes the text flow naturally and guides users through information coherently.

Headline

Headlines are used to indicate primary text such as the title of an article or blog. The goal of any headline is to catch people’s attention and entice them to read more. To that end, they should be short and descriptive. However, you can have fun with the way you style headlines. They're an excellent opportunity to use display or script typefaces, bold or italic fonts, or apply other styles and effects. Just be wary of applying too many styles to your headlines — less is more.

Eyebrow headline

An eyebrow headline comes second in the typographic hierarchy and sits above the main headline (like your eyebrow sits above your eye). These eyebrow headlines are usually labels or keywords that help users understand the theme of the content they’re about to read.

They are most effective when used in groups, like a list of cards. Sometimes, they are also used on individual articles or pieces of content to denote that they’re part of an ongoing series.

Body

The body text of a piece of content follows the headline and is the last level in the typographic hierarchy. It’s important to keep body text legible and accessible for all users. Make sure the font you use is easy to read and properly sized and styled for readability.

Pro Tip! Use typefaces with multiple fonts — they are more versatile for various use cases, including body text.

Flush left alignment

Flush left text is aligned along the left-hand side of the margin or gutter. It’s the most common form of alignment since it follows the natural reading order of left-to-right languages. In most cases, you’ll want to use flush left alignment for body copy or any other large blocks of text.

Note that you’ll want to avoid this type of alignment in languages that read from right to left such as Arabic and Hebrew.

Centered alignment

Centered text is aligned along an invisible central axis, in the middle of the left and right margins or gutters. It leaves gaps on both sides of each line and draws attention to the text.

Center alignment is useful for headlines and titles, or for short blocks of text like pull quotes. Don’t use more than three lines of center-aligned text at a time or it becomes difficult to read.[1]

Flush right alignment

Flush right text is aligned along the right-hand side of the margin or gutter. It’s a perfect choice for languages that read right-to-left, as it follows the natural reading order. Flush right text can also be suitable for short pieces of content such as a headline or meta information.

Justified alignment

Justified text forces each line (except the last in a paragraph) to span the full width of its container, commonly seen in printed materials like books or legal documents. However, in digital content, only short text blocks should be justified. Forced spacing creates inconsistent white space between words and letters, making it hard to read and inaccessible for people with dyslexia, low vision, and other disabilities.[2] It's generally not recommended for digital design.

Kerning is the adjustment of space between individual characters in a line of text. It's an essential element in typography that affects readability and visual appeal. Unlike tracking, which adjusts spacing uniformly across a range of characters, kerning focuses on the space between two specific characters. Common letter pairs often requiring kerning include capital 'T' followed by lowercase 'o,' 'a,' or 'e' (To, Ta, Te), 'W' followed by 'a' or 'o' (Wa, Wo), 'f' followed by 'i' or 'l' (fi, fl), and 'r' followed by 'y' or 't' (ry, rt).

Kerning matters because it:

  • Enhances readability: Proper kerning makes text easier to read
  • Improves aesthetics: Well-kerned text looks visually balanced
  • Highlights importance: It can be used to emphasize certain words or sections

Designers usually apply kerning in headlines, logos, and other areas where text size is large. Subtle changes can have a significant impact, so it's crucial to pay attention to kerning when working on any design project involving text.[3]

Tracking is the space between all the letters throughout your text. Adjusting tracking to style titles and headlines can make them stand out, but it’s unnecessary in larger blocks of text since most typefaces set their tracking based on body copy.

Positive tracking can create more contrast and increase legibility when done properly. You can also use negative tracking, making letters closer together. Small adjustments can add a stylized effect (and allow you to fit more text on a single line), but it’s easy to overdo it and make text harder to read.

Line height

Line height, also called leading or line spacing, is the vertical distance between two lines of adjacent text. Proper line height is vital to making text more readable. Too little space makes text look crowded and cluttered. Too much space can make it hard for the reader’s eye to travel smoothly from one line to the next.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>