Using Headings

While there are a few options for headings, for the most part you don't need to worry about them. As long as you use appropriate heading levels in an organized manner, your page should look just fine. There are a few tips and guidelines that we have that will make your pages look the best they can.

General Sizing

The template has an optional class xl which you can place on a wrapper like the main content wrapper on your page which will size all text including headings to a larger size. It's generally best to use this class on single column pages or sometimes on two column layouts when the content is particularly sparse. It's best not to use this class when your page has many narrow elements like cards.

Specific Sizing

The default size of the headings should work in most cases. However it can sometimes be required to resize a heading for various reasons. To resize headings to different sizes, simply use the classname that corresponds to the size you want to use. For example, if you want to make a level 2 heading look like a level 4 heading, add the class h4 to the level 2 heading. DO NOT just change the <h2> tag to a <h4>. This alters important semantic information about your webpage in a bad way.

Why would you want to resize a heading? Probably the most common reason is when you are using a heading inside of a card or sidebar that is particularly narrow, generally 6 columns or less. We recommend that you use the h4 class for any headings that are placed in sidebars or cards. If you have a sub-heading then use the h5 class and so on. If you use level 2 or level 3 headings in these elements, generally the text is just too large, can wrap unnecessarily, and just doesn't look great.

Spacing

Spacing is a little more tricky. It's hard for the template to handle all spacing considerations because of how text can be used. We simply cannot predict all the ways text will be used and so building automatic rules into the template has been difficult. It's important to note that spacing conveys meaning to readers. In general, the closer items are to each other, the more likely they are assumed to be related. The further apart, the less likely they are related.

Add Body Copy Top Margin

There is a small default margin on the top and bottom of headings which really only covers these headings when they stand alone. Most of the time you will want to increase the top margin when a heading follows a paragraph. We recommend you add an mt-5 class to headings when you want to reinforce the fact that the current heading isn't related to the previous content. On this page, most if not all of the level 2 headings have this class.

However, for the level 3 heading we have elected not to add more margin and are using the default. This attempts to clearly indicate the level 3 is related to the level 2, and thus starts to have a more clear sectioning of the page without attempting to add other types of sectioning techniques like bars or color.

Remove In-Element Top Margin

When placing headings inside cards or other elements with a background color, it's often needed to remove the top margin on the heading with the class mt-0. If you do not, the heading can look abnormally offset from the top. Two examples are provided below. We recommend the second example as the space around the text is uniform on all sides. In the left example the spacing on the sides is not uniform with the spacing on the top and bottom.

First Heading in Columns

Another common reason to adjust the top margin on a heading is near the top of the page. Again it's hard to cover all scenarios, but generally there should be a space between the top of the content area and the first text on the page, like your level 1 heading. Here is an example of how the top of your page would look by default without a banner.

The level 1 heading is simply too close to the navigation for our liking. So margin should be added above the heading, and is often added on the container using a my-5 class or on the heading using a mt-5 class. Seen below is a more appropriate spacing of the first heading on a page.

Care must be taken however when you have two columns of content. Depending on how you place your margin classes you could accidentally misalign headings or content. Consider the example below.

In this example, the heading on the left has a mt-5 class, thus adding margin, and the heading on the right has the default spacing. They don't align and don't look great. Not only are they misaligned, but the right heading is too close to the top elements. If you add a my-5 class on the container, it will fix the spacing on the right, but the mismatch will still exist.

It's up to you how to best handle the margin. In this example you can add mt-0 on both headings and my-5 on the container, or you can keep the container as default and add mt-5 on both headings. In either case, both headings should align and there should be a space between the top item and the first headings as shown below.

Line Heights

In most cases the line height which affects the spacing between lines of text doesn't need adjustment. However, sometimes depending on the layout, there appears to be too much vertical spacing between lines of your heading. When this happens, add the line-height-base class to your heading to adjust this spacing down.