Der Hero-Text

Der Hero ist der erste Block einer Seite und besteht bei fast jedem Portfolio aus denselben drei Teilen, einer kleinen Rubrik, einer großen Überschrift und einem Untertitel. Neue Eigenschaften braucht er nicht. Alles dafür kennst du aus diesem Abschnitt, und dazu kommt die Skala der Tokens.

01 / 05Die Teile

• Größensprünge aus einer Skala, damit die drei Zeilen in einem erkennbaren Verhältnis zueinander stehen.
• Die engere Zeilenhöhe für die Überschrift, weil große Schrift weniger Luft braucht.
• Die gesperrte Rubrik, also text-transform mit letter-spacing in em.
• text-wrap: balance an der einen Stelle, an der es etwas bringt.
• Die Zeilenlänge, die bei den Einheiten mit ch schon kurz vorkam.

02 / 05Die Größen als Verhältnis

<div class="gruppe zufall">
  <p class="rubrik">Zufällig gewählt</p>
  <h2>Eine Überschrift</h2>
  <p class="unter">Ein Untertitel darunter.</p>
</div>

<div class="gruppe skala">
  <p class="rubrik">Aus einer Skala</p>
  <h2>Eine Überschrift</h2>
  <p class="unter">Ein Untertitel darunter.</p>
</div>

.gruppe {
  font-family: system-ui, sans-serif;
  border: 1px solid #d4d4d8;
  padding: 16px;
  margin-bottom: 16px;
}

.gruppe h2 {
  margin: 0 0 8px 0;
  line-height: 1.1;
}

.gruppe .rubrik,
.gruppe .unter {
  margin: 0;
}

/* 15, 29 und 19: keine erkennbare Beziehung zueinander. */
.zufall .rubrik {
  font-size: 15px;
}

.zufall h2 {
  font-size: 29px;
}

.zufall .unter {
  font-size: 19px;
}

/* 16, 32 und 20: das Doppelte und ein Viertel mehr. */
.skala .rubrik {
  font-size: 16px;
}

.skala h2 {
  font-size: 32px;
}

.skala .unter {
  font-size: 20px;
}

Beide Gruppen enthalten dieselben drei Elemente in fast derselben Größe. Die untere wirkt trotzdem geordneter, und dabei geht es nur um ein paar Pixel.

Wie bei den Abständen bringt eine Skala die Größen in eine Beziehung. 16, 32 und 20 sind das Einfache, das Doppelte und ein Viertel mehr. 15, 29 und 19 sind drei Zahlen, die zufällig nebeneinander stehen.

Für Schriftgrößen wächst eine Skala meistens mit einem Faktor statt in festen Schritten. Jede Stufe ist ungefähr das 1,25- bis 1,4-fache der vorigen, auf glatte Zahlen gerundet. Unten gibt das kleine Sprünge und oben große. Die Skala des Portfolios ist 14, 16 und 20, und darüber kommen zwei fließende Stufen bis 28 und 40, als Tokens --schrift-s bis --schrift-2xl.

03 / 05Die Zeilenlänge

<p class="breit">Ohne Grenze läuft der Text über die ganze Breite. Am Zeilenende muss das Auge weit zurückspringen, und dabei verliert man regelmäßig die Zeile. Das ist keine Frage des Geschmacks, sondern der Ergonomie.</p>
<p class="schmal">Mit einer Grenze in ch bricht die Zeile früher um. Hier sind es 24 Zeichen, damit man den Unterschied auch in einer schmalen Spalte sieht. Für Fließtext wären das zu wenige.</p>

p {
  font-family: system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  background-color: #f4f4f5;
  padding: 8px;
  margin-bottom: 12px;
}

/* ch ist die Breite der Ziffer Null in der aktuellen
   Schrift. 24ch sind also ungefähr vierundzwanzig
   Zeichen. Für echten Fließtext nimmt man 60ch; das
   greift je nach Schrift erst ab rund 600 bis 700px. */
.schmal {
  max-width: 24ch;
}

Als lesbare Länge für eine Zeile Fließtext nennt Robert Bringhurst in „The Elements of Typographic Style“ 45 bis 75 Zeichen. Darunter zerfällt der Text, darüber verliert das Auge beim Zeilensprung die Zeile.

Mit max-width: 60ch steht das direkt im Code, denn ch ist die Breite der Ziffer Null in der aktuellen Schrift. Eine Angabe in Pixeln täte dasselbe, aber nur so lange, bis jemand die Schriftgröße ändert.

Im Beispiel steht trotzdem 24ch. 60ch sind bei 18px je nach Schrift rund 600 bis 700 Pixel, und in einer schmaleren Spalte greift die Grenze dann nie. Beide Absätze wären gleich breit, und es gäbe nichts zu sehen. Für echten Fließtext bleiben es 45 bis 75 Zeichen.

Über der Seite steht bei diesem Beispiel „für 900 px“, und im Vollbild steht die Seite von allein auf diesen 900. Der obere Absatz ist dann 884 Pixel breit, der untere bleibt bei rund 250 bis 290, je nachdem, welche Schrift dein System für system-ui nimmt. Um diesen Unterschied geht es. Bei dieser Breite würden übrigens auch die empfohlenen 60ch greifen.

Für den Hero heißt das, dass die Überschrift weniger Zeichen je Zeile bekommt als der Untertitel. Große Schrift verträgt kürzere Zeilen, weil eine Zeile ohnehin schon breit ist. Ich fange mit 20ch für die Überschrift und 55ch für den Untertitel an.

In Pixeln ist die Zeile der Überschrift trotzdem die längere, denn 20ch bei 60px Schrift sind breiter als 60ch bei 18px. Die 45 bis 75 Zeichen gelten für Text, den man Zeile für Zeile liest, nicht für drei Wörter in großer Schrift.

04 / 05Wo balance zählt

<h2 class="ohne">Eine Überschrift, bei der ein einzelnes Wort in der letzten Zeile landet</h2>
<h2 class="mit">Eine Überschrift, bei der ein einzelnes Wort in der letzten Zeile landet</h2>

h2 {
  font-family: system-ui, sans-serif;
  font-size: 32px;
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 0 24px 0;
}

/* Verteilt die Zeilen gleichmäßig, statt die letzte
   mit einem einzelnen Wort zu füllen. */
.mit {
  text-wrap: balance;
}

text-wrap: balance verteilt die Zeilen einer Überschrift gleichmäßig. Ohne es steht regelmäßig ein einzelnes Wort allein in der letzten Zeile, und das sieht nach Versehen aus.

Der Browser rechnet dafür mehrere Umbruchvarianten durch, und das kostet etwas. Deshalb greift es nur bis zu einer Handvoll Zeilen und ist ausdrücklich für Überschriften gedacht. Für Fließtext gibt es pretty. Das rechnet weniger und verhindert vor allem die einsame letzte Zeile, nur Firefox kennt es bisher nicht.

05 / 05Der Hero als Probe

Am Hero siehst du Typografie-Entscheidungen sofort, weil dort nichts ablenkt. Es gibt kein Bild, keine Navigation, keine Karten. Nur drei Textzeilen.

Wirkt eine Seite an dieser Stelle unruhig, liegt es meist an einem von drei Dingen. Die Größen stehen in keinem Verhältnis, die Zeilenhöhe der Überschrift ist zu weit, oder die Zeilen sind zu lang.

In der Aufgabe entsteht dieser Block aus den Stufen der Tokens.