Weblog Entries

Typography and Style for Headings

by Pierre-Leo Bourbonnais on October 7, 2005
under Web Design

Like in the newspaper you read everyday, headings of each article allow the reader to evaluate the relative importance of the text that follows. These headings are most of the time of different sizes and permit hierarchy between content, chapters and sections.

Headings are titles and subtitles, i.e. the expression presenting the section they introduce. A heading can be the designation of the web page subject or the expression, the sentence that introduces an article or an entry appearing in a blog (or any of their sections and subsections).

It is essential that all headings of the same level keep the same tag (h1 to h6) and stay consecutive (don’t use h4 if you didn't use h3 yet). Try to use limited number of heading levels, to keep your structure clear enough for most readers. It is also important to make sure that visual structure of each heading level is obvious, helping the reader to find the information he wants and being a guide to the eye. That is not only true for one web page, but also for an entire website. Accordingly, try to use the same style for your headings throughout an entire website.

Titles and subtitles (headings), on a web page, are the same size or bigger than text below them, sometime in bold weight and often of different color. Size and/or color of headings has to be accurate with their importance relative to others. If you keep them the same font size as content text, other typographical characteristics needs to add an appreciable contrast. If you want to keep the same font family with your subtitles, bold weight is usually sufficient. If, on the contrary, you change font while keeping the same weight — from serif to sans serif or the opposite, by instance —, it is preferable to enlarge size to make sure there is distinction with content (paragraphs) that follows. You can use small caps or all caps if you want to increase contrast even more (CSS text-transform: uppercase; or font-variant: small-caps;).

It is strongly suggested to add white space (CSS padding and margin) before and after headings to allow text — and reader as well — to breath. It is also possible to use a border on top or under the heading, to enhance its support to the content and make it more important.

Main headings are usually seen centered relative to their container and subtitles aligned left, but no rule guides these alignments. Some people prefer to align every heading level to the left, including main ones, or all centered. You may see headings aligned right sometime, but if you do so, make sure you have a convincing visually structure! Some subtitles may even be inserted into the text — these are called run-in sideheads — as the first sentence or first words of the paragraph, providing they are bold or styled as italic and that you add white-space after (CSS right-padding).

Headings of level 2 or 3 can bring a left indent (CSS text-indent) for the entire paragraph that follows — and heading itself in the same time —, helping the structure to breath even more and adding clearness and precision. Verify that you don’t indent a heading that is aligned center, because it will cause visual inconsistencies if there is such indent.

Finally, a reduced tracking is often welcome in main headings (CSS letter-spacing: -1px; will work well in 95% of today’s browsers), but be sure to use a font size large enough to avoid superposition of letters on screen (a font-size of 160% or 1.6em (relative) is usually enough in most browsers; or absolute size of 18px and higher is correct with most fonts). For subtitles, you can increase tracking to stretch the heading to the right, but it has to stay readable.

To be continued...

Comments :

Rob Record said:
January 8, 2006 | 18:03

This was a great help - thankyou!

Beautiful design, also - just the kind of design & aesthetic skill I aspire to.

Asikosoru said:
September 5, 2006 | 22:28

Hello! Very nice site! Thank you!