Typografie/Schriftformatierung

Aus SELFHTML-Wiki
< Typografie(Weitergeleitet von Webfont)
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.

Dieses Grundlagen-Kapitel zeigt , wie Du Schriftarten, Schriftgrößen und Strichstärken mit CSS einstellen kannst. Im letzten Abschnitt lernst Du, wie Du mittels @font-face Web Fonts einbinden kannst.

Beachte: Benutzer können im Betriebssystem und auch im Browser einstellen, welche Schriftarten (und Schriftgrößen) für die Darstellung von Text verwendet werden.
--Matthias Scharwies (Diskussion) 07:47, 30. Jul. 2023 (CEST)

Schriftarten und Schriftfamilien

Mit der font-family-Eigenschaft kannst Du Schriftarten angeben, ohne dich 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.

Du kannst mehrere Alternativen festlegen. Dabei 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.

Schriftartenstapel (Font Stacks) 
<p style="font-family: Georgia, 'Times New Roman', serif;">...</p>
Beachte: Trenne 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.
Du kannst dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden. Falls die CSS-Eigenschaften innerhalb eines style-Attributs im HTML-Quelltext notiert sind, dürfen nicht die gleichen Anführungszeichen wie bei der HTML-Attributzuweisung verwendet werden.
Empfehlung: Verwende in Deinem Font Stack Schriftarten, die ähnliche Proportionen haben, so dass bei einem Einsatz der nachfolgenden Alternativschriften das Seitenlayout erhalten bleibt.

Schriftfamiliennamen

Die in der Typografie verwendeten Begriffe Schrift, Schriftart und Schriftfamiie sind nicht trennscharf.

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman. Nicht jede Schriftart ist auf jedem Betriebssystem vorhanden. So ist Helvetica die serifenlose Schrift für Macs, die von Windows automatisch durch Arial ersetzt wird. [1]

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.

Generische Schriftfamilien

Deshab kannst Du anstelle, bzw. zusätzlich zu einer genauen Angabe einer Schriftart generische Schriftfamilien angeben:

  • 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 bietest Du 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.

Generische Schriftfamilien mit font-family 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; }

Schriftstärke

Mit der font-weight-Eigenschaft kannst Du die Dicke und Stärke einer Schrift - die Schriftstärke (fälschlicherweise Schriftgewicht genannt) - bestimmen.

Folgende Angaben sind möglich:

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; }
Beachte: Während bold und normal problemlos eingesetzt werden können, hängt die Umsetzungen genauerer Angaben vom Vorhandensein ensprechender Schriftschnitte auf dem System des Nutzers ab.

Schriftgröße

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

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

Schriftgrößen ansehen …
h2 { font-size: 48px; }
p  { font-size: 1.2em; }
a  { font-size: 0.7cm; }
Beachte: 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. Nutze für Schriftgrößen besser nicht die Einheit px. Auch die Einheiten cm oder pt sollten in Bildschirmlayouts keine Verwendung finden.

Noch vor ein paar Jahren war es üblich, dem p-Element eine feste Größe von 75–80 % oder sogar nur 8px zu geben.[3] 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:
  • Verwende die Standardschriftgröße 1em auch als Schriftgröße für Deinen Text. Wenn Du die Maßeinheit rem verwendest, kannst Du Änderungen in den Elternelementen von p ignorieren.
  • Überlasse 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. Vertraue darauf, dass Deine Anwender wissen, wie sie ihr Gerät bedienen können.
Beachte:

line-height

Mit der Eigenschaft line-height kannst Du 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
  • normal, Voreinstellung, weist den Browser an, eine vernünftige relative Zeilenhöhe selbst zu wählen

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; }

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

Du kannst die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Du beide Angaben innerhalb der Eigenschaft font mit der folgenden Syntax notierst:

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.

Beachte: Die Angabe der Schriftart ist notwendig.


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; }

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

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

@font-face

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

Browserunterstützung
caniuse.com

Für den Fall, dass die eingebundene Schriftart nicht angezeigt werden kann, kannst Du 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: Verwende nur wenige, ausgewählte Schriftarten. Achte 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 kannst Du auch lokal vorhandene Schriften abrufen (und so einen HTTP-Request sparen). Eine solche Angabe hat den Vorteil, dass die Webseite auch ohne Internetverbindung mit der passenden Schrift dargestellt werden kann.

Beachte: Unter lokal vorhandenen Schriften sind im Betriebssystem installierte Schriften gemeint. Über solche Schriften hast du auf Deinem Computer Einfluss, bei anderen kannst du nur raten. Verschiedene Betriebssystem verwenden unterschiedliche Schriften.

Fallstrick Same-Origin-Policy

Hinweis:

Moderne Browser beachten für Schriften eine same-origin policy und verhindern das Laden externer Sourcen oder von der Festplatte.[5] Schriften von einer fremden Domain werden dabei nicht angewendet, es sei denn, derjenige, der die Domain mit der jeweiligen Schrift betreibt, erlaubt es (siehe CORS). Dies dient dazu, die unerlaubte Verwendung von fremden Schriften zu erschweren.[6]

  • Richte dir einen (lokalen) Webserver ein und teste dort!
  • Um die Beschränkungen der same-origin policy nicht unbeabsichtigt auszulösen, solltest Du Schriften vom Stylesheet aus mit relativen Pfadangaben referenzieren und auf die Angabe von https:// verzichten.
Beachte: Du musst sicherstellen, dass Du keine Urheberrechtsverletzung begehst, wenn Du zusätzliche Schriften einbindest. Folglich musst Du entweder die zur Einbindung nötigen Rechte erwerben oder eine freie Schrift verwenden.

woff2 - das beste Format

Browserunterstützung
caniuse.com

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: Verwende 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, [8] 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

Im folgenden Beispiel wird eine Schrift namens „meine-schrift“ eingebunden und auf das p-Element angewendet (beachte 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.

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

Schrifteigenschaften

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>
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.[4]

font-display

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

Browserunterstützung
caniuse.com

Innerhalb einer @font-face-Regel kannst Du 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.

Fazit

Eine Webseite in den Standardeinstellungen des Browsers (und des Nutzers) wird zwar „nur“ schwarz-weiß und in einer Schriftart dargestellt, ist aber gut lesbar. Mit den oben vorgestellten Eigenschaften kannst Du andere Schriftarten einbinden und Deine Webseiten aufwerten. Doch auch hier gilt, wie eigentlich immer: „Weniger ist mehr!“

Empfehlung: Setze typografische Effekte nur sparsam und gezielt, z. B. bei Überschriften ein!

Noch mehr Möglichkeiten bieten sich mit den Variablen Fonts, die im nächsten Kapitel vorgestellt werden.


Quellen

  1. ↑ office-watch.com: Why and how Windows substitutes Arial font for Helvetica
  2. ↑ Wikipedia: Schriftgrad
  3. ↑ smashing magazine Typographic Design Patterns And Current Practices (2013 Edition)
  4. ↑ 4,0 4,1 W3C Candidate Recommendation CSS Fonts Module Level 5
  5. ↑ W3C: 4.9. Font fetching requirements
  6. ↑ bugzilla: Same domain policy for @font-face. really?!?
  7. ↑ https://www.w3.org/TR/WOFF/
  8. ↑ using font-face

kostenlose Schriftarten

  • 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!)
  • …

Siehe auch

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

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Typografie/Schriftformatierung&oldid=98700#.40font-face“