This page demonstrates all the typography styles available in the Berry Blast starter. It serves as both a test page and a reference for content creators.

Headings

Headings help organize content into logical sections. Here are all six heading levels:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Paragraphs and Text

Regular paragraphs are styled for optimal readability with appropriate line height and spacing. Here's an example of a longer paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You can also use bold text for emphasis, italic text for titles or foreign words, and bold italic when you really need to make a point. There's also ~~strikethrough~~ for deleted content.

Links

Links are styled with the primary color: Visit our homepage or check out GitHub.

Lists

Unordered Lists

First item in the list
Second item with more content
- Nested item one
- Nested item two
Third item at the root level

Ordered Lists

First step in the process
Second step with more details
1. Sub-step A
2. Sub-step B
Third and final step

Blockquotes

"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Blockquotes can also contain multiple paragraphs:

This is the first paragraph of a longer quote.

And this is the second paragraph, continuing the thought from above.

Code

Inline code looks like this: const greeting = "Hello, World!" and can be used within sentences.

Code blocks are great for larger snippets:

// A simple function example
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

/* CSS example */
.button {
  background-color: var(--color-primary-600);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

Tables

Feature	Basic	Pro	Enterprise
Pages	10	100	Unlimited
Storage	1 GB	10 GB	100 GB
Support	Email	Priority	Dedicated
Price	Free	$19/mo	$99/mo

Images

Images can be included using markdown syntax. Example:

![Alt text](/path/to/image.jpg)

Horizontal Rules

Content above the rule.

Content below the rule.

Other Elements

Abbreviations

The HTML specification is maintained by the W3C.

Keyboard Input

To save a file, press Ctrl + S (or Cmd + S on Mac).

Marked Text

You can highlight important information using the mark element.

Small Text

This is some fine print that you probably don't need to read.

Definition Lists

Eleventy: A simpler static site generator
Tailwind CSS: A utility-first CSS framework
Alpine.js: A lightweight JavaScript framework

Summary

This typography test page covers all the common prose elements you'll encounter when creating content. The styles are designed to be readable, accessible, and visually appealing across all devices.

Typography Test