font-stretch

CSS font-stretch

font-stretch staucht oder dehnt den Text in Stufen von ultra-condensed bis ultra-expanded oder stufenlos mit Prozentangaben. Allerdings funktioniert das nur mit Schriften, die verbreiterte und schmalere Schnitte anbieten, ansonsten bleibt die Laufweite des Textes unverändert.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Mach mich nicht breit!

Anders sieht es auch, wenn der Schrift-Designer hingegen 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.

Mach mich richtig breit!
.demo {
	font: extra-condensed 1.2em/1.5em OpenSans;
}
Haltet das Treppenhaus sauber!
.stretch {
	font-stretch: normal
}
ultra-condensedSetzt die Laufweite auf 50%
extra-condensedEnge Darstellung: 62.5% der normalen Laufweite
condensed sehr eng: 75%
semi-condensed mäßig eng 87.5%
normal normal ist normal: 100%
semi-expanded weiter als normal: eine Laufweite von 112.5%
expanded mäßig breit: 125%
extra-expanded breit: 137.5%
ultra-expanded sehr breit: 150%
initial, inherit, reset, revert
Memo
Memo
Memo
Memo
Memo
Memo
Memo
Memo
Memo

font-stretch – in Prozent

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

Haltet das Treppenhaus sauber!
.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.