font-stretch – Text dehnen oder stauchen

font-stretch von condensed bis expanded

Zu vielen Schriften finden sich Condensed oder Narrow-Schnitte mit schmaleren Zeichen, z.B. Arial Narrow oder Roboto Condensed. Wenn die gewünschte Schrift derartige Schnitte nicht anbietet, könnte transform: scaleX() einspringen. Typografen sehen allerdings in Strecken und Stauchen von Schriften einen Sündenfall, denn fast immer leidet die Lesbarkeit.

Anders sieht es hingegen aus, wenn der Schrift-Designer die Zeichen der Schrift bereits für eine breitere oder schmalere Darstellung entworfen hat. Die modernen Browser unterstützen CSS font-stretch zwar bereits, aber bislang gibt es nur wenige variable Fonts, die sich dehnen und stauchen lassen.

.demo {
	font: extra-condensed 1.2em/1.5em OpenSans;
}

.stretch {
	font-stretch: normal
}

font-stretch – in Prozent

Anstelle der Schlüsselwörter kommen die modernen Browser auch mit Prozentangaben für die Laufweite klar (nicht IE).

.stretch {
	font-stretch: 100%
}

Welche Spanne tatsächlich genutzt werden kann, hängt von der eingesetzten Schrift ab. So erstreckt sich die Laufweite von der Apple-Systemschrift von 30% bis 150%, Open Sans unter Windows von 65% bis 100%. Inconsolata ist ein Google Font, der von 50% bis 200% reicht.

Variable Fonts

Variable Fonts bringen die Merkmale einzelner Font-Dateien wie Regular, Bold, Condensed in eine einzige, anpassbare Font-Datei. Hier sind die typografischen Merkmale wie font-weight fein steuerbar und fließend. Statt

Roboto-Regular.ttf
Roboto-Bold.ttf
Roboto-Italic.ttf
RobotoCondensed.ttf

wird nur noch

Roboto[wdth,wght].ttf

eingesetzt.