Headings are everywhere, but have you ever stopped to just consider the purpose of them and how they work? If used correctly headings provide improved readability and better search engine optimization (SEO)
Structural Rules When Using Headings
When using headings it can be easy to just use them whenever and however you want. If you use them carelessly you will not see as many benefits as you might actually hurt the readability of your website.
H1 Should be Used Sparingly
While it might be tempting to use the largest heading, H1, everywhere, this stops the effectiveness of using headings with visual hierarchy to guide users around the site. The recommended use for the H1 heading is to limit it to being used once on a page. As it should be used once, the H1 heading is generally used for the page title or main topic.
Headings Have a Sequential Order
Headings are numbered for a reason. The page title will typically be the largest heading as the H1 heading. Then there will the second largest heading, H2, which will be used for the main topics. Subtopics of those main topics will use the H3 heading.
Follow the logical progression with headings from the H2 to H3 and then to H4. It is also important to remember to never skip levels, such as going from a H2 straight to a H4.
Headings Provide Break Points
One way that headings improve readability is by providing easy to see break points that signal the start of a new or sub topic. If you have large chunks of text it is important to break it up with subheadings. This not only provides break points it also allows for readers to skim through your text and find the information they are looking for faster.
As such you should place subheadings for every 200 to 500 words, this only applies if you have a long discussion of a topic that causes the need to place breaks to help maintain reader engagement. You can place headings more often than that but only do so if it makes sense for introducing new topics or subtopics.
Design Tips for Headings
Besides know when to use specific headings, it is important to follow some design practices with your headings. This helps also helps with your website’s readability as the visitors to your site will be used to headings that follow these design practices.
Use Size Scaling for Headings
One aspect of headings that everyone recognizes is that headings on a page vary in size. This is because H2 is supposed to be larger than H3 and H4. This is due to size scaling. Size scaling refers to the scaling of the headings based on the body text and a percentage to increase the size of the heading by.
The common practice is to have the H2 heading about 200% larger than that of the regular paragraph text size. The H3 heading size is scaled by about 150% while the H4 is around 125% larger than the paragraph text.
Have Consistent Fonts
As with any text on your website, it is recommended to have consistent use of fonts. For example all paragraphs should use the same font family. This is also the case for headings. Headings can have a different font family than the body text, but headings should have the same font family as each other.
Make Use of Title Case
Headings are titles, whether they are main titles of topics or of subtopics. As such, headings should make use of title case. Title case is a capitalization style, that capitalizes the major words and the first and last words, while leaving the minor words lowercase unless they are one of the first or last words. You can see this in the heading for this section, as all of the words are capitalized except for “of”.
Consider How You Use Headings
Headings can be a great tool for increasing readability of your website. Yet you should stop and consider how you are using headings. Are you using them in a way that does increase the readability of your site or are you just using them as you feel like it without considering how they should be used? Consider your headings and use them wisely as they can provide great benefits.
Leave a Reply