Wie man Texte optimal für responsive Design skaliert – was bedeutet „em“ und „rem“?

Responsive Design gehört zu den wichtigsten Anforderungen, die eine Webseite heutzutage erfüllen muss. Nicht nur in Hinblick auf die Usability, sondern auch auf die Suchmaschinenoptimierung. Trotzdem zeigen viele Seiten noch immer Probleme bei der automatischen Designanpassung. Insbesondere wenn es um Textpassagen oder Überschriften geht. Für dieses Problem gibt es verschiedenen Lösungen, die wir für Euch zusammengestellt haben…

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.

JavaScript Plugin

Eine sehr einfache Lösung für das Problem der immer kleiner werdenden Schrift sind JavaScript Plugins, z.B. FlowType oder FitText. Damit werden Zeilenhöhe und Schriftgröße in Bezug auf die Breite eines Elements angepasst (also wie bei der Viewport-Anpassung). Zusätzlich bieten die Plugins den Vorteil, dass man eine minimale und maximale Schriftgröße festlegen kann.

Wem das zu aufwendig ist, kann sich unseren responsiven Homepage-Baukasten gerne näher anschauen und kostenlos testen, dort werden alle Texte automatisch responsiv angelegt!

keine Kommentare  |  Kommentar schreiben