Headings

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Appropriate for all

Primary headings are set in Hoefler & Co.’s Tungsten.

While they default to Tungsten’s Semibold (600) weight, they can also be set in the Book (400) weight by adding the wdn-brand class to the heading tag. In fact, a little Tungsten Semibold goes a long way. Consider using wdn-brand for most headings and reserving Tungsten Semibold for the most important sections on your page.

This is a standard h1 heading.

This is a standard h2 heading.

This is a standard h3 heading.

This is a standard h4 heading.

This is a standard h5 heading.
This is a standard h6 heading.
<h1>This is a standard h1 heading.</h1>

This is a .wdn-brand h1 heading.

This is a .wdn-brand h2 heading.

This is a .wdn-brand h3 heading.

This is a .wdn-brand h4 heading.

This is a .wdn-brand h5 heading.
This is a .wdn-brand h6 heading.
<h1 class="wdn-brand">This is a .wdn-brand h1 heading.</h1>

Subheads

Subheads can appear before or after heading content, but note that they are actually wrapped inside the heading tags. This allows them to scale proportionally with their respective heading.

Subheads are set all caps in Hoefler & Co.’s Gotham.

This is an h1 heading and its subhead. This is the subhead.

This is an h2 heading and its subhead. This is the subhead.

This is an h3 heading and its subhead. This is the subhead.

This is an h4 heading and its subhead. This is the subhead.

This is an h5 heading and its subhead. This is the subhead.
This is an h6 heading and its subhead. This is the subhead.
<h1>This is an h1 heading. <span class="wdn-subhead">This is the subhead.</span></h1>

Here, the subhead is first. This is an h1 heading and its subhead.

Here, the subhead is first. This is an h2 heading and its subhead.

Here, the subhead is first. This is an h3 heading and its subhead.

Here, the subhead is first. This is an h4 heading and its subhead.

Here, the subhead is first. This is an h5 heading and its subhead.
Here, the subhead is first. This is an h6 heading and its subhead.
<h1><span class="wdn-subhead">This is the subhead.</span> This is an h1 heading.</h1>

Additional Heading Styles

This is a .wdn-sans-caps heading

The .wdn-sans-caps heading changes heading styles, but does not change the heading font-size.

This is a .wdn-alt-header heading

The .wdn-alt-header heading changes heading styles and changes the font-size to 1 rem.

This is a .wdn-list-header heading

The .wdn-list-header heading is similar in style to the .wdn-alt-header but adds a bottom border.

Accessibility Considerations: 

The semantics of heading elements are very important for accessibility, particularly with screen reader software which reads heading elements as a page outline and lets users jump to different heading elements on a page for quick in-page navigation. The follow describes some best practices for accessibility.

  • Every page must have an <h1> which describes the page.
  • Don't skip heading levels. Heading levels (1-6) describe the outline of a page. An outline doesn't skip levels, and neither should your page.
  • Don't use heading elements just for their styles. The only contents of a heading element should be text that describes the section of the page.

Read this article that discusses the importance of order and visibility of headers, and also find out the accessible way of hiding CMS's default <h1> page title.

Contributed By: 
IIM