Im responsive Design ist Flexibilität gefragt
Pixel-Angaben sind aufgrund ihrer statischen Eigenschaften nicht für die responsive Design Anforderungen geeignet. Wird ein Text geändert, gekürzt oder erweitert, kann bei einer Pixel-Angabe das gesamte Layout darunter leiden.
Nur eine flexible, relative Maßeinheit ist in der Lage, die Texte so anzupassen, dass sie auf die Änderungen anderer Webseitenelemente so reagieren, wie sie sollen.
Solche flexiblen Einheiten sind „em“ (relativ zur Größe des Eltern-Elements) und „rem“ (relativ zum HTML-Element). In Kombination mit Media Queries, durch die das Dokument entsprechend des Ausgabemediums dargestellt wird, passen sich Schriftgröße und Zeilenabstand optimal an.
Anpassung an den Viewport
Der Umgang mit den Einheiten „rem“ und „em“ ist recht komplex. Außerdem kommt es trotz der Einheiten immer wieder vor, dass ein ungewollter Umbruch erzeugt wird, z.B. in einer Überschrift. Abhilfe schaffen hier Einheiten, die sich dem Viewport anpassen. Media Queries sind so nicht mehr nötig, da sich der Text der Containergröße anpasst.
Doch auch hier gibt es ein Problem: Mit einem kleineren Bildschirm wird auch die Schrift kleiner. Auf einem sehr kleinen Display kann das, je nach Ausgangsschriftgröße, sogar völlig unleserlich sein.
