UX 13.01.2016 - 09:00 Uhr

Schriften auf responsiven Webseiten dynamisch skalieren

Responsive Webseiten sind keine neue Idee, trotzdem können sie noch eine Herausforderung sein. Meiner Erfahrung nach, ist die Skalierung von Schriften dabei ein zentrales Problem.

Normalerweise entwirft der Designer zwei Varianten eines Designs. Eine mobile Version und eine für Desktops. Im besten Fall bekommt man Versionen für 5 und 9 Inch Devices, plus einer Desktopvariante, die in der Regel auf 21+ inch Monitore in Full HD ausgelegt ist. Dadurch entstehen zwangsläufig Unklarheiten während der Entwicklung der Webseite. Denn alles zwischen, unter und über diesen Größen und Auflösungen muss man von diesen Designs ableiten.

Dem Entwickler die Interpretation der Layouts zu überlassen, kann zu eigenwilligen Ergebnissen führen. Davon betroffen ist fast immer das Wording und wie es abgebildet wird. Das ist für den Kunden sehr wichtig. Gerade Zeilenumbrüche sollten so bleiben wie sie im Design sind, so dass die Proportionen erhalten bleiben können. Größenangaben in Pixel werden dem einfach gerecht.

Andere Einheiten wie em oder rem lösen dieses Problem auch nicht, machen den Umgang mit den Schriften aber einfacher. Viele möchten em nicht nutzen, da das Handling damit sehr komplex ist. Weniger kompliziert kann man das Problem mit rem angehen, bei dem die Größe nur von einem Element abhängt. So kann man alle Schriftgrößen durch eine einzige Änderung ändern. Das klingt schon viel besser als Pixel zu nutzen, löst das Problem aber nicht. Man brauch trotzdem noch eine große Menge an Media-Queries und macht daher die Einfachheit wieder zu nichte. Die Komplexität holt einen wieder ein.

Was man also braucht ist eine Größeneinheit, die sich dem Viewport anpasst. Die Größe des Viewport hängt vom vorhandenen Platz ab, nicht von einer fest implementierten Größe. Glücklicherweise gibt es genau das schon. Die viewport-width (vw) und viewport-height (vh) Einheiten. Die Kompatilität kann man hier nachschauen: viewport-units at caniuse.com.

Um den Unterschied deutlich zu machen, habe ich drei Beispiele erstellt. Das erste ist ein Gedicht. Gedichte hängen sehr von ihrer Form, den Zeilenumbrüchen und Proportionen ab. Ein Problem beim Verwenden dieser Einheiten ist die maximale und minimale Größe. Dieses Problem kann man mit Media-Queries für die kleinsten und größten unterstützten Bildschirmgrößen lösen. Dort gibt man einfach eine passende, maximale Größe in z.B. Pixeln an.
 
In dem Beispiel benutze ich die vm Einheit auch um Wrapper zu skalieren, was auch sehr nützlich ist. Zuerst könnte man denken, dass das dass gleiche ist, als würde man Prozentwerte verwenden. Der Unterschied liegt darin dass die Viewport-Einheiten nie von Elternelementen abhängig sind, wie es bei Prozent der Fall sein kann.

1.1. Schrift skaliert per VW

1.2. Schrift skaliert per REM

2. Schrift auf Bild skaliert per VW

3. Per VW skalierende mobile Seite

Tim Jagodzinski
Software Engineer bei Basilicom