Mit der Einführung von Media Queries (Medienabfragen) in CSS3 haben Sie eine neue nützliche Option, anpassungsfähige Schriften zu realisieren. Media Queries erkennen bestimmte Merkmale eines Gerätes wie die Bildschirmauflösung, die Breite und Höhe des Browserfensters oder ob das Display im Hoch- oder Querformat ausgerichtet ist. Diese Informationen werden genutzt, um die Darstellung Ihrer Webseitentexte an die Endgeräte der Nutzer anzugleichen.
Eine optimal responsive Typografie ist in CSS nicht durch die Angabe von Pixel-Werten zu erreichen, da es sich bei einem Pixel um eine statische Größe handelt. Erst die Anwendung einer flexiblen Maßeinheit erzeugt ein bestmögliches reaktionsfähiges Schriftbild. Deshalb sollten Sie über relative Einheiten wie em, rem oder Prozentangaben die Größe eines Webfonts bestimmen.
Das Einpflegen und Ausrichten einer responsiven Typografie über Media Queries gelingt mithilfe dieser CSS-Anweisungen:
- Mit @font-face betten Sie zunächst einen Webfont auf Ihrer Seite ein.
- Um die Schrift an das verwendete Gerät anzupassen, benötigt man die Medienabfrage, die über @media ausgeführt wird. Für die geräteabhängige Darstellung sind außerdem die Maße des Browserfensters bzw. Viewports von Belang. Wenn Sie @media mit screen kombinieren und entweder min-width (minimale Breite) oder max-width (maximale Breite) ergänzen, können Sie für bestimmte Breiten des Bildausschnittes das Format der Schrift festlegen, z. B. @media screen and (min-width: 800px). So grenzen Sie ein, ab welcher Größe des Browserfensters eine andere Schriftgröße eingesetzt wird.
- Die Anweisung font-size definiert die Darstellungsgröße der Schrift – in Pixeln oder relativen Maßeinheiten wie em (vom Schriftgrad abhängiges Maß der Zeichenbreite). Die Einheit em richtet sich dabei nach der im Vorfeld bestimmten Größe desjenigen Elements, das mit einem em-Wert dargestellt wird. Falls die Schriftgröße allein mit em definiert wird, richtet sich der Wert nach dem Schriftgrad des Elternelements.
Die folgenden Abschnitte zeigen Ihnen, wie Sie diese CSS-Anweisungen anwenden.