🌐 🤖 Typografie überläuft auf schmalen Screens (eyebrow, h1, subtitle, MAC-Input) #5

New issue

Closed

opened 2026-08-13 10:14:26 +02:00 by holm · 0 comments

holm commented

2026-08-13 10:14:26 +02:00

Owner

Dimension	Bewertung	Einschätzung
Aufwand	`██░░░░░░░░`	Gering — feste letter-spacing/font-size durch clamp() ersetzen
Nutzen	`███████░░░`	Hoch — betrifft Kopfbereich und Eingabefeld, also den ersten Eindruck
Bruchhäufigkeit	`███████░░░`	Hoch — jedes Gerät unter ~400 px CSS-Breite
Nachhaltigkeit	`████████░░`	Hoch — fluide Metriken skalieren auch auf künftige Formate
Dringlichkeit	`██████░░░░`	Mittel — unschön, aber nicht funktionsverhindernd

Symptom

Bei 360 px CSS-Breite (Fallback-Fonts, headless reproduziert):

.subtitle2 bricht mitten im Satz um: „KEIN NETZ · KEIN SERVER · NUR" / „HTML"
.eyebrow ([ OFFLINE // OUI RESOLVER ]) läuft exakt bis zur Kante — bei 320 px überläuft es
#mac zeigt die MAC nur angeschnitten: EC:1C:5D:78:2E: — das letzte Byte ist nicht sichtbar
h1 (MAC ▸ HERSTELLER) steht bei 360 px randbündig, bei 320 px zu breit

Ursache

Feste letter-spacing-Werte (3–4 px) kombiniert mit font-size-clamp(), deren Untergrenze zu hoch ist:

.eyebrow   { font-size: 14px;                      letter-spacing: 4px; }
h1         { font-size: clamp(30px, 7vw, 46px);    letter-spacing: 2px; }
.subtitle2 { font-size: 13px;                      letter-spacing: 3px; }
#mac       { font-size: clamp(20px, 5vw, 28px);    letter-spacing: 4px; }

Bei 360 px greift überall die Untergrenze der clamp() — die Schrift skaliert also gar nicht mehr mit, und das letter-spacing schon vorher nicht.

Fix

font-size und letter-spacing fluide führen (clamp() mit realistischer Untergrenze für 320 px). Der Zeichenabstand ist der eigentliche Platzfresser: 17 Zeichen × 4 px = 68 px allein für Spacing im MAC-Feld.

Teil von #7.

🤖 angelegt von Claude v00 (API/Token holm)

| Dimension | Bewertung | Einschätzung | |---|---|---| | Aufwand | `██░░░░░░░░` | Gering — feste letter-spacing/font-size durch clamp() ersetzen | | Nutzen | `███████░░░` | Hoch — betrifft Kopfbereich und Eingabefeld, also den ersten Eindruck | | Bruchhäufigkeit | `███████░░░` | Hoch — jedes Gerät unter ~400 px CSS-Breite | | Nachhaltigkeit | `████████░░` | Hoch — fluide Metriken skalieren auch auf künftige Formate | | Dringlichkeit | `██████░░░░` | Mittel — unschön, aber nicht funktionsverhindernd | ## Symptom Bei 360 px CSS-Breite (Fallback-Fonts, headless reproduziert): - `.subtitle2` bricht mitten im Satz um: „KEIN NETZ · KEIN SERVER · NUR" / „HTML" - `.eyebrow` (`[ OFFLINE // OUI RESOLVER ]`) läuft exakt bis zur Kante — bei 320 px überläuft es - `#mac` zeigt die MAC nur angeschnitten: `EC:1C:5D:78:2E:` — das letzte Byte ist nicht sichtbar - `h1` (`MAC ▸ HERSTELLER`) steht bei 360 px randbündig, bei 320 px zu breit ## Ursache Feste `letter-spacing`-Werte (3–4 px) kombiniert mit `font-size`-`clamp()`, deren **Untergrenze zu hoch** ist: ```css .eyebrow { font-size: 14px; letter-spacing: 4px; } h1 { font-size: clamp(30px, 7vw, 46px); letter-spacing: 2px; } .subtitle2 { font-size: 13px; letter-spacing: 3px; } #mac { font-size: clamp(20px, 5vw, 28px); letter-spacing: 4px; } ``` Bei 360 px greift überall die **Untergrenze** der clamp() — die Schrift skaliert also gar nicht mehr mit, und das letter-spacing schon vorher nicht. ## Fix font-size **und** letter-spacing fluide führen (`clamp()` mit realistischer Untergrenze für 320 px). Der Zeichenabstand ist der eigentliche Platzfresser: 17 Zeichen × 4 px = 68 px allein für Spacing im MAC-Feld. Teil von [#7](https://forgejo.mueller.network/holm.tools.public/oui-decode/issues/7). > 🤖 angelegt von Claude v00 (API/Token holm)

holm referenced this issue

2026-08-13 10:14:53 +02:00

🌐 🤖 Sammel: Web-App bricht auf dem Handy um und wirkt kaputt (Pixel 9 Pro) #7

holm

2026-08-13 10:14:53 +02:00