Headings in Typography

Beyond aesthetics, headings serve a few important purposes in design. The most basic purpose is to separate sections of content. When an important concept or topic is introduced, it's often preceded by a heading in order to let readers know the topic is changing.

A visual indication that the subject is changing aids in readability and scannability. Readers will often scan through a longer text document to find the information they're looking for. Headings help them spot the relevant sections easily, while also boosting SEO and accessibility.

And finally, headings, along with subheadings, help create a visual hierarchy in text content. When a reader lands on a page that looks like a solid wall of text (particularly in digital products), they're unlikely to continue reading for long. Headings break that text up and provide structure, making the content less intimidating for users.

Subheadings are used in two ways in digital content. The first is directly under a headline or title (where they're referred to as subtitles), to provide more context. This is commonly seen on sites like Medium, where subheadings are often used under the title of an article.^[1]

The second instance is when a subheading is used on its own within the text, to highlight an important section within a topic that is already set apart by a heading. The purpose of this is to aid in the scannability of the content, to make it easier for readers to find the exact information they're looking for.

Not every piece of long-form content will use subheadings. Some will use more than one level of subheadings (so there are subheadings within subheadings). Deciding whether and how to use subheadings should be done based on the structure of your content. If their use improves user experience, then include them. Otherwise, leave them out.

An eyebrow heading, also referred to as a kicker, is a short phrase that appears above a heading or title.^[2] It's there to provide additional context to the heading and is often used to indicate that the content is part of a category or series of articles.

As a general rule, eyebrow headings should only be used above the title of a piece of content. Don't use them above section headings within your content, unless you have a very compelling reason to do so.

Also, within typographic hierarchy, remember that your eyebrow heading is likely to be read after your article's title and subtitle, when all three are formatted well. Eyebrow headings are generally formatted in a way that does not compete for attention with the title and subtitle formatting, as they contain less important, tertiary information.

Typographic scale is vital for visual hierarchy within a design. Take time to create a visually appealing and functional typographic scale for your headings.

There are 6 default heading levels within HTML (H1–H6), but in the vast majority of cases, you won't use all 6 levels. H1 is the largest and should be reserved for the title of an article or page. Ideally, there should only be one instance of this heading level on any page. H2 is often used for headings within a piece of content, with H3 and possibly H4 used for subheadings. H5 and H6 are rarely used within content, though they may be used for headings in sidebars, menus, or other instances.

To create a scale, the best place to start is with your body font size. While you may not use all 6 heading levels, you may want to craft your scale to include all of them, especially if you want higher typographic contrast in your design. Choose a scale ratio to work with, then calculate your heading sizes based on that, in relation to the body font size.^[3]

Title case is used for headings or titles in many editorial style guides. Title case dictates the capitalization of the first letter of a heading as well as any major words, while minor words are written in all lowercase. There is much debate among style guides, however, as to what constitutes a "minor word."^[4]

In some style guides, different heading levels use different capitalization practices. For example, the APA style guide uses title case for first- and second-level headings, but sentence case for third-, fourth-, and fifth-level headings.

When designing your text content, the main thing to keep in mind is to keep your capitalization consistent. If you use title case on some pages but not others, it gives your product an unorganized feeling and can even make it seem unprofessional.

In sentence case, only the first letter of a heading or title is capitalized. The rest of the words (other than proper nouns) appear in all lowercase, the same as a sentence within the body of your content.

The use of sentence case for headings varies widely among digital products. A general rule of thumb, though, for considering sentence case has to do with the length of your headings. If your headings are generally longer, then it may improve readability to use sentence case instead of title case.^[5]