Design
Typography
Cormorant Garamond für Editorial-Tonfall, DM Sans für Klarheit.
Rolle Font Gewicht Größe (Desktop)
──────────────────────────────────────────────────────────────────────────
Display / Hero Cormorant Garamond 500 clamp(2.8rem, 5vw, 4.2rem)
Section Titles Cormorant Garamond 500 clamp(2rem, 3.5vw, 2.8rem)
Card Headings Cormorant Garamond 600 1.3–1.4rem
Body DM Sans 400 0.95rem, line-height: 1.7
Navigation DM Sans 500 0.92rem
Labels / Overlines DM Sans 600 0.75rem, letter-spacing: 0.12em, uppercase
Buttons DM Sans 500 0.95rem
Captions / Meta DM Sans 400 0.85remGoogle Fonts Import
Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500
DM+Sans:wght@400;500;600Typografie-Regeln
- Cormorant Garamond italic (
em) für emotionale Wörter in Headlines (z.B. "Deine Begleiterin") - Maximale Textbreite für Fließtext: 65ch (~520px)
- Letter-spacing auf Headlines: -0.02em bis -0.03em
- Keine anderen Fonts verwenden
Quelle: DesignGUIDE/fragjulia-design-brief-v3.md §2.3. Token-Definitionen: packages/ui/src/tokens.ts → fontSans, fontSerif.