FlowType.JS macht die Typo flüssig
Kommentare

Im Web liest es sich am besten mit 45 bis 75 Zeichen pro Zeile. Allein Mit CSS Media Queries ist das aber mitunter schwer zu gewährleisten. FlowType.JS will das Problem lösen, indem es die Font Size

Im Web liest es sich am besten mit 45 bis 75 Zeichen pro Zeile. Allein Mit CSS Media Queries ist das aber mitunter schwer zu gewährleisten. FlowType.JS will das Problem lösen, indem es die Font Size und die Zeilenhöhe basierend auf der Breite eines spezifischen Elements anpasst. Mit ein bisschen Mathematik soll so eine optimale Anzahl an Zeichen pro Zeile auf jeder Bildschirmbreite erreicht werden. Die Typografie soll sich letztlich also wie ein Bild verhalten.

Entwickelt wurde das Ganze von John Wilson and Casey Zumwalt. FlowType.JS ist ein jQuery-Plug-in, mit dem die Breite eines Elements gemessen und daraus ein Basiswert ermittelt wird, der den Schlüssel zu einer im Grunde simplen Formel ergibt: Der Basiwert wird durch einen Wert geteilt, der eine vernünftige Font Size darstellt. Beispiel: Wenn ein Element 1000px misst und man teilt das durch 50, ergibt das 20px – die Font Size.

Auch die Zeilenhöhe wird auf diese Art berechnet: Für die Zeilenhöhe wird ein Wert X mal so groß wie die Font Size festgelegt (das X bestimmt man zugunsten der Lesbarkeit). Die Font Size wird dann mit X multipliziert und ergibt die empfohlene Zeilenhöhe.

Demo und Instruktionen gibt es hier.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -