Heading in the Right Direction

What’s the first thing your visitors read when they come to your site? It should not be a Flash animation announcing its loading time. If it is, you need to update your site—immediately! Moreover, you need to think type first because that’s what readers are heading for: the typography. Thinking type first and considering hierarchy, visitors will initially notice your headings. Headings are your attention grabbers. Size is one way to establish dominance and make your headings stand out. And while bigger is usually better, contrast and weight can also get the reader’s attention. Make sure you mind the details too, especially since a heading can make or break your entire layout.

Heading Hierarchy & Functionality

Heading elements have six levels, with h1 being the major heading that descends to h6, the most minor heading.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


Headings descending from h1 to h6, set in the Amasis™ eText typeface.

In HTML, headings are known as block-level elements because they occupy their own space set off in a block. Block elements are different from inline elements. Inline elements can exist within block elements.

Selecting a heading in Monotype’s Typecast™ allows you to see how an element behaves. The block-level h1 element occupies its own space, denoted by the blue-lined box.

Making the Heading text strong creates an inline element within the h1 element’s containing block.

Treat your h1 through h6 elements hierarchically, sizing them from large to small, dark to light, or heavy to thin.

Before settling on a type size and font, create permutations of your headings. These examples, set in the Avenir® typeface, look at how size, value, and weight can be used to create hierarchy.

You can also mix fonts and use color to create variety, shown below with Avenir as the sans serif and the Minion® Pro typeface for the serif.

Sizing Up Headings

Headings reach out like an extended hand, introducing readers to the content with a handshake that leads them into your site. But because we see so many messages these days, headings have to grab the reader visually. They also have to co-exist with the rest of your site since headings are the hang-line from which all of the typography drapes downward towards the browser’s fold, its bottommost edge.
And while headings are meant to grab the reader’s attention, larger type isn’t always better. Consider the layout below.

The heading comes across as horsey given the 5em font-size and awkward break with WEB on its own line and a gaping negative space surrounding it. Because of the large heading 1 element, our heading 2 The Rules and Typefaces Have Changed gets cropped at the browser’s fold. Scaling down to a mobile-sized screen using Typecast shows us problems on a small screen.

Sizing the heading down to 4em, shown below, begins to clean things up, doing away with the negative space.

But the smaller mobile layout still has problems with the heading, as well as the body copy, where breaks are creating gaping negative space.

The monumental uppercase heading will definitely get the reader’s attention. And setting it thinner, along with a heavier pull quote creates hierarchy, shown below.

In the instance above, uppercase seems to do the job, and further testing with fonts and type size might get us the results we want. But this heading is lengthy and uppercase makes for a difficult read and odd spatial relationships. Let’s remove the text-transform: uppercase property from our CSS.

Going with mixed case gives us a different look and feel altogether, with hills and valleys among uppercase and lowercase that we’re accustomed to.

But we’re not there yet. The heading’s lowercase ascenders and descenders, along with the uppercase, interfere with each other because of the close line-height. Scaling the type size down to 2em and adjusting the line-height prevents letters from bumping into one another. Adjusting the size and weight of the opening quote, paragraph, and sub-heading brings it together.

Further testing and adjustments for mobile devices will need to happen to see how the layout functions on a smaller screen.

Headings & Numerals

If your heading will include numbers, see if the font has lining or non-lining numerals. The Neue Helvetica® typeface, used for our heading 1 in the prior examples, has lining numerals, sometimes called lining figures.

Lining numerals generally align to the capline and baseline of capital letters. The Georgia® typeface has non-lining numerals, shown in the two bottommost examples illustrated below.

Notice how Georgia’s non-lining numerals have ascenders and descenders, like lowercase letters, which is why non-lining numerals are also known as lowercase numerals or lowercase figures.
Switching to a font like Georgia, which has non-lining, sometimes also called oldstyle figures, creates more hills and valleys in the heading. But with an uppercase heading, the numerals stand out oddly.

For an uppercase heading with numerals, consider using something like the Demos® Next typeface family instead of Georgia. Not only does the Demos family have lining numerals that play nicely with uppercase headings, but it has large lowercase letters for a monumental look and feel. It comes in a variety of weights too.

Experiment with size, line length, and color to see what kind of layout you get and how the heading interacts with the rest of the design.

Where Readers Are Heading

For most designers and users, splashy introductory animations and countdown timers built with Flash are passé. And even though your site may be image-heavy, typography matters during a day and age when we’re routinely confronted with a barrage of typographic messages. Think type first, and consider how the headings will make your site functional and distinctive.

Designing your headings requires you to play with type size, style, weight, and color, all while considering how headings relate to the site’s hierarchy and layout. Explore how Web typography impacts your site’s look and feel, as well as its identity, especially since it’s the headings making first contact with your visitors. You want them heading to your site for a good first impression.