Typography System
Testing and showcasing the SOWND AFFECTS semantic typography system
SOWND AFFECTS Typography System
A comprehensive guide to our semantic typography system following modern design principles.
Monigue
Role: Display & Hero
Weight: 900 (Black)
Character: Bold, modern, attention-grabbing
Bold, impactful headlines and hero text
Museo Moderno
Role: Headings & Titles
Weight: 600-700 (Semi-Bold to Bold)
Character: Professional, clean, structured
Clean, readable headings and section titles
Roc Grotesk
Role: Body & Content
Weight: 400 (Regular)
Character: Clean, readable, versatile
Highly readable body text and content
Typography Scale
Hero Text
.text-hero
Monigue
Main landing page headlines, major announcements
SOWND AFFECTS
Display Large
.text-display-lg
Monigue
Large display text, special occasions
Audio Excellence
Display
.text-display
Monigue
Display headlines, hero sections
Transform Your Space
Title XL
.text-title-xl
Museo Moderno
Page titles, section headers
Noise Score Report
Title Large
.text-title-lg
Museo Moderno
Major section headings
Key Findings
Title
.text-title
Museo Moderno
Section headings, card titles
Executive Summary
Title Small
.text-title-sm
Museo Moderno
Subsection headings
Quick Wins
Subtitle
.text-subtitle
Museo Moderno
Subtitles, secondary headings
Implementation Guide
Body Large
.text-body-lg
Roc Grotesk
Lead paragraphs, important content
This is important body text that needs emphasis
Body
.text-body
Roc Grotesk
Regular body text, descriptions
This is standard body text for regular content
Body Small
.text-body-sm
Roc Grotesk
Secondary text, metadata
Supporting information and details
Caption
.text-caption
Roc Grotesk
Captions, labels, small text
Image caption or label text
Migration Guide
From Arbitrary to Semantic
❌ Old (Arbitrary)
text-6xl font-bold✅ New (Semantic)
text-herotext-3xl font-semiboldtext-title-xltext-lg font-mediumtext-body-lgBest Practices
Do ✅
- • Use semantic class names (text-title, text-body)
- • Follow the established hierarchy
- • Use Monigue for hero/display text
- • Use Museo for headings and titles
- • Use Roc Grotesk for body text
- • Test on mobile devices
Don't ❌
- • Use arbitrary Tailwind sizes (text-xl, text-2xl)
- • Mix font weights inconsistently
- • Skip hierarchy levels
- • Use Monigue for body text
- • Override font families randomly
- • Ignore responsive behavior
Responsive Behavior
All semantic text styles automatically scale across devices:
Mobile (≤640px)
- Hero: 64px
- Display: 48px
- Title XL: 36px
Tablet (641-1024px)
- Hero: 80px
- Display: 56px
- Title XL: 44px
Desktop (≥1025px)
- Hero: 96px
- Display: 64px
- Title XL: 48px
Live Examples
AUDIO INCLUSIVE
Transform Your Space
Experience the power of acoustic optimization with our comprehensive noise assessment and solution platform.
Noise Score Report
Executive Summary
Key Findings
Implementation Strategy
Quick Wins
This lead paragraph uses the body-lg style to emphasize important introductory content that sets the stage for the detailed information below.
This is regular body text that provides the main content. It's designed to be highly readable across all devices and provides optimal reading experience for users.
Secondary information uses body-sm styling and is often presented in a muted color to indicate its supporting role in the content hierarchy.
Caption text is used for image descriptions, metadata, and other small supporting text elements.
Acoustic Assessment
Comprehensive evaluation of your space's current acoustic performance and noise sensitivity factors.
Duration: 2-3 hours
Professional analysis included
Implementation Plan
Detailed roadmap for acoustic improvements with timeline, budget, and expected outcomes.
Custom solutions
ROI projections
Font Family Mixing Example
Monigue (Display Font)
BOLD IMPACT STATEMENT
Museo Moderno (Headings)
Clean Professional Headlines
Roc Grotesk (Body Text)
Highly readable body content that flows naturally and provides excellent reading experience across all devices and contexts.