CSS, HTML und Javascript mit {stil}

font-variant – digitale Kapitälchen

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 eine Variante: 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.

Zurzeit nur in Firefox und Safari 9.

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.

Raus aus dem Trott