Font Families
Playfair Display
Used for headings and display text to create a sense of stability and authority.
Montserrat
Used for body text and UI elements to ensure readability and accessibility.
Typography System Overview
Design Philosophy
Our typography system is built on trauma-informed design principles, prioritizing emotional safety, cognitive accessibility, and predictable reading experiences. Every typographic choice supports user autonomy and reduces potential triggers.
Predictability
Consistent patterns reduce cognitive load
Accessibility
WCAG 2.2 AA compliance minimum
Emotional Safety
Supportive, non-threatening presentation
Complete Type Hierarchy
Heading Hierarchy
H1 Page Title
.text-h1-desktop (48px/56px)H2 Section Title
.text-h2-desktop (36px/44px)H3 Subsection Title
.text-h3-desktop (24px/32px)H4 Component Title
.text-h4-desktop (20px/28px)Body Text Hierarchy
Body text for main content and descriptions
.text-body (16px/24px)Small text for secondary information
.text-small (14px/20px)Caption text for metadata and labels
.text-caption (12px/16px)Implementation Guidelines
Best Practices
- • Use responsive typography classes for all screen sizes
- • Maintain 1.5x line height minimum for readability
- • Use semantic HTML headings (h1-h6) with visual classes
- • Ensure 4.5:1 contrast ratio minimum for body text
Common Mistakes
- • Using ALL CAPS text (can appear threatening)
- • Insufficient color contrast for accessibility
- • Mixing too many font weights in one context
- • Using red text for general warnings or errors
Trauma-Informed Typography Principles
Core Typography Principles
Clear hierarchy: Predictable text patterns reduce cognitive load and support orientation
Consistent patterns: Repeated text styles create emotional safety through predictability
Generous spacing: Adequate line height and margins prevent visual overwhelm
Typography Hierarchy Benefits
Playfair Display: Creates authority and stability for headings
Montserrat: Ensures readability and accessibility for body content
Responsive scaling: Maintains readability across all devices
Type Scale
Desktop Headings
H1 Desktop (48/56)
48px size / 56px line height / -0.02em letter spacing
H2 Desktop (36/44)
36px size / 44px line height / -0.02em letter spacing
H3 Desktop (24/32)
24px size / 32px line height / -0.02em letter spacing
H4 Desktop (20/28)
20px size / 28px line height / -0.02em letter spacing
Body Text
Body Text (16/24)
16px size / 24px line height / 0 letter spacing
Small Text (14/20)
14px size / 20px line height / 0 letter spacing
Caption Text (12/16)
12px size / 16px line height / 0 letter spacing
Headline & Body System Reference
Desktop
Body
Tablet & Mobile
Code Example
<h1 class="font-playfair font-bold text-h1-desktop text-azurite-blue-900"> H1 Desktop Example</h1>
<p class="font-montserrat text-body text-grey-800"> Body text example</p>Trauma-Informed Notes
- Clear information hierarchy supports user orientation and reduces cognitive load.
- Consistent headline and body styles create predictability and emotional safety.
- All text meets minimum color contrast for accessibility.
- Responsive scaling ensures readability on all devices.
Trauma-Informed Typography & Color Guidelines
Core Trauma-Informed Typography Principles
1. Predictable Hierarchy
Clear, consistent heading patterns reduce cognitive load and support user orientation.
Main Section
Subsection Title
Supporting body text maintains comfortable reading flow.
2. Generous Spacing
Adequate line height and margins prevent visual overwhelm.
This paragraph demonstrates trauma-informed spacing with 1.5x line height.
Generous margins between paragraphs create visual breathing room.
3. Calming Color Palette
Nature-inspired colors reduce anxiety and create emotional safety.
4. Accessible Contrast
All text meets WCAG AA standards for readability.
Trauma-Informed Typography Examples
Trauma-Informed Approach
Welcome to Your Learning Space
You have complete control over your learning experience. Take breaks whenever you need them.
Content notice: This module discusses sensitive topics. You can preview content or skip sections at any time.
Avoid This Approach
COMPLETE YOUR TRAINING NOW
Time is running out! You must finish this module today or lose your progress.
Warning: This content contains disturbing material. Continue at your own risk.
Trauma-Informed Color Usage
Primary Colors for Text
Azurite Blue
Primary headings, navigation, links
Grey Scale
Body text, secondary content
Chrysocolla Green
Actions, progress, success states
Content Warning & Alert Colors
Rhodochrosite Rose
Used for gentle content warnings and emergency exits. This warm, nurturing color provides safety without creating alarm.
Content Notice: This section discusses difficult topics. You can skip ahead or take a break anytime.
Emergency Exit Pattern
Emergency exits use rhodochrosite-rose to be noticeable without being alarming or triggering.
Do Use
- • Consistent color patterns for predictability
- • High contrast ratios (4.5:1 minimum for body text)
- • Calming, nature-inspired color palette
- • Color to support hierarchy, not create it
- • Gentle transitions and subtle hover states
Avoid
- • Harsh reds or aggressive warning colors
- • Flashing or rapidly changing colors
- • Low contrast combinations that strain reading
- • Color as the only way to convey information
- • Overwhelming color variety in single views
Implementation Guidelines
Code Examples
Trauma-Informed Heading Pattern
<h2 class="font-playfair font-bold text-h2-mobile md:text-h2-tablet lg:text-h2-desktop text-azurite-blue-900 mb-6">
Your Learning Progress
</h2>Content Warning Implementation
<div class="bg-rhodochrosite-rose-50 border-l-4 border-rhodochrosite-rose p-md rounded-r-md mb-lg">
<p class="font-montserrat font-medium text-rhodochrosite-rose-800 mb-xs">
Content Notice
</p>
<p class="font-montserrat text-small text-rhodochrosite-rose-700">
This section contains discussion of difficult topics...
</p>
</div>Supportive Body Text
<p class="font-montserrat text-body text-grey-800 leading-relaxed mb-4">
Take your time with this content. Learning happens at your own pace.
</p>Testing Checklist
Accessibility Testing
- Color contrast validation (WCAG AA)
- Screen reader testing
- Keyboard navigation
- Responsive typography testing
Trauma-Informed Testing
- Test with trauma survivors
- Validate emergency exit functionality
- Check content warning clarity
- Verify calming visual effect
Essential Trauma-Informed Typography Guidelines
- Always maintain clear headline and body hierarchy for orientation and comfort - users should never feel lost or confused about content structure.
- Use color to gently reinforce structure, not to create pressure or urgency - avoid aggressive reds or time-pressured color coding.
- Ensure all text and color combinations meet or exceed WCAG AA contrast standards - accessibility is foundational to trauma-informed design.
- Favor calm, predictable color and type patterns to reduce cognitive load and support emotional regulation.
- Pair Playfair Display (headlines) with Montserrat (body) for clarity and stability - avoid mixing too many typefaces.
- Use trauma-safe spacing and avoid crowding to support psychological safety and comfortable reading.
- Provide content warnings and emergency exit options where appropriate - always give users control over their experience.
- Test with diverse users, including trauma survivors, for validation - user testing is essential for trauma-informed design.
Practical Implementation & Context Examples
Learning Interface Examples
Course Module Interface
Module 3: Understanding Triggers
Content Notice: This module discusses trauma responses. You can preview sections or take breaks at any time.
In this module, we'll explore common trauma triggers and how they manifest in daily life. You have complete control over your learning pace.
Typography: Clear hierarchy, supportive language, gentle content warnings
Assessment Interface
Self-Reflection Exercise
This is an opportunity to reflect on your learning. There are no right or wrong answers.
Reminder: You can skip questions, take breaks, or return to this exercise later.
Question 1 of 5
How do you typically notice when you're feeling overwhelmed?
Typography: Non-judgmental language, optional completion, clear progress indicators
Error and Success State Typography
Supportive Error Handling
We're here to help
It looks like there was an issue with your submission. This happens sometimes, and it's not your fault.
What you can try: Check your internet connection, or try again in a few minutes. Your progress has been saved.
Typography: Reassuring tone, clear next steps, progress preservation
Gentle Success Celebration
Congratulations on your progress!
You've completed the Introduction to Trauma-Informed Design module. That's a meaningful step in your learning journey.
Take a moment to appreciate what you've accomplished. The next module will be available when you're ready.
Typography: Acknowledging achievement without pressure, self-paced progression
Implementation Checklist
Pre-Launch Typography Review
Content & Language
- ☐ All headings use supportive, non-threatening language
- ☐ Content warnings are gentle and informative
- ☐ Error messages are reassuring and solution-focused
- ☐ No ALL CAPS or aggressive formatting
Technical Implementation
- ☐ Responsive typography classes applied consistently
- ☐ WCAG 2.2 AA contrast ratios achieved
- ☐ Line height 1.5x minimum for readability
- ☐ Semantic HTML headings with visual classes