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