Typography

Monster provides a readable type scale and sensible defaults for semantic HTML.

Use semantic elements first. Let headings, lists, quotes and figures describe the content.
Keep sizing relative. Monster uses rem so browser zoom and font preferences continue to work.
Prefer hierarchy over decoration. Spacing and heading levels should carry the structure.

Headings

Use real heading elements for document structure. Use monster-h1 to monster-h6 only when the visual size must differ from the semantic level.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Typography elements

Inline elements add emphasis or meaning without changing the document structure.

All the standard stuff, like bold, italic and underlined text.
Highlighting text
Adding inline code using the code element.
Displaying keyboard commands like ALT+F4 using the kbd element.

Lists

Use unordered lists for groups and ordered lists for sequences.

Item 1
Item 2
Item 3

Do this thing
Do that thing
Do the other thing

Blockquotes

Use blockquote for a quotation and cite for its source.

Friends don’t spy; true friendship is about privacy, too.
– Stephen King

Code blocks

Use inline code for names and pre for multiline snippets.


                                    <div class="monster">

                                      <p>Hello, World!</p>

                                    </div>

HTML elements

Article

Use article for content that can stand on its own.

This is an article

A release note is a self-contained update that can be shared independently.

Section

Use section to group content under a shared heading.

This is a section

This section explains one topic within a larger page.

Images

Use meaningful alternative text. Add figure and figcaption when an image needs a visible caption.

Four white geese standing together — Four white geese

Details and summary

Use details when optional information should remain available without interrupting the reading flow.

Implementation note

This content is available on demand.