beqom Visual identity and Content Style Guide

beqom

Headings

Headings provide both structure and visual points of reference to help readers scan content. If you can break text logically into smaller sections, the extra spacing and distinct fonts associated with headings will help readers scan content and find entry points.

In any type of content—whether it’s UI, web content, marketing, or advertising—use headings consistently.

Writing headings

Think of headings as an outline, only more interesting—pithy, even. If readers don’t read the headings, they probably won’t read the text that follows, either.

  • Top-level headings communicate what’s most important and divide content into major subjects. Make them as specific as you can to catch the reader’s attention.
  • When there’s a lot to say under a top-level heading, look for two or more distinct topics, and use second-level headings (subheads) to break up the large section into more scannable chunks. If you can’t find at least two distinct topics, skip the second-level headings.
  • Identify at least two distinct topics in a section before you add another heading level. And never follow a heading with another heading.
  • Each new heading represents a new or more specific topic. The heading should introduce the topic in an interesting way.

Use headings judiciously. One heading level is usually plenty for a page or two of content. For long content, you might need to use additional heading levels.

Keep headings as short as possible, and put the most important idea at the beginning. This is especially critical in blogs and social media.

Be as specific as you can, and be even more detailed with lower-level headings. For example, a second-level heading should be more specific than a first-level heading.

Focus on what matters to customers, and choose words they’d use themselves. In most cases, don’t talk about products, features, or commands in headings. Concentrate on what customers can achieve or what they need to know.

Use parallel sentence structure for all headings at the same level. For example, use noun phrases for first-level headings, verb phrases for second-level headings, and infinitive phrases for headings in instructions.

Consider imperative phrases, such as To create a heading, for headings and titles related to tasks. For headings that aren’t related to tasks, use a noun phrase such as Headings, if possible.

Don’t use ampersands (&) or plus signs (+) in headings unless you’re referring to UI that contains them or space is limited.

Avoid hyphens in headings if you can. In resized windows or mobile devices, they can result in awkward line breaks.

Use vs., not v. or versus, in headings.

  • Keep adjectives and prepositions with the words they modify.
  • Keep hyphenated words and multiple-word proper nouns (such as New York) on the same line.
  • Break after punctuation.
  • Break naturally, at the end of a complete phrase, if possible.
  • If you can’t fit a headline on two lines, rewrite it.

Use vertical spacing to make headings stand out. Headings typically have extra space above them and often less space below them. Close proximity between the heading and the text that follows it communicates to the reader that they’re related. Heading spacing is built into heading styles in most templates. Use those styles to control spacing in a consistent way.

Don’t use extra line breaks to increase heading spacing, especially in web content. In responsive web design, the layout and screen elements (including headings) adjust to the screen size automatically, whether they’re viewed on mobile devices, tablets, laptops, or desktops. Extra line breaks might detract from the content appearance on mobile devices.