What it is

Didot 700. The size class (--h1, --h2, --h3) is separate from the element, so the outline stays correct. --rule adds the 56×4 bar under a page H1 or a band’s opening H2.

When to use

• The H1 of a page head, with --rule.
• A band’s opening h2 in .hs-band__head, with --rule.
• An h3 inside a band, with no rule.
• A member’s name or a credential on a recognition ground, with --honor.

When not to use

• A separator between bands: change the ground of the Band. The rule is a brand mark, not a separator.
• The title of a group with a count, such as a directory letter: use the Group heading.
• A figure that proves a claim: use the Stat.
• The label above a heading: use the Eyebrow.

Rules

• Pick the element for the outline, then the size class for the look. A band opens with an h2, even where it looks like an h1. Use h3 only inside a band.
• Use --rule only under a page head H1 or a band’s opening h2. The titles of the hero, the CTA band and the award hero take no rule: the gold button is the accent there.
• Use --honor for recognition only (member names, credentials), and always with --rule. On a plate band the rule is honor gold without the modifier.
• Use no colour modifier. The ground sets the colour: navy on light, white on navy. Keep the weight at 700: Didot has one bold cut.
• Write ® and ™ as the plain character (®, ™), in headings and body text alike. Never wrap them in <sup>. The plain glyph keeps the type’s own size and weight.
• Put the one paragraph under a heading in .hs-lead.

Accessibility

• The size class is separate from the element, so the document outline stays correct.
• The rule is an ::after pseudo-element. A screen reader does not read it.
• Navy on white is 12.4:1. On navy the heading is white.

Variants

H1 with gold rule

The page head H1.

<h1 class="hs-heading hs-heading--h1 hs-heading--rule">Honor Society&reg; Membership Tiers</h1>

H2 with gold rule, eyebrow and lead

A band’s opening head.

<p class="hs-eyebrow">Free to join</p>
<h2 class="hs-heading hs-heading--h2 hs-heading--rule">Turn your achievement into opportunity.</h2>
<p class="hs-lead">Membership is free. Professional Track&trade; is an optional upgrade.</p>

H2 centred

For a band whose content is centred (tier cards).

<h2 class="hs-heading hs-heading--h2 hs-heading--rule hs-heading--center">Honor Your Ambition&trade;</h2>

H2 on navy

No modifier: white heading, gold rule.

<h2 class="hs-heading hs-heading--h2 hs-heading--rule">Support that comes with membership.</h2>

H3

Inside a band only. No rule.

<h3 class="hs-heading hs-heading--h3">Mentorship</h3>

Honor rule

Recognition only: a member’s name, a credential. --honor needs --rule. On a plate band the rule is honor gold without the modifier. The name is a sample.

<p class="hs-eyebrow">Honor Society&reg; member</p>
<h1 class="hs-heading hs-heading--h1 hs-heading--rule hs-heading--honor">Avery Example</h1>