Typographical Hierarchy and Styles

Header Hierarchy

Header Hierarchy is an important aspect of not just readability and usability but also SEO. It is therefore paramount that we remain consistent in how we use the header tags online and rely on the css for style. As usual, please avoid the use of inline styles. Please note that all of our header tags are styled in a way that prevents them from being run into the beginning of a paragraph and will always display on their own line regardless. They can be multiple lines but not on the same line as body text.

Our website starts subheads at h3 and hierarchy follows a descending numerical order.

The site title, MIT Sloan Management Review, reserves the use of our H1 tag. It is not used in production:

MIT Sloan Management Review

Likewise, article titles reserve the use of our H2 tags and are not used in production:

Article Title

The first level of hierarchy within an article starts with the H3 tag:

Level 1 Uses Title Case

Followed by H4. H4 is also used for inline figure headers:

Level 2 uses sentence case or Title Case/Figure Header Uses Title Case

After this point, we really are no longer in the realm of headers so much as special exceptions. H5 once was used for sidebar figures, which is now deprecated. H5 is not currently used except in rare cases. At the time of writing (6/20/18), I can not currently think of any.

Sidebar Header Displays in All Caps

Lastly, we have H6 which is largely reserved for Interviews as the way we mark up interviewer questions and remarks:

Interview questions use sentence case and punctuation. They’re usually questions, but not always.

Run-in Headers

When there is bold text that ends with punctuation, especially if it is run into the beginning of a paragraph, it is marked up using strong tags to make it bold:

This paragraph starts with a sentence case block of bold text that ends in a period. The rest of the paragraph is the default body text style. We do this because our header tags must be on their own lines due to their current css styles.

When there is bold text that does not end with punctuation that runs into the beginning of a paragraph, we mark it up as an H4. This is especially true for examples in Title Case, but also of sentence case:

Some paragraphs have run-in headers that look like sentences

The rest of the paragraph gets displayed as default body text. It can be a tough judgement call when the bold text is sentence case with no punctuation to choose how to mark it up, but the general rule is: no punctuation? Make it an H4.

Some Paragraphs Have Run-in Headers That Almost Like Sentences

The rest of the paragraph gets displayed as default body text. It can be a tough judgement call when the bold text is sentence case with no punctuation to choose how to mark it up, but the general rule is: no punctuation? Make it an H4.


Lists and Numbered Headers

All lists are styled so that there is extra space at the end of them before the next paragraph!

Ordered lists, in our case, numbered, ideally have list items of no more than one paragraph. Ideally the order matters, hence the numbering. They support bold and italic text, as well as inline citations, but not Htags or nested items. Whether they end in periods seems to vary but it must be consistent for the entire list.

  1. Item 1
  2. Item 2
  3. Item 3

Unordered lists, in our case, bulleted, ideally have list items of no more than one paragraph. They support bold and italic text, inline citations, but not Htags. They also support nested items, but we try to limit the use of nesting to short, one line items and prefer to avoid if possible.


Additional Text Styles

To make text bold, we use strong tags, not b tags:

Bold

To make text italic, we use em tags, not i tags:

Italic

Pay attention to whether italicized text is the name of a publication, ours or others, or a book title. We use cite tags for publications and book titles (and rarely movie titles), but not article titles. It looks the same as italic text but is important to differentiate. Content packaging doesn’t always have these italicized or noted, so keep an eye out:

MIT SMR

In interviews, when there are multiple interviewees, the standard is to have the last name of the responder in bold (strong tags) with a colon (colon within the strong tags) appear before their response:

Geason: Sometimes you’ll receive interviews with only one interviewee that still has this represented in the document.