Typography

Headings

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 insidethe 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>

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>