Typografie
Inter trägt den Text, JetBrains Mono signalisiert Code & Identifier. Das Type-System ist 1.25 modular skaliert mit zwei semantischen Utility-Klassen für Hero und Section.
Schriftfamilien
Beide Familien sind self-hosted via @fontsource — keine externen Google-Fonts-Requests, DSGVO-tauglich.
Inter
--font-sansHosting, das bleibt.
Open Source, variabel, optimiert für Screens. Standard für UI, Body, Headlines.
JetBrains Mono
--font-monoord_a4f9c2b8
Für IDs, Tokens, Code-Snippets, Environment-Variablen.
Semantische Utilities
Zwei Custom-Klassen mit clamp() — passen sich automatisch an die Viewport-Breite an.
.text-hero · clamp(3rem, 5vw, 4.5rem)
Hosting, das bleibt.
.text-section · clamp(2rem, 3.5vw, 3rem)
Was IVRY anders macht
Type-Scale
Tailwind 4 Standard-Skala. Body ist text-base (16px), kleinste lesbare Schriftgröße ist text-xs.
| Klasse | Pixel | Beispiel | Empfohlen für |
|---|---|---|---|
| text-6xl | 60px | Hosting, das bleibt | Display, Hero auf Landingpages |
| text-5xl | 48px | Hosting, das bleibt | Page-Hero (mobile bis Desktop) |
| text-4xl | 36px | Hosting, das bleibt | Section-Headline (h1 alternative) |
| text-3xl | 30px | Hosting, das bleibt | Sub-Headline, Card-Title XL |
| text-2xl | 24px | Hosting, das bleibt | Section-Title (h2) |
| text-xl | 20px | Hosting, das bleibt | Card-Title (h3) |
| text-lg | 18px | Hosting, das bleibt | Lead-Text, hervorgehobene Body |
| text-base | 16px | Hosting, das bleibt | Body — Standard für Fließtext |
| text-sm | 14px | Hosting, das bleibt | Sekundär-Text, Form-Labels |
| text-xs | 12px | Hosting, das bleibt | Caption, Metadata, Footer |
Font-Weights
Inter ist variabel — alle Weights von 100 bis 800 verfügbar. UI nutzt überwiegend 400, 500, 600, 700.
font-thin · 100
Aa
font-light · 300
Aa
font-normal · 400
Aa
font-medium · 500
Aa
font-semibold · 600
Aa
font-bold · 700
Aa
font-extrabold · 800
Aa
Anwendung
<!-- Body-Text mit Sekundärfarbe -->
<p class="text-base text-text-secondary leading-relaxed">
Hosting, das bleibt.
</p>
<!-- Section-Headline -->
<h2 class="text-section">
Was IVRY anders macht
</h2>
<!-- Mono für IDs, Tokens, Code -->
<code class="font-mono text-sm text-text-tertiary">
ord_a4f9c2b8
</code>