Typography Style Guide - Complete Element Reference

A comprehensive demonstration of all typography styles and combinations available in our design system.

This guide demonstrates all available typography styles and their combinations in our design system. Each section showcases different elements and their spacing relationships.

Headings and Basic Text

This paragraph follows an h2 heading, demonstrating the standard text styling and spacing. It shows how regular paragraphs look with the base font size and line height. The text is in a muted foreground color for better readability. This is an example of italicized text within a paragraph.

Third Level Heading

After an h3 heading, we can see how the spacing works. This paragraph demonstrates the relationship between headings and subsequent content. The spacing between headings and paragraphs is carefully considered for optimal readability. Italicized text can also appear at the end of paragraphs.

Fourth Level Heading

This content shows spacing after an h4 heading. The text continues with proper line height and spacing, maintaining consistency throughout the document.

Fifth Level Heading

Content after h5. Demonstrating how smaller headings maintain their hierarchy while being visually distinct.

Sixth Level Heading

Content after h6. The smallest heading level, still maintaining proper spacing and hierarchy.

Code Samples

Here's a paragraph before a code block. The spacing between text and code should be carefully considered.

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

function getUser(id: string): Promise<User> {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

This paragraph follows a code block, showing how content flows after code samples. The spacing should be consistent with other content transitions.

Inline Code

This paragraph contains inline code to demonstrate how it appears within regular text. You can also have bold text with inline code and links together.

Lists and Their Combinations

Here's a paragraph before an unordered list. The spacing between paragraph and list should be distinct and consistent. Italicized text works well in introductory paragraphs.

• First list item with bold text to demonstrate emphasis
• Second list item with a link to somewhere showing link styling
• Third list item with both bold and linked content
• Fourth item with regular text
• Fifth item with inline code and bold text
• Sixth item showing how long text wraps properly within list items while maintaining proper indentation and spacing
• Seventh item with italicized text to show emphasis
• Eighth item with italicized text and bold text together
• Ninth item with italicized text and a link

This paragraph follows a list, demonstrating spacing after lists. The transition between different content types should be smooth and visually balanced.

1. First numbered item with regular text
2. Second numbered item with strong emphasis to show bold styling
3. Third numbered item with a link demonstrating link appearance
4. Fourth numbered item with both bold and linked content
5. Fifth item showing proper indentation and spacing
6. Sixth item demonstrating how long text wraps within numbered lists while maintaining proper alignment

Images and Figures

Here's a paragraph before a figure. The spacing between text and figures should be carefully considered.

This paragraph follows a figure, showing how content flows after images. The spacing should be consistent with other content transitions.

Tables

Here's a paragraph before a table. The spacing between text and tables should be carefully considered.

This paragraph follows a table, showing how content flows after tables. The spacing should be consistent with other content transitions.

Nested Combinations

Complex List Structures

1. First level numbered item
   • Nested unordered item with bold text
   • Another nested item with a link
   • Third nested item showing proper indentation
   • Fourth item with inline code
2. Second level numbered item
   • With its own nested list
   • And multiple items
   • Including bold text and links
   • And inline code examples
3. Third level numbered item
   • Demonstrating deep nesting
   • With various content types
   • And proper spacing at all levels

Blockquote Examples

Here's a paragraph before a blockquote. The spacing between text and blockquotes should be carefully considered. Italicized text can be used to introduce blockquotes.

This is a blockquote demonstrating the quote styling. It should have proper indentation and visual distinction from regular content. Italicized text works well within blockquotes too.

It can also contain bold text, inline code, and links while maintaining proper spacing. And italicized text can be combined with other styles.

And here's a third paragraph in the blockquote to show how multiple paragraphs work within quotes. Italicized text at the end of a blockquote paragraph.

This paragraph follows a blockquote, showing how content flows after quotes. The spacing should be consistent with other content transitions.

Link Demonstrations

This paragraph contains multiple different links to show how they appear in context with bold text and regular content. Links should be clearly distinguishable while maintaining readability. Italicized text can be used to provide additional context.

Link Combinations

• List item with a link and bold text
• Another item with multiple links in sequence
• Third item with a link containing bold text
• Fourth item showing how links appear in different contexts
• Fifth item with a link and inline code
• Sixth item with italicized text and a link
• Seventh item with italicized text, bold text, and a link

Final Section with Mixed Content

• List item before a heading
• Another list item with bold text
• Third item with a link
• Fourth item with inline code

Nested Heading After List

1. Numbered list after a nested heading
2. With multiple items
3. To demonstrate spacing
4. Including bold text and links
5. With inline code examples

Final paragraph

with bold text, a link, and inline code to demonstrate all styles together. This shows how different typography elements can be combined while maintaining proper spacing and hierarchy. Italicized text can be used to provide additional emphasis or context at the end of documents.