Lesbare Schriftgrößen verwenden

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass der Text auf der Seite zu klein und somit nicht gut lesbar ist.

Übersicht

Die Schriftgröße für das Web kann in vier gängigen Einheiten angegeben werden: in Pixeln (px), Punkten (pt), EMs (em) und Prozent (%).

  • Bei den Pixeln handelt es sich um "CSS-Pixel". Sie variieren je nach Gerätegröße und Dichte.
  • Punkte werden relativ zu Pixeln definiert. Ein einzelnes Pixel ist 0,75 Punkte* groß.
  • EMs und Prozent sind "relative" Einheiten: Sie hängen von der geerbten Größe und den Eigenschaften der verwendeten Schriftart ab. 1 EM entspricht 100 %.

* Weitere Details finden Sie in den zusätzlichen Informationen.

Darüber hinaus beeinflusst der Darstellungsbereich die Größe von Schriftarten auf Mobilgeräten. Auf Mobilgeräten wird die Größe von Seiten ohne richtig konfigurierten Darstellungsbereich verringert. Der Text auf der Seite ist dann aufgrund der geringen Schriftgröße oft nicht lesbar.

Empfehlungen

Konfigurieren Sie zuerst einen Darstellungsbereich, damit Schriftarten auf verschiedenen Geräten erwartungsgemäß skaliert werden. Setzen Sie nach dem Konfigurieren des Darstellungsbereichs die folgenden zusätzlichen Empfehlungen um:

  1. Verwenden Sie eine Basisschriftgröße von 16 CSS-Pixeln. Passen Sie die Größe bei Bedarf an, je nach den Eigenschaften der verwendeten Schriftart.
  2. Verwenden Sie Größen relativ zur Basisgröße, um den typografischen Maßstab zu definieren.
  3. Text erfordert senkrechten Abstand zwischen den Zeichen und muss gegebenenfalls für jede Schriftart angepasst werden. In den meisten Fällen empfiehlt es sich, die Standardzeilenhöhe des Browsers von 1,2 em zu verwenden.
  4. Die Verwendung zu vieler Schriftarten und Schriftgrößen hat ein unübersichtliches und übermäßig komplexes Seitenlayout zur Folge.

Mit dem folgenden CSS-Snippet wird zum Beispiel eine Basisschriftgröße von 16 CSS-Pixeln definiert. Dabei beträgt die Schriftgröße der CSS-Klasse "small" 75 % der Basisschriftart, was 12 CSS-Pixeln entspricht. Die Schriftgröße der CSS-Klasse "large" beträgt 125 % der Basisschriftart, also 20 CSS-Pixel:

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Zusätzliche Empfehlungen zu Schriftarten auf Mobilgeräten finden Sie in den Typografierichtlinien für Android (in englischer Sprache).

Zusätzliche Informationen

Die Spezifikation zu CSS 2.1 muss sorgfältig studiert werden, um die Definition von Längeneinheiten zu verstehen. Sie enthält weitere Einheiten, die hier noch nicht erwähnt wurden: Zoll, Zentimeter, Millimeter und Picas. Man kann leicht übersehen, dass ein CSS-Zoll nicht immer mit einem physischen Zoll übereinstimmt.

Alle absoluten Einheiten sind in Bezug aufeinander definiert. Zum Beispiel entspricht 1 Pixel 0,75 Punkten, 1 Punkt entspricht dem 72. Teil eines Zolls und 1 " entspricht 2,54 cm. Es obliegt aber dem Gerät zu entscheiden, wie diese Einheiten verankert werden. Beim Drucken auf Papier wird z. B. 1 " bei 1 physischen Zoll verankert und alle anderen Einheiten sollten relativ zum physischen Zoll festgelegt werden. Bei der Anzeige auf einem Mobiltelefon erfolgt die Verankerung aber in Bezug auf das sogenannte Referenzpixel. 1 CSS-Pixel ist in Bezug auf dieses Referenzpixel definiert. Allen anderen Einheiten, wie z. B. Zoll und Zentimeter, werden dann in Bezug auf das CSS-Pixel festgelegt. Deshalb wird 1 CSS-Zoll auf einem Mobiltelefon in der Regel kleiner als 1 tatsächlicher, physischer Zoll angezeigt.

Aus diesem Grund sollten Sie Ihre Schriftgrößen mithilfe von Pixeln definieren. Bei einigen Designern und Entwicklern könnte die Verwendung von Zoll oder Punkten zu Missverständnissen führen. Dabei handelt es sich zwar um physische Abmessungen, diese entsprechen aber nicht unbedingt den Größen in der Wirklichkeit. Bei einem Pixel dagegen kann man sich immer vorstellen, dass seine Größe vom anzeigenden Gerät abhängt.

Schließlich hat jede Schriftart auch noch individuelle Eigenschaften, wie z. B. Größe und Abstand. Standardmäßig wird jede Schriftart im Browser mit 16 px (CSS-Pixel) angezeigt. Dies ist in den meisten Fällen eine gute Standardeinstellung, muss aber für bestimmte Schriftarten angepasst werden. Die Standardgröße kann verringert oder vergrößert werden, um die jeweiligen Eigenschaften der Schriftart zu berücksichtigen. Nach dem Festlegen der Standardgröße sollten größere und kleinere Schriftarten mithilfe von Pixeln relativ zur Standardgröße definiert werden. Anschließend kann mit ihrer Hilfe die Textgröße für primäre, sekundäre und sonstige Inhaltsarten auf der Seite angepasst werden.

Einige mobile Browser versuchen möglicherweise, Schriftarten für Seiten ohne richtig konfigurierten Darstellungsbereich zu skalieren. Dieses Skalierungsverhalten ist browserabhängig und bietet keine zuverlässige Basis für die Bereitstellung gut lesbarer Schriftarten auf Mobilgeräten. PageSpeed Insights zeigt Text auf Ihrer Seite ohne browserspezifische Schriftartskalierung an.