font-variant: Kleinbuchstaben, Großbuchstaben, Kapitälchen und Ziffern

CSS font-variant: Kapitälchen

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.

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

Echte Kapitälchen

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

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

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

Wenn Ziffern, Zahlen und Zahlenkolonnen wichtig sind, lohnt sich der Einsatz von font-variant-numeric und die Suche nach Schriften, die den Satz von Ziffern und Zahlen gut unterstützen.