Typografie

Webfunktionen: font-size rem em-Einheit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() und clamp() Darstellungsbereichseinheiten

Allgemeine Best Practices

  • Verwenden Sie für line-height Zahlen ohne Einheit (z.B. 1.5), um eine relative Skalierung bei der Vererbung der Schriftgröße zu ermöglichen.
  • Verwenden Sie overflow-wrap: break-word (oder anywhere) für lange URLs.
  • Verwenden Sie NICHT px für die Schriftgröße. Verwenden Sie rem, um die Einstellungen des Nutzers für die Schriftgröße im Browser (Stammschriftgröße) zu berücksichtigen, oder em/Prozentwerte für die kontextbezogene Größenanpassung.

Lesbarkeit

  • Vermeiden Sie lange Textzeilen: Begrenzen Sie Absatzblöcke auf eine maximale Breite von 80 Zeichen.
  • Weißraum-Flüsse vermeiden: Vermeiden Sie text-align: justify, da dies die Lesbarkeit des Textes beeinträchtigen kann. Wenn Sie es verwenden müssen, kombinieren Sie es mit hyphens: auto, um übermäßigen Leerraum zwischen Wörtern zu vermeiden.
  • Keine verschnörkelten Schriftarten verwenden: Verwenden Sie für den Haupttext keine Schreibschrift.
  • Verwenden Sie keine Großbuchstaben zur Hervorhebung: Verwenden Sie stattdessen Fettschrift für visuelle Hervorhebungen und <em>/<strong>, wenn die Hervorhebung semantisch ist.
  • Betonung insgesamt einschränken: Wenn alles betont wird, verliert die Betonung ihre Bedeutung. Verwenden Sie sie nur dort, wo sie die Art und Weise ändert, wie der Inhalt gelesen werden soll.
  • Zoom-Einstellungen von Nutzern unterstützen: Ermöglichen Sie es Nutzern, die Textgröße um bis zu 200 % zu ändern, ohne dass Inhalte oder Funktionen verloren gehen.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Textumbruch

  • Verwenden Sie text-wrap: balance für ausgewogene Überschriften und überschriftenähnliche Inhalte (z. B. <th>).
  • Verwenden Sie text-wrap: pretty für längere Texte (Absätze, Blockzitate usw.).
  • Verwenden Sie text-wrap: balance oder text-wrap: pretty bewusst. Wenden Sie es NICHT auf * an, da dies die Leistung beeinträchtigt.
  • Vermeiden Sie text-wrap: balance für Elemente mit einem sichtbaren Feld (Hintergründe, Rahmen, Schatten usw.), da sich dadurch nicht die Breite des Containers ändert, sondern nur, wie Text innerhalb dieser Breite umbrochen wird. Dadurch kann am Ende des Containers leerer Platz entstehen, was in der Regel unerwünscht ist.

Responsive Typografie

  • DO combine viewport-relative and font-relative units in clamp() for font sizes that scale with the viewport size while ensuring they stay within a desired range. Beispiel: clamp(2rem, 1rem + 5vw, 4rem) Passen Sie das Verhältnis von Darstellungsbereich- und Schriftart-relativen Einheiten an, um zu steuern, wie schnell sich die Schriftgröße ändert.
  • Verwenden Sie vw NICHT allein für die Schriftgröße ohne clamp(), da der Text auf extremen Bildschirmen sonst zu klein oder zu groß dargestellt werden kann.