Techniken für responsive Typografie
Kommentare

Typografie ist einer der entscheidenden Faktoren, wenn man aus den Vollen des Responsive Web Design schöpfen will. Dabei geht es um mehr als die Größe des Text-Containers und den einfließenden Text.

Typografie ist einer der entscheidenden Faktoren, wenn man aus den Vollen des Responsive Web Design schöpfen will. Dabei geht es um mehr als die Größe des Text-Containers und den einfließenden Text. Von der richtigen Schriftart, über die Farbe zur richtigen Schriftgröße, Spaltenhöhe und –länge  gibt es verschiedene Techniken, die zu responsivem Text führen.

Sara Soueidan hat dazu einen Überblick verfasst. Bevor es an die Techniken geht, muss aber erst einmal sichergestellt werden, dass der Text lesbar und zugänglich ist. Wichtig ist das aus einem einfachen Grund: Wenn ein Text nicht von Grund auf diese Anforderungen erfüllt, kann man hinterher nachjustieren wie man will, man wird ihn auch durch Größe und Co. nicht lesbarer bekommen. Also stellt vorab folgende Punkte sicher:

  • Ein gut lesbares Font Face

Nicht alle Font-Arten eignen sich für Body-Text. Gerade künstlerische Fonts machen sich zwar vielleicht gut als kurze Headline, sollten aber eben auch auf solche beschränkt bleiben. Viele Font-Services bieten Preview-Optionen an, in denen man sehen kann, wie ein Font sich in Mengentext schlägt. Zusätzlich solltet ihr euch die @font-face-Regel in CSS mal genauer anschauen. Hinfreiche Links dazu gibt es hier und hier.

  • Die richtige Font-Farbe

Die Lesbarkeit eines Textes sollte nicht zugunsten von Farbeffekten leiden. Das ist nicht nur ein gut gemeinter Rat, sondern bis zu einem gewissen Grad sogar eine Guideline des W3C. Text ist einfach zu lesen, wenn ein ausreichender Kontrast zwischen Zeichen und Hintergrund besteht. Um diesen Kontrast zu ermitteln, gibt es verschiedene Tools, z.B. Contrast-A. Hilfe gibt es auch vom W3C in Form des Media Queries Module Level 4 und speziell dem Luminosity Media Query.

  • „Echter “ Text statt Grafiken

Text kann in Geräusche umgewandelt und ohne Qualitätsverlust vergrößert werden. Dieser Aspekt hat sehr viel mit Zugänglichkeit zu tun. Wenn man eine Resonsive Wesite erstellt, sollte man immer im Hinterkopf behalten, dass User zum Beispiel körperliche Behinderungen haben könnten und den Content nur unter anderen Voraussetzungen konsumieren können. Responsive Web Design bedeutet eben nicht nur den Content an verschiedene Bildschirmgrößen anzupassen, sondern auch an unterschiedliche User-Bedürfnisse.

Diese Grundvoraussetzungen geschaffen, kann es nun daran gehen, flüssige, responsive Typografien zu kreieren.

Headlines responsive machen

Ein jQuery-Plug-in benutzen

Es gibt drei bekannte Plug-ins, um große Headlines responsive zu machen: FitText, BigText und slabText. Alle drei können Headlines so anpassen, dass sie die Größe des parent-Elements ausfüllen. slabText hat den anderen beiden noch voraus, dass es einen Algorithmus zum Rendern benutzt, so dass skalierbare, flexible responsive Headlines möglich sind.

Weitere Möglichkeiten für responsive Headlines sind CSS Viewport Units und Media Queries.

Body-Text responsive machen

em statt Pixel

Body-Text responsive zu machen, kann etwas knifflig sein: Nicht nur muss der Vertical Rhythm angesichts flexibler Spaltenhöhe erhalten bleiben, der Text muss außerdem auch auf High-Resultion-Screens gut skaliert und vom User angepasst werden können. Um dies zu gewährleisten, sollten proportionale und relative Sizing Units benutzt werden. Soueidan rät, in Anlehnung an Ethan Marcotte, em statt Pixel für die Schriftgröße einzusetzen.

Weiter werden die Benutzung von rem und Media Queries, CSS Viewport Units, jQuery-Plug-ins, wie FlowType.JS, und Element Queries erklärt.

Ausführlich findet ihr die Techniken hier. Viel Spaß beim Ausprobieren.

Aufmacherbild: Wooden alphabet letters on old wooden surface von Shutterstock / Urheberrecht:Portokalis

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -