Der Fließtext steht auf 22 px / 33 px. Die übrigen Größen sind mit demselben Faktor 1,294 mitgewachsen, damit die Verhältnisse untereinander erhalten bleiben:

	vorher	jetzt
Überschriften	30/39	39/50
Eyebrow	18	23
Zahlen	35,6	46
Etiketten	13	16
Fußzeile	15	19
Menü	16	18

Das Menü habe ich bewusst weniger stark vergrößert — mit dem vollen Faktor hätten Menü und die neuen Ikonen nicht mehr in die Kopfzeile gepasst.

Luftiger: Abschnittsabstand 90 → 118 px, Fußzeile 50/34 → 64/40 px. Die Textspalte der Zweispalter musste von 485 auf 628 px mit, sonst wären aus 57 Zeichen pro Zeile nur noch 44 geworden. Gemessen liegen die Textblöcke jetzt bei 53 bis 57 Zeichen — im komfortablen Bereich.

Drei Fehler wurden dabei sichtbar und sind mit behoben:

Das Menü hatte noch line-height: 16px aus der alten Skala — bei 18 px Schrift quetschte das den Text. Jetzt 1.2.
Der Service-Zweispalter lief auf dem Telefon 465 px breit in einen 375 px breiten Bereich. Ein 1fr-Track hat als Minimum die Mindestbreite seines Inhalts, und ein Bild bringt seine Eigenbreite mit. min-width: 0 auf den Spalten behebt es.
Der Schriftzug im Logo ist mit 9,74:1 sehr breit — bei 50 px Höhe misst er 487 px und passt neben dem Menüknopf auf kein Telefon. Auf schmalen Breiten jetzt 28 px hoch (273 px breit).

Dazu vorsorglich overflow-x: clip am Dokument und visibility: hidden für das geschlossene Mobilmenü — dessen Links waren vorher mit der Tabulatortaste erreichbar, obwohl es unsichtbar war.

Eine Einschränkung: Die Mobilansicht konnte ich nur eingeschränkt prüfen. Meine Vorschau emuliert das Gerät optisch mit 375 px, meldet an window.innerWidth aber ihre echte Panelgröße von 441 px — eine fixierte Kopfzeile richtet sich danach aus und wirkte dadurch zu breit. Auf einem echten Gerät tritt das nicht auf. Ein kurzer Blick aufs Telefon wäre trotzdem gut.

Umgesetzt in ff6b934. Der Fließtext steht auf **22 px / 33 px**. Die übrigen Größen sind mit demselben Faktor 1,294 mitgewachsen, damit die Verhältnisse untereinander erhalten bleiben: | | vorher | jetzt | |---|---|---| | Überschriften | 30/39 | 39/50 | | Eyebrow | 18 | 23 | | Zahlen | 35,6 | 46 | | Etiketten | 13 | 16 | | Fußzeile | 15 | 19 | | Menü | 16 | 18 | Das Menü habe ich bewusst weniger stark vergrößert — mit dem vollen Faktor hätten Menü und die neuen Ikonen nicht mehr in die Kopfzeile gepasst. Luftiger: Abschnittsabstand 90 → 118 px, Fußzeile 50/34 → 64/40 px. Die Textspalte der Zweispalter musste von 485 auf 628 px mit, sonst wären aus 57 Zeichen pro Zeile nur noch 44 geworden. Gemessen liegen die Textblöcke jetzt bei 53 bis 57 Zeichen — im komfortablen Bereich. **Drei Fehler wurden dabei sichtbar und sind mit behoben:** 1. Das Menü hatte noch `line-height: 16px` aus der alten Skala — bei 18 px Schrift quetschte das den Text. Jetzt `1.2`. 2. Der Service-Zweispalter lief auf dem Telefon 465 px breit in einen 375 px breiten Bereich. Ein `1fr`-Track hat als Minimum die Mindestbreite seines Inhalts, und ein Bild bringt seine Eigenbreite mit. `min-width: 0` auf den Spalten behebt es. 3. Der Schriftzug im Logo ist mit 9,74:1 sehr breit — bei 50 px Höhe misst er 487 px und passt neben dem Menüknopf auf kein Telefon. Auf schmalen Breiten jetzt 28 px hoch (273 px breit). Dazu vorsorglich `overflow-x: clip` am Dokument und `visibility: hidden` für das geschlossene Mobilmenü — dessen Links waren vorher mit der Tabulatortaste erreichbar, obwohl es unsichtbar war. **Eine Einschränkung:** Die Mobilansicht konnte ich nur eingeschränkt prüfen. Meine Vorschau emuliert das Gerät optisch mit 375 px, meldet an `window.innerWidth` aber ihre echte Panelgröße von 441 px — eine fixierte Kopfzeile richtet sich danach aus und wirkte dadurch zu breit. Auf einem echten Gerät tritt das nicht auf. Ein kurzer Blick aufs Telefon wäre trotzdem gut.

Danmin closed this issue

2026-08-20 21:57:08 +02:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

Danmin/gravSchleh#4

No description provided.

Rows
Columns