Headers

Primary headers 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 header tag. In fact, a little Tungsten Semibold goes a long way. Consider using wdn-brand for most headers and reserving Tungsten Semibold for the most important sections on your page.

This is a standard h1 header.

This is a standard h2 header.

This is a standard h3 header.

This is a standard h4 header.

This is a standard h5 header.

This is a standard h6 header.

<h1>This is a standard h1 header.</h1>

This is a .wdn-brand h1 header.

This is a .wdn-brand h2 header.

This is a .wdn-brand h3 header.

This is a .wdn-brand h4 header.

This is a .wdn-brand h5 header.

This is a .wdn-brand h6 header.

<h1 class="wdn-brand">This is a .wdn-brand h1 header.</h1>

Subheads

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

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

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

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

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

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

This is an h5 header and its subhead. This is the subhead.

This is an h6 header and its subhead. This is the subhead.

<h1>This is an h1 header. <span class="wdn-subhead">This is the subhead.</span></h1>

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

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

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

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

Here, the subhead is first. This is an h5 header and its subhead.

Here, the subhead is first. This is an h6 header and its subhead.

<h1><span class="wdn-subhead">This is the subhead.</span> This is an h1 header.</h1>

Subheads

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

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

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

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

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

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

This is an h5 header and its subhead. This is the subhead.

This is an h6 header and its subhead. This is the subhead.

<h1>This is an h1 header. <span class="wdn-subhead">This is the subhead.</span></h1>

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

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

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

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

Here, the subhead is first. This is an h5 header and its subhead.

Here, the subhead is first. This is an h6 header and its subhead.

<h1><span class="wdn-subhead">This is the subhead.</span> This is an h1 header.</h1>

Subheads

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

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

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

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

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

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

This is an h5 header and its subhead. This is the subhead.

This is an h6 header and its subhead. This is the subhead.

<h1>This is an h1 header. <span class="wdn-subhead">This is the subhead.</span></h1>

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

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

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

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

Here, the subhead is first. This is an h5 header and its subhead.

Here, the subhead is first. This is an h6 header and its subhead.

<h1><span class="wdn-subhead">This is the subhead.</span> This is an h1 header.</h1>

Subheads

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

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

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

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

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

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

This is an h5 header and its subhead. This is the subhead.

This is an h6 header and its subhead. This is the subhead.

<h1>This is an h1 header. <span class="wdn-subhead">This is the subhead.</span></h1>

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

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

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

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

Here, the subhead is first. This is an h5 header and its subhead.

Here, the subhead is first. This is an h6 header and its subhead.

<h1><span class="wdn-subhead">This is the subhead.</span> This is an h1 header.</h1>

Paragraphs

The wdn-intro-p style is larger than the standard paragraph size and is useful for grabbing attention and leading the eye into more detailed content. It should usually be reserved for the first paragraph on the page, but can be used again to introduce sections on pages with large amounts of copy. Use with discretion. Remember: if everything is important, nothing is important.

Body copy is set in Hoefler & Co.’s Mercury Text.

The Elements of Typographic Style Applied to the Web is an excellent guide for styling text on websites.

How about we look at some lorem ipsum? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tortor odio, suscipit quis metus sit amet, vestibulum congue libero. Sed luctus ligula a leo cursus accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sit amet metus vel augue commodo lacinia eu at justo. Aliquam laoreet rutrum nunc.

<p class="wdn-intro-p">Your intro paragraphs content goes here.</p>