Heading in the Right Direction

J

Jason Tselentis in Learning on November 14, 2016

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>

Web Typography Essentials: Heading in the Right Direction
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.

“Headings reach out like an extended hand, introducing readers to the content with a handshake that leads them into your site.”

Web Typography Essentials: Heading in the Right Direction
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.

Web Typography Essentials: Heading in the Right Direction

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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

Web Typography Essentials: Heading in the Right Direction

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

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

Web Typography Essentials: Heading in the Right Direction

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.

Web Typography Essentials: Heading in the Right Direction

Web Typography Essentials: Heading in the Right Direction

Web Typography Essentials: Heading in the Right Direction

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.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, Web design, and typography. His writings about design and visual culture have appeared in Arcade, Eye, mental_floss, Open Manifesto, Print, and HOW. Mr. Tselentis also has four books to his credit on design and typography principles, and design history.

Great Type Makes Sites Stand Out

Start your free fonts.com web fonts subscription today

Start Subscription