Typografie

Klare Typografie schafft Lesbarkeit und visuelle Hierarchie.

Type Scale

Celestia unterstützt variable Type Scales. Die nachfolgende Skala nutzt ein Verhältnis von 1.25 (Major Third).

Für die Berechnung anderer Skalen siehe typescale.com.

Level	Grösse	Usage
H1	48px	Seitentitel, Hero
H2	40px	Kapitelüberschriften
H3	32px	Sub-Sektionen
H4	24px	Karten-Titel
H5	20px	Listen-Überschriften
H6	16px	Labels
Body	16px	Standard-Text
Body Large	18px	Einleitungen
Caption	14px	Hilfstexte

Schriftarten

Primär (UI): TBD

• Alle UI-Elemente
• Fliesstext
• Überschriften

Text Styles in Figma

Alle Texte als Styles definieren:

• typography/heading/h1
• typography/body/default
• typography/caption/small

Hierarchie

Visuelle Gewichtung durch:

1. Grösse – Grösser = wichtiger
2. Gewicht – Bold für Hervorhebung
3. Farbe – Primär für wichtig, Sekundär für untergeordnet

Checkliste

• Type Scale eingehalten
• Ausreichender Kontrast (4.5:1 minimum)
• Mobile: Grössen nicht zu klein (min. 16px)

---

Gute Typografie ist unsichtbar – schlechte stört sofort.