Typography test

A “kitchen sink” for testing prose content with Amplify’s reset and global styles.

We start by noting early on how Amplify applies some mildly opinionated text-wrap styles to headings (levels 1-4), paragraphs, list items, description lists, figure captions and blockquotes to improve their visual appearance. Feel free to override or remove these styles if a design needs to do so.

Here is a paragraph of text featuring various HTML tags. Account for emphasis, strong and small text. Don’t forget to account for abbreviations too, using the abbr (abbr) element. Lastly you can define deleted text inserted text.

If you are referencing keyboard keys, make sure you use the kbd element like this: shift. Like we have already in these paragraphs, if you are referencing code, use the code element. Don’t forget the samp element either. An example for that element is this: Press F1 to continue.

Use the var element to reference a variable like this: The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

If you want an inline quote, use the q element quoted text, which automatically adds the correct smart quote marks for the specified language. Lastly don’t forget the subscript (sub) (H₂O) and superscript (sup) (E = MC²), and of course, link elements.

Blockquote styles are the context for this heading level 2 which is long for testing leading and balance

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

Make sure you only use a cite if the quote source can be linked to.

Just a quick paragraph to follow the horizontal rule. A bit of Lipsum? Sure thing: Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Details and summary

Tables

Sometimes a table has both column and row headers. This is a big enough table to warrant using our responsive tables markup

Description lists time

Just a quick paragraph to introduce heading level 3 too.

Description lists are under-used, but extremely useful

A description list term

A description list detail

Another term

A slightly longer details element to work with.

Sometimes description lists have multiple details

This term introduces two details

This is the first one

This is the second one, which is a bit longer

Lists, glorious lists

Lists in various forms.

A simple unordered list

• List item one
• List item two
• List item three, which is a longer item to make sure our marker styles work well for mult-line list items
• List item four

Moving on to a nested unordered list

• Unordered List item one
  • Nested list item
    • Level 3, item one
    • Level 3, item two
    • Level 3, item three
    • Level 3, item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Order, numbered lists are next

1. List item one
2. List item two
3. List item three, which is a longer item to make sure our marker styles work well for mult-line list items
4. List item four

A numbered list with the start attribute

99. List item
100. List item
101. List item
102. List item

A numbered list with the reversed attribute

1. List item
2. List item
3. List item
4. List item

Moving on to a nested unordered list

1. Ordered List item one
   1. Nested list item
      1. Level 3, item one
      2. Level 3, item two
      3. Level 3, item three
      4. Level 3, item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

A mix of both

• Unordered List item one
  1. Nested ordered list item
     • Level 3, item one
     • Level 3, item two
     • Level 3, item three
     • Level 3, item four
  2. List item two
  3. List item three
  4. List item four
• List item two
• List item three
• List item four

Preformatted text / blocks of code styles follow on next

.context-alert {
	position: absolute;
	inset: auto 0 calc(100% + 0.5em) 0;
	padding: 0.25em;
	background: var(--color-primary);
	color: var(--color-light);
	font-weight: var(--font-bold);
	text-align: center;
	transition: opacity var(--transition-fade) 200ms,
		transform var(--transition-bounce-fast) 200ms;
}

Forms

Images, figures, pictures and videos

Under no circumstances should you have an image without an alt attribute. At a minimum, it should be an empty value like this one. That should only be used for purely decorative images though.

An image in a figure with a caption

A picture element

A video element

An SVG with an image role and alternative text (using aria-label)

All the headings

Here they all are together, so we can double-check they look alright. Ordinarily, there would only be a single H1 heading on a page.

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5

This is a heading 6

All the headings followed by paragraphs

Here are all the headings followed by paragraphs so we can check how they relate. Ordinarily, there would only be a single H1 heading on a page.

This is a heading 1

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.

Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur.

This is a heading 2

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.

This is a heading 3

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla

This is a heading 4

Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a heading 5

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

This is a heading 6

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.