Typography Patterns

Collection of typography patterns and text formatting examples.

Headings Hierarchy

All heading levels from H1 to H6.

Heading 1 - The quick brown fox jumps over the lazy dog

Heading 2 - The quick brown fox jumps over the lazy dog

Heading 3 - The quick brown fox jumps over the lazy dog

Heading 4 - The quick brown fox jumps over the lazy dog

Heading 5 - The quick brown fox jumps over the lazy dog
Heading 6 - The quick brown fox jumps over the lazy dog

Body Text Variations

Different text sizes and weights.

Extra Large Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Base Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Extra Small Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text Colors

Semantic text color variations.

Primary text color for main content

Muted text color for secondary content

Primary brand color text

Destructive or error text

Success or positive text

Warning or caution text

Information or link text

Font Weights

Different font weight variations.

Light weight - The quick brown fox jumps over the lazy dog

Normal weight - The quick brown fox jumps over the lazy dog

Medium weight - The quick brown fox jumps over the lazy dog

Semibold weight - The quick brown fox jumps over the lazy dog

Bold weight - The quick brown fox jumps over the lazy dog

Text Styles

Italic, underline, and other text decorations.

Italic text - The quick brown fox jumps over the lazy dog

Underlined text - The quick brown fox jumps over the lazy dog

Strikethrough text - The quick brown fox jumps over the lazy dog

Uppercase text - The quick brown fox jumps over the lazy dog

LOWERCASE TEXT - THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

capitalized text - the quick brown fox jumps over the lazy dog

Inline Text Elements

Strong, emphasis, code, and other inline elements.

This is bold text and this is emphasized text.

This is inline code within a paragraph.

This is a hyperlink within text.

This is small text and this is highlighted text.

Paragraphs & Line Heights

Different line height variations for readability.

Tight line height (leading-tight)

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.

Normal line height (leading-normal)

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.

Relaxed line height (leading-relaxed)

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.

Lists

Ordered and unordered lists.

Unordered List

  • First item in the list
  • Second item in the list
  • Third item in the list
  • Fourth item in the list

Ordered List

  1. First step in the process
  2. Second step in the process
  3. Third step in the process
  4. Fourth step in the process

Blockquotes

Styled quotations and citations.

"The best way to predict the future is to invent it."
— Alan Kay

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

— Steve Jobs

Code Blocks

Formatted code snippets.

function greet(name) {
  return `Hello, ${name}!`;
}

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

Article Layout

Example of article or blog post typography.

The Art of Typography

Published on April 12, 2026 • 5 min read

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Why Typography Matters

Good typography establishes a strong visual hierarchy, provides a graphic balance to the website, and sets the product's overall tone. Typography should guide and inform users, optimize readability and accessibility, and ensure an excellent user experience.

Key Principles

  • Establish a clear visual hierarchy
  • Use appropriate font sizes and weights
  • Maintain consistent spacing and alignment
  • Ensure sufficient contrast for readability

Remember that typography is not just about making things look good—it's about making content accessible and easy to read for all users.

"Typography is the craft of endowing human language with a durable visual form."

Best Practices

When designing with typography, always consider your audience and the context in which your content will be consumed. Mobile devices require different considerations than desktop screens, and different languages may need specific type treatments.

Text Alignment

Different text alignment options.

Left aligned text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Center aligned text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right aligned text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Justified text - 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.