Typography Test

Typographical illustrationsfor Headings, Text headings and consistent body text.

Fluid Heading styles.

Heading level one <h1>

Heading level two <h2>

Heading level three <h3>

Heading level four <h4>

Heading level five <h5> (not used)
Heading level six <h6> (not used)


Fluid Text Heading styles.

Text Heading are used to prevent breaking the heading hierarchy

XL Heading level .xl-text

Heading level one .h1-text

Heading level two .h2-text

Heading level three .h3-text

Heading level four .h4-text



Fluid Default Text styles.

Page proposition (promotional, engagement) text. This is the first paragraph after the heading <h1>. This does not apply on the home page.

This is a standard paragraph. Also showing the default link style as seen in a paragraph.

The "muted" text paragraph, useful for captions, secondary descriptions, or metadata that shouldn't compete with primary body copy.

Eyebrow is a short phrase placed above the main headline to categorize, introduce, or set context.

"strong" text, use for emphasis i.e. the importance in terms of content

"bold" text, use if you intend to draw attention, only use where there is no other possibility (purely visual)

"emphasis" text, use if you intend to emphasize specific words (used sparingly)

"pre, code, kbd" every character has the same width,
    distinguish technical content from normal text