We restrict the fonts used on the site to just three (and, to be honest, not many pages have code samples on, except for this documentation):

Chaparral Pro for headings (falls back to Georgia, Times New Roman, Times, serif)

Consolas for code samples and monospaced text (falls back to Monaco, 'Andale Mono', monospace)

Museo Sans for body text, buttons, inputs and everything else (falls back to Helvetica, Arial, sans-serif)

You should never need to set a font-family yourself - the font is based on the role of the text in the page.

Headings

There are six default heading sizes:

H1 Primary header

H2 Secondary header

H3 Tertiary header

H4 Quaternary header

H5 Quinary header

H6 Senary header

(OK, I had to look three of those words up.)

<h1>Primary header</h1>
<h2>Secondary header</h2>
<h3>Tertiary header</h3>
<h4>Quaternary header</h4>
<h5>Quinary header</h5>
<h6>Senary header</h6>

Headers can contain a <small.subtitle> tag which will go on a new line under the header.

H1 Primary header That means first

H2 Secondary header That means second

H3 Tertiary header That means third

H4 Quaternary header That means fourth

H5 Quinary header That means fifth

H6 Senary header That means sixth

<h1>Primary header <small class="subtitle">That means first</small></h1>
<h2>Secondary header <small class="subtitle">That means second</small></h2>
<h3>Tertiary header <small class="subtitle">That means third</small></h3>
<h4>Quaternary header <small class="subtitle">That means fourth</small></h4>
<h5>Quinary header <small class="subtitle">That means fifth</small></h5>
<h6>Senary header <small class="subtitle">That means sixth</small></h6>

Here are some examples of two-line headers, to check line-heights.

H1 Primary header
that goes on to two lines

H2 Secondary header
that goes on to two lines

H3 Tertiary header
that goes on to two lines

H4 Quaternary header
that goes on to two lines

H5 Quinary header
that goes on to two lines

H6 Senary header
that goes on to two lines

<h1>Primary header<br>that goes on to two lines
<h2>Secondary header<br>that goes on to two lines
<h3>Tertiary header<br>that goes on to two lines
<h4>Quaternary header<br>that goes on to two lines
<h5>Quinary header<br>that goes on to two lines
<h6>Senary header<br>that goes on to two lines

Body text

Lorem ipsum dolore est aute ut occaecat tempor enim aliqua.

Duis Ut anim ut ex amet non in irure occaecat ullamco in tempor nostrud velit in incididunt in amet reprehenderit ea in ad adipisicing officia aliqua ad enim ut officia dolore dolor dolor aliqua dolor in reprehenderit sint consectetur cillum laborum ea adipisicing proident id irure laborum amet proident nostrud et ut amet minim

Ullamco ad fugiat in incididunt occaecat aliquip in pariatur dolor excepteur pariatur anim ea aliquip ullamco minim ullamco dolore dolore consectetur irure id ad veniam ut aute eiusmod.

Reprehenderit eiusmod aliquip labore sint laborum dolor laborum adipisicing cillum aliqua qui mollit in officia do culpa esse veniam exercitation ut est amet eiusmod do voluptate sit velit in nostrud do dolore dolore adipisicing pariatur dolore Ut sunt tempor voluptate.

<p>Lorem ipsum dolore est aute ut occaecat tempor enim aliqua.</p>
<p>Duis Ut anim ut ex amet non in irure occaecat ullamco in tempor nostrud velit in incididunt in amet reprehenderit ea in ad adipisicing officia aliqua ad enim ut officia dolore dolor dolor aliqua dolor in reprehenderit sint consectetur cillum laborum ea adipisicing proident id irure laborum amet proident nostrud et ut amet minim</p>
<p>Ullamco ad fugiat in incididunt occaecat aliquip in pariatur dolor excepteur pariatur anim ea aliquip ullamco minim ullamco dolore dolore consectetur irure id ad veniam ut aute eiusmod.</p>
<p>Reprehenderit eiusmod aliquip labore sint laborum dolor laborum adipisicing cillum aliqua qui mollit in officia do culpa esse veniam exercitation ut est amet eiusmod do voluptate sit velit in nostrud do dolore dolore adipisicing pariatur dolore Ut sunt tempor voluptate.</p>

Lead paragraph

Add .lead to a paragraph to highlight it. Usually only used on the first paragraph on the page.

<div class="lead"><p>Duis ut anim ut ex amet non in irure occaecat ullamco in tempor nostrud velit in incididunt in amet reprehenderit ea in ad adipisicing officia aliqua ad enim ut officia dolore dolor dolor aliqua dolor in reprehenderit sint consectetur cillum laborum ea adipisicing proident id irure laborum amet proident nostrud et ut amet minim</p></div>

Lists

Unordered and ordered lists. Not much to see here, really. They can be nested.

Unordered lists

For when the order of the items isn't relevant:

• Milk
• Eggs
• Flour
• Toppings
  • Jam
  • Maple syrup
  • Lemon juice

Ordered lists

When the order is important:

1. Sift flour
2. Break in egg
3. Stir in milk
4. Pour batter into pan
5. Toss it
   1. Make sure it's ready
   2. Grab handle
   3. Throw
6. Eat

Inline attributes

Just for refence, here are some common inline elements. This will rarely be used:

• You can use the mark tag to highlight text.
• This line of text is meant to be treated as deleted text.
• This line of text is meant to be treated as no longer accurate.
• This line of text is meant to be treated as an addition to the document.
• This line of text will render as underlined
• This line of text is meant to be treated as fine print.
• This line is highlighted by being rendered as bold text.
• This line rendered as bold text.
• This line is emphasised by being rendered as italicised text.
• This line rendered as italicised text.