CSS, HTML und Javascript mit {stil}

font-variant und font-variant-numeric

Alles in Großbuchstaben, aber große Buchstaben größer: Kapitälchen für Versalien

font-variant setzt einen Text in reinen Großbuchstaben, erhält aber die Größe der Kleinbuchstaben ungefähr in der x-Höhe des normalen Schnittes oder ein wenig größer. Diese Schriftauszeichnung eignet sich besonders zur Hervorhebung von Eigennamen in Fließtexten.

Digitale Kapitälchen wirken in Überschriften edler als fette oder kursive Schrift und leicht nostalgisch.

Aber die Kapitälchen per font-variant: small-caps werden aus »digitalen« Zeichen erzeugt – der Browser setzt den ersten Buchstaben größer und verkleinern die folgenden Buchstaben. Diese digitalen Kapitälchen verraten sich durch die dickere Strichstärke des ersten Buchstabens. Echte Kapitälchen-Schrift wird vom Schriftdesigner angelegt und stellt einen eigenständigen Fontstil innerhalb eines Schriftpakets.

p { font-variant: small-caps; }
oder
<span style="font-variant: small-caps;">Kapitälchen</span> 

Digitale Kapitälchen (Alegreya)

Echte Kapitälchen (Alegreya SC)

<p style="font-family: 'Alegreya', serif; font-variant: small-caps;">
   Digitale Kapitälchen (Alegreya)
</p>	
<p style="font-family: 'Alegreya SC', serif;">
   Echte Kapitälchen (Alegreya SC)
</p>

Text in Kleinbuchstaben oder Großbuchstaben

Wer einen Text in ganz normale Großbuchstaben setzen will, braucht keine Eigenschaft der Schrift, sondern eine Eigenschaft für den Text-Absatz. text-transform:uppercase wandelt Kleinbuchstaben zu Großbuchstaben oder Versalien oder setzt den Text komplett in Kleinbuchstaben, text-transform:capitalize setzt jeden ersten Buchstaben im Text groß.

Großbuchstaben (Alegreya)

Alle ersten Buchstaben in Großbuchstaben (Alegreya)

<p style="text-transform: uppercase">Großbuchstaben (Alegreya)</p>
<p style="text-transform: capitalize">Alle ersten Buchstaben in Großbuchstaben (Alegreya)</p>

font-variant und font-feature in CSS3

In CSS 3 bekommt font-variant weitere Varianten: font-variant-caps.

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

all-small-caps setzt einen Text in Großbuchstaben, aber in der x-Höhe der normalen Schrift, damit der groß geschriebene Text nicht übermäßig hervorspringt.

Normaler Fließtext Uppercase und mitten drin eine Handvoll Wörter in kleinen Großbuchstaben.

Unterstützt von Chrome, Firefox und Safari, aber nicht IE und Edge

Einfache Fonts setzen Glyphen nach einem einfachen Muster: für jedes Zeichen wird eine Glyphe gesetzt.

Moderne Schriftformate wie OpenType und AAT (Apple Advanced Typography) können Zeichen je nach ihrer Position untereinander und nach Sprache setzen.

In Latainschriften wird i.d.R. die Buchstabenkombination fi durch eine fi-Ligatur gesetzt, bei der das i ohne i-Punkt steht. Einige Sprachen (z.B. Türkisch) haben aber sowohl ein i mit als auch ein i ohne i-Punkt, so dass Ligaturen ohne i-Punkt nicht verwendet werden. Dafür stehen CSS-Eigenschaften wie font-variant-ligatures zur Verfügung.

flying fiddlers flying fiddlers

Ligatur fi ohne i-Punkt in Big Caslon bzw. Times, keine Ligatur in Arial bzw. Helvetica.

Zahlen mit font-variant-numeric

Auch die Ziffern einer Schrift spielen eine Rolle, insbesondere, wenn eine Webseite viel mit Zahlen hantiert und häufig tabellarische Zahlen einsetzt. CSS font-variant-numeric steuert die Darstellung von Zahlen bzw. Ziffern. Nur wenige Schriften bieten alle Merkmale, die mit CSS angesprochen werden können.

lining-nums
Setzt alle Ziffern auf die Grundlinie
oldstyle-nums
Setzt Ziffern (z.B. 3, 4, 5 und 9) mit Unterlängen
tabular-nums
Setzt alle Ziffern mit derselben Breite (nicht proportional)
proportional-nums
Setzt alle Ziffern proportional nach Platzbedarf

font-variant-numeric wird zurzeit von Chrome, Firefox und Safari unterstützt, nicht aber von IE11 und Edge.

Example for font-variant-numeric: lining-nums, oldstyle-nums, tabular-nums, proportional-nums

Für Tabellen mit Zahlenkolonnen setzt man am besten eine nicht-proportionale Schrift (Monospace) ein, die alle Ziffern auf die Grundlinie und mit derselben Höhe setzt, um die Lesbarkeit zu verbessern.

table { 
   font-variant-numeric: lining-nums tabular-nums;
}

Im Fließtext bieten hingegen proportionale Ziffern ein ruhigeres Schriftbild. Wenn alle Ziffern dieselbe Breite haben, entstehen kleine Lücken in längeren Zahlen.

Haben wir 47111 oder 47441 als Postleitzahl?
Haben wir 47111 oder 47441 als Postleitzahl?

Schrift: Open Sans

body { 
   font-variant-numeric: proportional-nums;
}
Raus aus dem Trott