Typography
Typography controls how your text looks and feels. Good typography guides visitors through your content and makes your message clear.
Quick Reference
| Element | Size | When to Use |
|---|---|---|
| H1 | Largest (68px desktop) | Page titles, hero headlines |
| H2 | Very Large (55px desktop) | Major section titles |
| H3 | Large (44px desktop) | Subsection headers |
| H4 | Medium-Large (30px desktop) | Card titles, feature names |
| Body | Standard (18px desktop) | Regular paragraph text |
| Small | Smaller (15px desktop) | Captions, fine print |
Heading Levels Explained
H1 - Page Title
What it looks like: The largest, boldest text on the page. Very prominent.
When to use it: Only once per page, typically in the hero section. This is your main headline that tells visitors what the page is about.
Example: "Transform Your Business with AI-Powered Solutions"
H2 - Section Title
What it looks like: Large, bold text that clearly marks new sections.
When to use it: To introduce major sections of your page. Most pages have 3-6 H2s.
Example: "Our Services", "Why Choose Us", "Client Success Stories"
H3 - Subsection Header
What it looks like: Medium-large text that breaks content into smaller chunks.
When to use it: Within H2 sections to organize content further. Good for feature lists or detailed breakdowns.
Example: "24/7 Support", "Cloud Integration", "Custom Reporting"
H4 - Card or Feature Title
What it looks like: Smaller heading that still stands out from body text.
When to use it: Titles on cards, feature boxes, or list items. Works well for grid layouts.
Example: Card titles in a services grid, team member names.
Body Text Options
Regular Body Text
What it looks like: Standard paragraph text at a comfortable reading size (18px on desktop).
When to use it: All main content - descriptions, explanations, stories.
Lead Paragraph
What it looks like: Larger paragraph text that introduces a section.
When to use it: Opening paragraph after a heading, summaries, or key messages you want to emphasize.
Example: The introductory paragraph in a blog post or the summary beneath a page title.
Small Text
What it looks like: Smaller, lighter text for secondary information.
When to use it: Captions, footnotes, timestamps, metadata.
Example: "Posted on January 15, 2024", image credits, terms and conditions.
Text Alignment
Left Align
What it looks like: Text starts from the left edge, creating a clean left margin.
When to use it: Default for most content. Best for readability, especially longer paragraphs.
Center Align
What it looks like: Text is centered, creating equal space on both sides.
When to use it: Headlines, short section intros, testimonial quotes, or when content is visually centered.
Tip: Avoid centering long paragraphs - it's harder to read.
Right Align
What it looks like: Text aligns to the right edge.
When to use it: Rarely needed. Sometimes used for dates or numbers in specific layouts.
Font Weight
The theme uses the Proxima Nova font family. You may encounter these weight options:
| Weight | Look | Common Uses |
|---|---|---|
| Light (300) | Thin, elegant | Body text |
| Regular (400) | Standard | Supporting text |
| Medium (500) | Slightly bolder | Buttons, emphasis |
| Bold (700) | Heavy, prominent | Headings, important text |
| Black (900) | Extra heavy | H1 headings, hero text |
Tips for Good Typography
- Follow the hierarchy - H1 should be largest, then H2, then H3, and so on
- Don't skip levels - Go from H2 to H3, not H2 to H4
- Keep it readable - Left-align long content, limit line length
- Use headings for structure - They help visitors scan and understand your page
- Be consistent - Use the same heading style for similar types of content
Why Heading Order Matters for Accessibility
Screen readers and other assistive technologies rely on heading levels to help users navigate your page. When a visitor using a screen reader arrives on your page, they can press a key to jump between headings, getting a quick outline of your content.
What happens when headings are used correctly:
- Screen reader users can quickly scan the page structure
- Users can jump directly to sections that interest them
- Search engines better understand your content hierarchy
What happens when headings are out of order:
- The page structure becomes confusing for assistive technology users
- Jumping between sections becomes unpredictable
- Some users may miss important content entirely
The rule: Always use headings in order (H1 → H2 → H3). Never choose a heading level just because you like how it looks - use CSS or the theme's text size options for visual styling instead.