Skip to main content

The Story of Festa's Typography

Inter: Our Voice of Change

Typography in purpose-driven design goes beyond aesthetics—it drives change and bridges vision with reality. Using the Inter typeface, our system embodies accessibility, innovation, and purposeful communication.

Like the spectrum of social change we support, Inter's weight range carries different aspects of our mission. From the commanding presence of Inter Black (900) for urgent calls to action, to the gentle embrace of Inter Light (300) for supporting narratives—each weight plays its role in our story of impact.

Font Family

Inter

font-family: 'Inter', ui-sans-serif, system-ui, sans-serif

Aa

Why Inter?

  • Designed for screens: Optimized for digital readability at all sizes
  • Excellent x-height: Clear distinction between characters
  • Variable font support: Smooth weight transitions
  • Open source: Free for commercial use
  • Wide language support: Latin, Cyrillic, Greek, and more

Character Set Preview

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()

Heading Scale

Our heading scale uses fluid typography with clamp() to automatically adjust between mobile and desktop. All headings maintain consistent visual hierarchy while adapting to viewport size.

A Rhythm of Change

Our fluid type scale, carefully orchestrated through clamp() functions, adapts like a living organism to different screen sizes. This responsiveness mirrors our commitment to reaching every audience, regardless of their device or context. From the commanding 4rem display text to the intimate 0.875rem body copy, each size creates a rhythm that guides users through their journey of discovery and action.

Display

text-display

Size Range

48px - 64px

Line Height

1.1

Weight

900

Tracking

-0.02em

Live Preview:

Transform Social Impact

Usage:

Landing page heroes, major section titles

Heading 1

text-h1

Size Range

36px - 48px

Line Height

1.2

Weight

900

Tracking

-0.01em

Live Preview:

Building Resilient Communities

Usage:

Page titles, primary headings

Heading 2

text-h2

Size Range

30px - 36px

Line Height

1.3

Weight

700

Tracking

-0.01em

Live Preview:

Our Approach to Design

Usage:

Section titles, major subsections

Heading 3

text-h3

Size Range

24px - 30px

Line Height

1.4

Weight

700

Tracking

0

Live Preview:

Trauma-Informed Principles

Usage:

Card titles, content headings

Heading 4

text-h4

Size Range

20px - 24px

Line Height

1.4

Weight

600

Tracking

0

Live Preview:

Getting Started Guide

Usage:

Subsection titles, list headers

Heading 5

text-h5

Size Range

18px - 20px

Line Height

1.5

Weight

600

Tracking

0

Live Preview:

Key Features

Usage:

Small section titles, labels

Heading 6

text-h6

Size Range

16px - 18px

Line Height

1.5

Weight

600

Tracking

0

Live Preview:

Resources

Usage:

Micro headings, table headers

Body Text Scale

Body text styles are optimized for extended reading. We use slightly taller line heights (1.5-1.7) to improve readability and reduce eye strain.

Body Large

text-body-lg

Size

clamp(1rem, 2.5vw, 1.125rem)

Line Height

1.7

Weight

400

Tracking

-0.01em

Live Preview:

We empower social impact organizations with trauma-informed design systems that prioritize accessibility, dignity, and user wellbeing.

Usage:

Introductory paragraphs, lead text

Body

text-body

Size

1rem (16px)

Line Height

1.6

Weight

400

Tracking

0

Live Preview:

Our design system ensures consistency across all Festa projects while maintaining flexibility for unique organizational needs.

Usage:

Standard body text, paragraphs

Body Small

text-body-sm

Size

0.875rem (14px)

Line Height

1.5

Weight

400

Tracking

0.01em

Live Preview:

Last updated: November 5, 2025

Usage:

Captions, metadata, supporting text

Typography in Action

See how Festa's typography system works in real UI contexts. These examples demonstrate proper hierarchy, spacing, and readability in production components.

Hero Section

Using text-display for maximum impact with supporting lead text.

Transform Social Impact Through Design

We empower nonprofit organizations with trauma-informed design systems that prioritize accessibility, dignity, and user wellbeing.

Article Content

Complete typography hierarchy in a long-form content context with proper line length (45-75 characters).

Building Trauma-Informed Digital Experiences

By Festa Team November 5, 2025 8 min read

Trauma-informed design isn't just about avoiding triggers—it's about creating digital spaces that actively support healing, agency, and dignity for all users.

Core Principles

Our approach to trauma-informed UX centers on three foundational principles that guide every design decision we make. These principles ensure that our digital products serve survivors and vulnerable populations with care and respect.

Safety & Choice

Users should always feel in control. We provide clear exit options, transparent navigation, and non-judgmental language throughout all interfaces.

Accessibility First

Every component meets WCAG 2.2 Level AA standards. We test with screen readers, ensure keyboard navigation, and maintain high contrast ratios for text and interactive elements.

"Design is not just what it looks like and feels like. Design is how it works—and for trauma survivors, how it feels matters immensely."

— Festa Design Philosophy

Implementation Guidelines

When implementing trauma-informed design, start with these practical steps:

  • Audit existing interfaces for potentially triggering content or patterns
  • Provide content warnings before sensitive material
  • Ensure users can easily pause, stop, or exit experiences
  • Use clear, supportive language rather than clinical or judgmental terms
  • Test with diverse user groups including trauma survivors

These principles translate directly into design decisions. For example, we avoid auto-playing videos, use calm color palettes, and provide multiple ways to navigate content.

Last updated: November 5, 2025 • Share this article

Card Components

Cards use text-h3 or text-h4 for titles with proper text hierarchy.

Services

Comprehensive design and development services tailored for social impact organizations.

Starting at $5,000 per engagement

Explore services

Resources

Free toolkits, guides, and templates to help your organization get started with trauma-informed design.

100% free, always

Browse resources

Lists & Hierarchical Content

Combining headings with lists and supporting text for instructional or reference content.

Getting Started Checklist

Follow these steps to implement the Festa Design System in your project.

1. Initial Setup

  • Install Tailwind CSS v3 and configure theme colors
  • Add Inter font family to your project
  • Copy typography tokens to tailwind.config.js

2. Component Integration

  • Review the component library in the sandbox
  • Copy component code to your project
  • Customize components for your brand while maintaining accessibility

Note: All components are framework-agnostic and work with React, Vue, or vanilla HTML.

Accessibility & Readability

Accessibility as Story

Every typographic choice in our system speaks to our core belief that design should serve everyone. From the carefully calculated line heights that guide eyes smoothly across content, to letter spacing that breathes life into dense information, we've crafted a system that welcomes all readers to participate in the narrative of change.

WCAG 2.2 Typography Standards

All typography meets WCAG 2.2 Level AA standards with proper contrast, scalable text (up to 200%), and clear visual hierarchy.

Optimal Line Length

For body text, aim for 45-75 characters per line (about 16-24 words). Use max-w-2xl or max-w-prose classes.

✓ Good Line Length

This line length is optimal for reading. It's not too short to cause frequent line breaks, and not too long to lose your place.

✗ Too Long

This line is too long and makes it difficult for readers to track from the end of one line to the beginning of the next, causing eye strain and reducing comprehension.

Best Practices

  • Maintain hierarchy: Use heading levels sequentially (h1 → h2 → h3), never skip levels
  • Limit font weights: Use 400 (regular), 600 (semibold), 700 (bold), 900 (black) only
  • Avoid all caps for body text: Use sentence case or title case for better readability
  • Add proper spacing: Use consistent margins between sections (mb-4, mb-6, mb-12)
  • Test with screen readers: Ensure heading levels are announced correctly