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 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.
.demo {
font: extra-condensed 1.2em/1.5em OpenSans;
}
.stretch {
font-stretch: normal
}
| ultra-condensed | Setzt die Laufweite auf 50% |
| extra-condensed | Enge 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 |
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.