Typography System

This guide explains the typography system in LamaPress, including how to use typography classes and customize the system.

Table of Contents

• Overview
• Typography Classes
  • Class Format
  • Available Categories
  • Available Sizes
• Using Typography Classes
  • Display Text
  • Headings
  • Body Text
• Responsive Typography
• Customizing Typography
  • Adding New Sizes
  • Modifying Existing Sizes
• Best Practices
  • 1. Use Semantic Classes
  • 2. Maintain Hierarchy
  • 3. Test Responsive
• Related Documentation

---

Overview

LamaPress uses a custom typography system that generates responsive typography classes from tailwind/config/typography.js. Classes follow the pattern ll-{category}-{size} and automatically scale between mobile and desktop sizes.

Typography Classes

Class Format

Typography classes follow this pattern:

ll-{category}-{size}

Examples:

• ll-display-2xl - Large display text
• ll-heading-1 - Level 1 heading
• ll-body-rg - Regular body text

Available Categories

1. Display (ll-display-{size})

   • Large, attention-grabbing text
   • Used for hero headlines, large callouts

2. Heading (ll-heading-{level})

   • Semantic headings (h1-h6 equivalent)
   • Used for section headings, page titles

3. Body (ll-body-{size})

   • Body text and paragraphs
   • Used for content, descriptions

Available Sizes

Display:

• ll-display-2xl - 40px → 96px
• ll-display-xl - 32px → 72px
• ll-display-md - 24px → 48px
• ll-display-xs - 20px → 24px

Heading:

• ll-heading-1 - 32px → 48px
• ll-heading-2 - 28px → 40px
• ll-heading-3 - 24px → 32px
• ll-heading-4 - 20px → 24px
• ll-heading-5 - 18px → 20px
• ll-heading-6 - 16px → 18px

Body:

• ll-body-xl - 24px → 32px
• ll-body-lg - 18px → 20px
• ll-body-rg - 14px → 16px
• ll-body-sm - 12px → 14px

Using Typography Classes

Display Text

Use display classes for large, prominent text:

<h1 class="ll-display-2xl">Welcome to Our Site</h1>
<p class="ll-display-xl">Subheading text</p>

Headings

Use heading classes for semantic headings:

<h1 class="ll-heading-1">Page Title</h1>
<h2 class="ll-heading-2">Section Title</h2>
<h3 class="ll-heading-3">Subsection Title</h3>

Body Text

Use body classes for content text:

<p class="ll-body-lg">Large body text for important content</p>
<p class="ll-body-rg">Regular body text for standard content</p>
<p class="ll-body-sm">Small body text for captions, metadata</p>

Responsive Typography

Typography classes automatically scale between mobile (800px) and desktop (1440px) breakpoints using CSS clamp():

/* ll-heading-1 generates: */
font-size: clamp(2rem, calc(2rem + 1vw), 3rem);

This ensures:

• Minimum size on mobile (first value)
• Maximum size on desktop (last value)
• Smooth scaling in between

Customizing Typography

Adding New Sizes

Edit tailwind/config/typography.js:

export const typography = {
  display: {
    global: {
      fontFamily: 'sans',
      fontWeight: 300,
    },
    '2xl': {
      fontSize: [40, 96],
    },
    // Add new size
    '3xl': {
      fontSize: [48, 120],
    },
  },
  // ...
}

Then use: ll-display-3xl

Modifying Existing Sizes

Edit the size values in tailwind/config/typography.js:

heading: {
  '1': {
    fontSize: [32, 48], // [mobile, desktop] in pixels
    lineHeight: 1.2,    // Optional line height
  },
}

Note: Changes require rebuilding Tailwind CSS (npm run build).

Best Practices

1. Use Semantic Classes

Use appropriate category for content:

• Display for hero/attention text
• Heading for section titles
• Body for content text

2. Maintain Hierarchy

Follow heading hierarchy:

• Use ll-heading-1 for main page title
• Use ll-heading-2 for major sections
• Use ll-heading-3 for subsections
• Don't skip levels

3. Test Responsive

Always test typography at different viewport sizes:

• Mobile (400px)
• Tablet (800px)
• Desktop (1440px+)

Related Documentation

• Styling Overview - Styling approach
• Tailwind Configuration - Tailwind setup
• Responsive Design - Responsive patterns

---

Next Steps:

• Review Color System for text colors
• Check Responsive Design for responsive patterns
• See existing components for typography usage examples