Fluid Typography

Modular Scale

Die Schriftproportionen verändern ihr Verhältnis zueinander, wenn das Device kleiner wird.

Auf Mobile Devices sind die Unterschiede zwischen den Absatzformaten deutlich geringer als auf grossen Bildschirmen. 

Auf Mobile Devices ist meist die Bildschirmauflösung höher. So kann es durchaus sein, dass der Lauftext grösser sein muss als im Desktop.

Diese Verhältnis-Adaption auch ein ungelöstes Problem der dynamischen EM-Systeme, da die proportionalen Werte für jeden Breakpoint neu zu definieren sind.

Diagramm das den Unterschied zwischen Desktop Schriftgrössen-Verhältnisse zueinander und Mobile Schriftgrössen-Verhältnisse zueinander aufzeigt.
© Webdesign Essentials

Die Abflachung der Proportion

Mit grossen Schriften auf kleinen Devices läuft man schnell in das Problem, dass der Text über den vorgesehenen Platz hinaus geht (Text-Overflow). Besonders gut bei deutschen Nomen zu beobachten.

Tools

Modular Scale

Gridlover

Font-Ratio oder die Adaptive Modular Scale.

Bei den meisten Webseiten wird die Schriftgrösse mittels Media Queries dynamisch auf den jeweiligen Viewport angepasst. Dies wird manuell definiert. Doch man könnte dies auch berechnen und in ein zusammenhängendes und dynamisches Schriftsystem umwandeln.

Adaptive Modular Scale

Florian Schulz hat bereits viel Effort geleistet, dieses Problem zu lösen. Sein Blogbeitrag ist sehr zu empfehlen. Designing with Intent.

Dabei werden die extremsten Grössen definiert und per mathematischen Formel die Grössen dazwischen interpoliert.

Fluid Typography

Ein How-To Anleitung zeigt auch Mike Riethmüller in seinem Artikel über responsive und Fluid Typography

CSS Calc statt Media-Queries

Mit CSS kann man auch einfache Schriftberechnungen machen. z.B. wenn man von der Basisschrift ausgehend dynamisch mit der Viewportbreite die Titelschrift grösser werden lassen möchte, kann man dies relativ einfach machen.

z. B.: font-size: calc(1em + 2vw);

Richtig berechnet, braucht es dann keine Media Queries mehr.

Vertiefe dich ins ganze Kapitel

Web-Typografie