CSS/Tutorials/Typografie/Schriftformatierung

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Typografie(Weitergeleitet von Schriftgröße)
Wechseln zu: Navigation, Suche

Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben, Strichstärke usw. zu verstehen, also die Angaben, die Einfluss auf die Gestaltung des einzelnen Buchstabens haben.

Sinnvoll sind solche Angaben für alle HTML-Elemente, die Text enthalten können. Dazu gehören alle Elemente, die in den Abschnitten Textstrukturierung und Textauszeichnung beschrieben werden. Auch auf das html- und das body-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden – in diesem Fall gelten die Angaben für alle Text-Elemente der HTML-Datei.

font[Bearbeiten]

Die Eigenschaft font ist eine Zusammenfassung der möglichen Einzelangaben font-style, font-variant, font-weight, font-size, line-height und font-family.

Es müssen nicht alle Eigenschaften angegeben werden, lediglich font-size und font-family sind verpflichtend. Die in der Zusammenfassung verwendete Reihenfolge ist aber einzuhalten; font-family wäre also beispielsweise als letzte Eigenschaft zu notieren. Die Eigenschaften font-size und line-height sind, sofern sie beide notiert werden, mit einem Schrägstrich zu trennen. Der erste Wert definiert font-size, der zweite line-height. Wird an dieser Stelle lediglich ein Wert angegeben, so steht dieser für font-size, da line-height optional ist.

Gegenüberstellung Browser-Stylesheet und eigene Formatierung ansehen …
.formatiert { color: #999;}
.formatiert span {white-space: nowrap;color: green;}
.formatiert p    {font: bold .9em/150% Georgia,Times,serif; }
.formatiert code {font: 1.2em/150% Courier,monospace; }
ansehen …

In diesem Beispiel werden im oberen Beispiel die HTML-Elemente durch das Browser-Stylesheet formatiert. Im unteren Abschnitt erhält die Schrift eigene Formatierungen.

Beachten Sie: Zunächst werden alle font-Eigenschaften auf ihren Ausgangswert zurückgesetzt und somit nur die ausdrücklich definierten Eigenschaften angewandt.

font-size[Bearbeiten]

Die Eigenschaft font-size bestimmt den Schriftgrad, das heißt die Darstellungsgröße der Schrift.

Alternativ zu numerischen Angaben sind auch absolute und relative Schlüsselwörter möglich.

  • Größenangabe
    • xx-small, winzig
    • x-small, sehr klein
    • small, klein
    • medium, mittel
    • large, groß
    • x-large, sehr groß
    • xx-large, sehr sehr groß
    • xxx-large, riesig
  • relative Angaben
    • smaller, kleiner als im Elternelement
    • larger, größer als im Elternelement
    • inherit, Schriftgröße des Elternelements
Schriftgrößen ansehen …
h2 { font-size: 48px; }
p  { font-size: 1.2em; }
a  { font-size: 0.7cm; }
ansehen …
Beachten Sie: Angaben in em beziehen sich immer auf die Schriftgröße des Elternelements und damit letztlich (bei durchgehender Verwendung) auf die Defaultschriftgröße des Gerätes. Nutzen Sie für Schriftgrößen besser nicht die Einheit px. Auch die Einheit cm sollte in Bildschirmlayouts keine Verwendung finden.

Schriftgröße[Bearbeiten]

Noch vor ein paar Jahren war es üblich, dem p-Element eine feste Größe von 75–80 % oder sogar nur 8px zu geben.[2] Auf mobilen Geräten entstand so eine Miniatur-Vorschau der Seite, die dann erst vergrößert werden musste. Heute setzen sich immer mehr Seiten durch, die für normalen Text die Standardschriftgröße des Browsers (1em) verwenden.

Empfehlung:
  • Verwenden Sie die Standardschriftgröße 1em auch als Schriftgröße für Ihren Text. Wenn Sie die Maßeinheit rem verwenden, können Sie Änderungen in den Elternelementen von p ignorieren.
  • Überlassen Sie es dem Benutzer, die Schriftgröße selbst zu skalieren. Auf den meisten Touch-Geräten gelingt das sehr einfach mit dem Ziehen der Finger, auf Desktop-Geräten mit einer (vom Browser und Betriebssystem abhängigen) Tastenkombination. Vertrauen Sie darauf, dass Ihre Anwender wissen, wie sie ihr Gerät bedienen können.
Beachten Sie:
Zuordnung Schriftgröße – Schlüsselwort[Bearbeiten]
Schlüsselwort Skalierung Schriftgröße hx
xx-small 3/5 h6
x-small 3/4
small 8/9 h5
medium 1 h4
large 6/5 h3
x-large 3/2 h2
xx-large 2 h1
xxx-large 3

Bei dieser Tabelle handelt es sich lediglich um eine Empfehlung für die Browserhersteller, wie die absoluten Größenangaben untereinander zu skalieren sind.

Beachten Sie: Die meisten™ Internetnutzer schrauben nicht an den Browsereinstellungen zur Schriftgröße herum. Wer es tut, legt aber eventuell auch eine Mindestschriftgröße fest, womit bestimmte Festlegungen eine für den Autor unerwartete Ausgabe generieren könnten.
Empfehlung: Verwenden Sie für die Schriftgröße relative Maße wie rem oder em.
relative Schriftgrößen[Bearbeiten]

Die Angaben larger und smaller beziehen sich auf die Schriftgröße des Elternelements. Wenn das übergeordnete Element ein Schlüsselwort für die Schriftgröße in der Tabelle für die Zuordnung von Schlüsselwörtern zur absoluten Größe hat, kann larger die Schriftgröße bis zum nächsten Eintrag in der Tabelle und smaller die Schriftgröße bis zum vorherigen Eintrag in der Tabelle berechnen.

Die Browser können aber auch ein einfaches Verhältnis verwenden, um die Schriftgröße relativ zum übergeordneten Element zu erhöhen oder zu verringern. Das Verhältnis ist nicht spezifiziert, sollte aber etwa 1,2–1,5 betragen und kann bei verschiedenen Elementen variieren.[3]

line-height[Bearbeiten]

Mit der Eigenschaft line-height können Sie die Höhe der Textzeile entweder relativ zur geltenden font-size-Angabe oder als absolute Angabe definieren.

Erlaubt sind folgende Werte:

  • eine Fließkommazahl oder Prozentangabe, bestimmt die Zeilenhöhe als Vielfaches der Schriftgröße, das heißt Angaben wie „line-height: 1.2“ und „line-height: 120%“ sind dabei identisch
  • eine Längenangabe
  • inherit, Zeilenhöhe des Elternelements
  • normal, Voreinstellung, weist den Browser an, eine vernünftige relative Zeilenhöhe selbst zu wählen
Beachten Sie: Eine für ein Element festgelegte Zeilenhöhe wird ohne Ihr Zutun an die Kindelemente vererbt.

Für normalen westlichen Text schwanken übliche line-height-Werte für normalen Text zwischen 1.25 und 1.4 wobei die Faustregel gilt: Je länger eine Zeile ist, um so größer sollte auch die Zeilenhöhe sein.

verschiedene Zeilenhöhen ansehen …
b             { background: #fca; }
.for-comments { line-height: 2.5em; background: #cfe; }
.for-comments p,
.for-comments li { background: #efe; }
.percent      { line-height: 120%; background: #aff; }
.small        { font-size: .75em; background: #ccf; }
ansehen …

Zur Veranschaulichung der Zeilenhöhe sind einige Elemente farblich hervorgehoben.

  1. In einem Bereich, der für Kommentare vorgesehen ist, gilt eine Zeilenhöhe von 2.5em.
  2. Im Bereich percent berechnet sich die Zeilenhöhe aus dem geerbten Wert font-size: 1em; (120% * 1em = 1.2em).
  3. Das Element small erbt line-height: 120%; des percent-Bereiches (120% * 0.75em = 0.9em).

Kurzschreibweise[Bearbeiten]

Sie können die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft font mit der folgenden Syntax notieren:

Beispiel 
p {font: 1.2em/1.5 serif;}

p {font: 1.2em/150% serif;}

p {font: 1.2em/1.8em serif;}
Alle Angaben sind gleichwertig, eine Berechnung des gewünschten absoluten Wertes wie im 3. Fall ist also nicht notwendig.

Bei dieser Notationsweise bezeichnet der Wert vor dem Schrägstrich stets die Schriftgröße und der Wert hinter dem Schrägstrich stets die line-height (Zeilenhöhe). Eine Prozentangabe für die Zeilenhöhe bezieht sich dabei auf den Wert der Schriftgröße.

Beachten Sie: Die Angabe der Schriftart ist notwendig. Genauere Angaben zur Zusammenfassung von font-Eigenschaften finden Sie oben unter font.

font-style[Bearbeiten]

Mit der Eigenschaft font-style steuern Sie die Neigung der Schrift, auch als Schriftstil bezeichnet.

Folgende Angaben sind möglich:

  • normal, normaler Schriftstil, Voreinstellung
  • italic, kursiver Schriftstil
  • oblique, schräg gestellter Schriftstil
  • inherit, Schriftstil des Elternelements
Schriftstile ansehen …
.kursiv  { font-style: italic; }
.oblique { font-style: oblique; }
ansehen …

Sie werden kaum einen Unterschied zwischen „kursiv“ und „schräg gestellt“ feststellen können. Für den Schriftstil „kursiv“ werden die tatsächlich vorhandenen kursiven Zeichen verwendet, für einen „schräg gestellten“ Schriftstil stellt der Browser die Zeichen schräg, wobei nicht sicher gestellt ist, dass dieser nicht auf eventuell vorhandene kursive Zeichen zurückgreift. Wenn trotz fehlender kursiver Zeichen der Schriftstil „kursiv“ angegeben wird, stellt der Browser sie „oblique“ dar.

font-weight[Bearbeiten]

Mit der Eigenschaft font-weight können Sie die Strichstärke (fälschlicherweise Schriftgewicht genannt) bestimmen. Die Strichstärke bezeichnet die Dicke und Stärke einer Schrift.

Folgende Angaben sind möglich:

  • lighter, dünner als im Elternelement
  • normal, normale Strichstärke
  • bold, fett
  • bolder, fetter als im Elternelement
  • eine Zahl zwischen 1 und 1000
Beachten Sie: Eine für ein Element festgelegte Strichstärke wird ohne Ihr Zutun an die Kindelemente vererbt.
unterschiedliche Strichstärken ansehen …
dl { font: 2em/100% sans-serif; }
dd { margin: -1em auto auto 2em; }
.w100 { font-weight: 100; }
.w300 { font-weight: 300; }
.w500 { font-weight: 500; }
.w700 { font-weight: 700; }
.w900 { font-weight: 900; }
.fetter { font-weight: bolder; }
ansehen …
Beachten Sie: Abhängig von Schriftart und Browser werden die Angaben unterschiedlich umgesetzt.

Zuordnung Schriftgewicht – Schlüsselwort[Bearbeiten]

Schriftgewicht Name
100 thin (Hairline)
200 extra light (ultra light)
300 light
400 normal (regular)
500 medium
600 semi bold (demi bold)
700 bold
800 extra bold (ultra bold)
900 black (heavy)
950 extra black (ultra black)

relative Schriftgewichte[Bearbeiten]

ererbter Wert (g) bolder lighter
g < 100 400 keine Änderung
100 ≤ g < 350 400 100
350 ≤ g < 550 700 100
550 ≤ g < 750 900 400
750 ≤ g < 900 900 700
900 ≤ g keine Änderung 700

font-family[Bearbeiten]

Mit der Eigenschaft font-family können Sie Schriftarten angeben, ohne sich darum kümmern zu müssen, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos.

Schriftartenstapel (Font Stacks)[Bearbeiten]

Falls die angegebene Schriftart nicht angezeigt werden kann, können Sie mehrere Alternativen festlegen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.

Beachten Sie: Trennen Sie mehrere Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. font-family:"Century Schoolbook",Times. Sie können dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden.
Beachten Sie:

Falls Sie die CSS-Eigenschaften innerhalb eines style-Attributs im HTML-Quelltext vereinbaren möchten, dürfen Sie nicht die gleichen Anführungszeichen wie bei der HTML-Attributzuweisung verwenden.

Beispiel 
<p style="font-family: Georgia, 'Times New Roman', serif;">...</p>
Empfehlung: Verwenden Sie in Ihrem Font Stack Schriftarten, die ähnliche Proportionen haben, so dass bei einem Einsatz der nachfolgenden Alternativschriften das Seitenlayout erhalten bleibt.

Schriftfamiliennamen[Bearbeiten]

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.

Beachten Sie: Sollten Sie sich mit dem Gedanken tragen, eine der unter Windows geläufigen Schriften „Symbol“, „Webdings“ oder „Wingdings“ in Ihrer CSS-Datei anzugeben, dann sollten Sie es sich lieber nochmal überlegen. Während Google Chrome diese Schriften anzeigt (sofern sie installiert sind), ignoriert Firefox alle drei Schriftangaben, da es sich nicht um gültige Unicode-Schriften handelt (wo etwa Buchstaben sein sollten, erscheinen willkürliche Symbole. Dies kann zwar mitunter recht lustig sein, widerspricht aber der Idee von Unicode). Die Chancen stehen aber gut, dass die von Ihnen benötigten Symbole irgendwo im normalen Unicode-Zeichenvorrat auftauchen, so dass Sie deswegen nicht unbedingt auf Symbole verzichten müssen.
Empfehlung:

Sie können mittels @font-face auf dem eigenen Server oder bei Anbietern digitaler Schriften wie Google Fonts vorgehaltene Schriften einbinden.

Generische Schriftfamilien[Bearbeiten]

Folgende generische Schriftfamilien sind fest definiert - diese Angaben können Sie also neben Schriftartnamen benutzen:

  • serif, eine Schriftart mit Serifen
  • sans-serif, eine Schriftart ohne Serifen
  • cursive, eine Schriftart für Schreibschrift
  • fantasy, eine Schriftart für ungewöhnliche Schrift
  • monospace, eine Schriftart mit dicktengleichen Zeichen
  • system-ui, die Systemschrift
  • emoji, eine Schriftart für emoticons
  • math, eine Schriftart für mathematische Ausdrücke
  • ui-serif, die Systemschrift mit Serifen
  • ui-sans-serif, die serifenlose Systemschrift
  • ui-monospace, die dicktengleiche Systemschrift
  • ui-rounded, die abgerundete Systemschrift
  • fangsong, chinesische Schriftarten "zwischen" serif und cursive

Es empfiehlt sich, solche generische Schriftarten, wie im Beispiel gezeigt, als letzte Angabe in einer Wertzuweisung an font-family zu notieren. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls jene auf dem System nicht vorhanden ist.

Beispiel ansehen …
body        { width: 30em; }
p           { font: 16px/1.5em; }
.sans-serif { font-family: sans-serif; }
.serif      { font-family: serif; }
.cursive    { font-family: cursive; }
.fantasy    { font-family: fantasy; }
.monospace  { font-family: monospace; }
ansehen …

responsive Schriftarten[Bearbeiten]

Für viele Schriftarten existieren leichtere und fettere Varianten. So existieren neben Georgia und Verdana beispielsweise auch noch Georgia Pro Condensed und Verdana Pro Condensed. Aber bereits, wiederum hier als Beispiel, „Georgia“ liefert (in der hier installierten OTF-Version) die Schnitte „Georgia Regular“, „Georgia Italic“, „Georgia Bold“ und„Georgia Bold Italic“. Die Schrift Times bietet, wiederum hier, 21 Schnitte, während die allgemein „bekannte“ Times New Roman lediglich vier anzubieten hat. – „HTML“ wird noch viel „lernen“ müssen, wenn es sich mit „richtiger Typografie“ befassen will. Es sei denn, Gensfleisch[4] wird von „Googglenbergs“ Platten erschlagen.

Verwenden Sie für kleinere Viewports die leichtere Variante um mehr Informationen zu vermitteln.[5]

@font-face[Bearbeiten]

Bei einer Schriftformatierung mit font-family werden die installierten Fonts des Betriebssystems verwendet. Zusätzliche Schriftarten definieren Sie durch die @font-face-Regel.[6]

Browserunterstützung
caniuse.com

Für den Fall, dass die eingebundene Schriftart nicht angezeigt werden kann, können Sie in einem Font Stack mehrere Alternativen festlegen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.

Empfehlung: Verwenden Sie nur wenige, ausgewählte Schriftarten. Achten Sie dabei besonders auf eine gute Lesbarkeit auch auf kleinen Bildschirmen. Meist bietet sich eine besondere Schriftart nur bei Überschriften in einer besonders groß gewählten Schriftgröße an.
Einbindung mehrerer Schriftarten 
@font-face {
  font-family: 'meine-schrift';
  src: local('meine-schrift'),
       url('pfad/zu/meinerschrift.woff2') format('woff2');
}

Der Parameter src muss eine gültige URL erhalten, durch die Angabe von local können Sie auch lokal vorhandene Schriften abrufen (und so einen HTTP-Request sparen). Lokal vorhandene Schriften haben den Nachteil, dass nicht klar ist in welcher Version sie vorliegen. Es kann sein, dass nicht der komplette Schriftsatz zur Anzeige vorhanden ist oder die Darstellung anders ist als auf dem Entwicklergerät.

Formate[Bearbeiten]

Für die Formatangabe sind folgende Werte erlaubt:

  • 'eot' bzw. 'embedded-opentype', referenziert eine Schriftart im Format „Embedded Open Type“
  • 'woff', referenziert eine Schriftart im Format „Web Open Font Format“
  • 'woff2', referenziert eine Schriftart im Format „Web Open Font Format 2“
  • 'truetype', referenziert eine Schriftart im Format „True Type“
  • 'opentype', referenziert eine Schriftart im Format „Open Type“
  • 'svg', referenziert eine Schriftart im Format „Scalable Vector Graphics“
Empfehlung: Verwenden Sie nur noch das standardisierte[7] und für das Web angepasste Format WOFF oder dessen Nachfolger WOFF2.
Diese sind gegenüber WOFF zwischen 20 und 50 % stärker komprimiert und zudem in Unicode-Bereiche aufgeteilt, sodass die Browser nicht alle Zeichen laden müssen, was das zu ladende Datenvolumen nochmals reduziert.
Alle möglichen Formate anzubieten, ist zwar möglich, macht aber wenig Sinn, da die betroffenen Browser nur noch extrem geringe Marktanteile besitzen. Wesentlich wichtiger ist die Angabe einer generischen Schriftfamilie oder die von Fallback-Schriftarten via font-family, da auch Browser, die @font-face und mindestens eines der gewählten Formate beherrschen, auf eine vorhandene Schriftart zurückfallen müssen, wenn die Font-Ressource (noch) nicht geladen werden konnte.
otf & ttf woff woff2 eot
Firefox Tick.svg (3.5+) Tick.svg (3.6+) Tick.svg (39+) Cross.svg
Chrome Tick.svg (4+) Tick.svg(4+) Tick.svg (38+) Cross.svg
Opera Tick.svg (10+) Tick.svg (15+) Tick.svg (24+) Cross.svg
Safari Tick.svg(3.1+) Tick.svg (5.1+) Tick.svg (10+) Cross.svg

Einbindung und Verwendung[Bearbeiten]

Im folgenden Beispiel wird eine Schrift namens „meine-schrift“ eingebunden und auf das p-Element angewendet (beachten Sie auch die angegebenen Alternativ-Schriftarten):

Beispiel 
@font-face {
  font-family: 'meine-schrift';
  src: url('pfad/zu/meinerschrift.woff2') format('woff2'),
       url('pfad/zu/meinerschrift.woff')  format('woff');
}

p { font-family: meine-schrift, arial, sans-serif; }

Die meisten Anbieter bieten neben einem Font-Hosting auch eine Automatisierung dieses Prozesses an, sodass, falls dies genutzt werden soll, für jede zusätzlich gewünschte font-family lediglich eine zusätzliche CSS-Datei eingebunden werden muss. Das Einbinden kann im (X)HTML-Dokument selbst (Einbinden einer externen Datei) oder im Stylesheet (@import) geschehen.

Beachten Sie: Das Einbinden zusätzlicher Ressourcen verlangsamt den Ladevorgang der Seite. Zudem hat der Webautor keinen Einfluss auf fremdgehostete Schriftarten.

Fallstrick Same-Origin-Policy[Bearbeiten]

Hinweis:

Moderne Browser verhindern das Laden externer Sourcen oder von der Festplatte (Same-Origin-Policy).

  • Testen Sie auf einem (lokalen) Webserver.
  • Referenzieren Sie relativ vom Stylesheet aus und verzichten Sie auf die Angabe von https://.

Gemäß CSS3-Spezifikation muss der Browser für Schriften eine same-origin policy beachten.[8] Firefox und Internet Explorer (ab Version 9) halten sich daran.

Schriften von einer fremden Domain werden dabei nicht angewendet, es sei denn, derjenige, der die Domain mit der jeweiligen Schrift betreibt, erlaubt es (siehe z. B. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Dies dient dazu, die unerlaubte Verwendung von fremden Schriften zu erschweren.[9]

Um die Beschränkungen der same-origin policy nicht unbeabsichtigt auszulösen, sollten Sie Schriften auf der eigenen Domain mit relativen Pfadangaben referenzieren.

Beachten Sie: Sie müssen sicherstellen, dass Sie keine Urheberrechtsverletzung begehen, wenn Sie zusätzliche Schriften einbinden. Folglich müssen Sie entweder die zur Einbindung nötigen Rechte erwerben oder eine freie Schrift verwenden.

Der Internet Explorer ist strenger als Firefox oder Google Chrome, wenn es um die Berechtigung zum Einbinden von Schriften geht. Der Entwickler einer Schrift kann über ein Flag in einer TrueType-Schriftdatei (*.ttf) die Einbindung seiner Schrift in Webseiten verbieten. Während Firefox und Google Chrome die Schrift trotz des Verbots anzeigen, übergeht der Internet Explorer die @font-face-Angabe im CSS, als sei die Schrift nicht vorhanden. Der Besucher der Webseite erhält dabei keine Fehlermeldung; wer aber die Konsole des Internet Explorer aufruft, findet die Meldung: CSS3114: Fehler bei der Berechtigungsprüfung für die OpenType-Einbettung in "@font-face". Die Berechtigung muss "Installable" sein.

Schrifteigenschaften[Bearbeiten]

In der @font-face-Regel können zusätzlich die Eigenschafts-Deskriptoren font-style, font-weight und font-stretch angegeben werden. Dies ist nützlich, wenn die Mitglieder einer Schriftfamilie in verschiedenen Dateien vorliegen:

Beispiel 
@font-face {
  font-family: 'meine-schrift';
  src: url('pfad/zu/meinerschrift.woff2') format('woff2');
}
@font-face {
  font-family: 'meine-schrift';
  src: url('pfad/zu/meiner-kursiven-schrift.woff2') format('woff2');
  font-style: italic;
}
@font-face {
  font-family: 'meine-schrift';
  src: url('pfad/zu/meiner-fetten-schrift.woff2') format('woff2');
  font-weight: bold;
}
@font-face {
  font-family: 'meine-schrift';
  src: url('pfad/zu/meiner-kursiv-fetten-schrift.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}

Damit können auch die kursiven und fetten Varianten der Schriftart zum Stylen verwendet werden:

Beispiel 
<style type="text/css">
span { font-family: 'meine-schrift', sans-serif; }
.it  { font-style: italic; }
.bo  { font-weight: bold; }
</style>
<!-- … -->
<p>Dies ist <code>meine-schrift</code>, auch <span class="it">kursiv</span> und 
   <span class="bo">fett</span>.
</p>

Weitere typografischen Eigenschaften (wie Schriftweite oder Unicode-Vorrat der Zeichen) für CSS sind in der W3C-Empfehlung zum CSS Fonts-Modul aufgeführt.[6]

font-display[Bearbeiten]

Mit font-display bestimmen Sie, wie Text-Elemente mit Webfonts dargestellt dargestellt werden in Abhängigkeit davon, wie schnell der Webfont zur Verfügung steht.

Details: caniuse.com

Innerhalb einer @font-face-Regel können Sie die Dauer der ersten beiden Abschnitte beeinflussen.

Beispiel 
@font-face {
  font-family: MyFont;
  src: url(fonts/myfont.woff2) format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: fallback;
}

Erlaubt sind folgende Angaben

  • auto, der Browser bestimmt das Verhalten, Standardwert, meist block
  • block, die Blockier-Phase dauert ca. 3 Sekunden, die Austausch-Phase ist unbegrenzt.
Das heißt, das Element wird zunächst für eine recht lange Zeitspanne nicht sichtbar dargestellt, danach in einer Alternativ-Schriftart und wenn die Schriftart zur Verfügung steht (egal wie lange es dauert), wird das Element in der gewünschten Schriftart dargestellt.
  • swap, die Blockier-Phase dauert 0,1 s oder weniger, die Austausch-Phase ist unbegrenzt
  • fallback, die Blockier-Phase dauert 0,1 s oder weniger, die Austausch-Phase dauert ca. 3 s
Das heißt, wenn die Schriftart nicht innerhalb der Austausch-Phase heruntergeladen werden kann, wird das Element dauerhaft in einer Alternativ-Schriftart dargestellt. Der Download wird im Hintergrund fortgesetzt.
  • optional, die Blockier-Phase dauert 0,1 s oder weniger, die Austausch-Phase gibt es nicht
Das bedeutet, das Element wird nur dann mit dem Webfont dargestellt, wenn er bereits im Cache zur Verfügung steht. Der Download des Webfonts wird im Hintergrund fortgesetzt.

kostenlose Schriftarten[Bearbeiten]

  • Google Fonts, inklusive Hosting (nicht empfohlen wegen DSGVO), Anleitung bei dasauge.de
  • fontsquirrel, ohne Hosting, Schriften meist in den vier Formaten
  • Font Library, ohne Hosting, nur freie Schriften (jeweilige Lizenz beachten!)
  • …

font-variant[Bearbeiten]

Mit der Eigenschaft font-variant stehen als besondere Schriftvariante Kapitälchen (kleine Großbuchstaben) statt der kleinen Buchstaben zur Verfügung.

Folgende Angaben sind möglich:

  • normal, normale Schriftvariante, Voreinstellung
  • small-caps, Kapitälchen
  • inherit, Schriftvariante des Elternelements
Beispiel ansehen …
p { font-size: 16px; }
h1, span, cite { font-variant: small-caps; }
blockquote { width: 30em; }
blockquote p { font: 20px Georgia, Times, sans-serif; }
cite { display: block; text-align: right; }
ansehen …

Überschrift, span-Element und die Quellenangabe innerhalb des cite-Elements werden in Kapitälchen angezeigt.


Beachten Sie: Eine für ein Element festgelegte Schriftvariante wird ohne Ihr Zutun an die Kindelemente vererbt.

Variable Fonts[Bearbeiten]

Viele CSS-Einstellungen bleiben wirkungslos, da die verwendeten Schriftarten nicht genügend Schriftschnitte beinhalten. Deshalb wurden Variable Fonts entwickelt. Mit ihnen können viele verschiedene Schriftartvarianten in einer einzelnen Datei integriert werden, anstatt wie bisher verschiedene Font-Dateien für die Varianten einer Schriftfamilie mitliefern zu müssen.

Details: caniuse.com

Beachten Sie: Die richtige Darstellung von Variablen Fonts hängt nicht nur vom Browser, sondern auch vom Betriebssystem ab. Linux OSes benötigt die neueste Linux Freetype Version; macOS muss neuer als 10.13 sein.

interaktive Demo: Recursive Sans & Mono

Mit dem CSS Fonts Module Level 4 wird font-variant zur zusammenfassenden Eigenschaft für

  • font-variant-ligatures,
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-alternates.
  • font-variant-numeric
  • font-variant-position.

sowie die Eigenschaften font-feature-settings und font-variation-settings. Mit diesen Eigenschaften können Sie Open Type Schriften beliebig in Form und Größe gestalten.

Angabe des Schriftgewichts 
h2 {
  font-feature-settings: "smcp" on;
  font-variation-settings: "wght" 200;
}
Die Überschrift wird in Kapitälchen mit einem Schriftgewicht von 200, also eher schmal, angezeigt.

Weblinks[Bearbeiten]

font-face

Variable Fonts

Deutsch:

Quellen[Bearbeiten]

  1. ↑ Wikipedia: Schriftgrad
  2. ↑ smashing magazine Typographic Design Patterns And Current Practices (2013 Edition)
  3. ↑ W3C: CSS Fonts Module Level 4
  4. ↑ Gensfleisch war der Familienname von Johannes Gutenberg (de.wikipedia.org)
  5. ↑ smashing magazine: Benton Modern, A Case Study On Art-Directed Responsive Web Typography vom 27.05.2015
  6. ↑ 6,0 6,1 W3C Candidate Recommendation CSS Fonts Module Level 3
  7. ↑ http://www.w3.org/TR/WOFF/
  8. ↑ http://www.w3.org/TR/css3-fonts/#same-origin-restriction
  9. ↑ https://bugzilla.mozilla.org/show_bug.cgi?id=604421#c9

Siehe auch[Bearbeiten]

Folgende CSS-Eigenschaften haben Einfluss auf die Gestaltung der Schrift:

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Typografie/Schriftformatierung&oldid=88588#font-size“