CSS/Tutorials/Typographie/Schriftformatierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

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 HTML/Textstrukturierung und HTML/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

ToDo (weitere ToDos)

gutes Bsp. für unformatierten Text: https://meiert.com/en/blog/user-agent-style-sheets/ --Matthias Scharwies (Diskussion) 04:37, 23. Sep. 2020 (CEST)

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

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Erlaubt sind die üblichen Wertangaben der in font zusammengefassten Eigenschaften, sowie die Angabe inherit. 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.

Beispiel ansehen …
span { white-space: nowrap;}
code { font: italic 36px Arial, sans-serif; }
p    { font: bold .9em/150% Georgia, Times, serif; }
<h1>Die Eigenschaft <code>font</code></h1>
<p>Die Angaben zur verwendeten Schrift lassen sich vielfältig kombinieren.
   Für diesen Absatz gilt zum Beispiel
   <span>{font: bold 0.9em/150% Georgia,Times,serif;}</span>.
</p>
Beachten Sie: Zunächst werden alle font-Eigenschaften auf ihren Ausgangswert zurückgesetzt und somit nur die ausdrücklich definierten Eigenschaften angewandt.

absolute oder relative Schriftgrade?

Ähnlich wie im Printbereich, wo der Punkt sich nicht auf die Größe der Buchstaben an sich, sondern ursprünglich auf die Breite der Bleikegel bezog[1], entspricht ein Pixel nicht einem Bild-Pixel am Bildschirm, sondern dient nur als Basiseinheit.

Grundsätzlich ist es nicht falsch einem Text eine feste Schriftgröße in Pixeln zu geben. Allerdings können Benutzer in ihrem Browser eine andere Schriftgröße einstellen, so dass der Text eventuell aus den für ihn vorgesehenen Boxen überläuft.

Gerade angesichts der heutigen vielfältigen Viewports ist es sinnvoller für bestimmte Größen mittels media queries eine Basisschriftgröße anzugeben. Alle weiteren Werte beziehen sich dann auf diesen Wert. Bei der Verwendung von em muss auf die Schachtelung der Elemente Rücksicht genommen werden, da sich dieser Werte jeweils auf das Elternelement bezieht. Durch die Verwendung von rem, das sich auf die Schriftgröße des Wurzelelements html bezieht, können Sie diese Fehlerquelle umgehen.

Schriftgröße

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 selbst, die Schriftgröße mit einem Fingerziehen oder strg + + bzw. - auf Desktop-Geräten selbst zu skalieren.
Beachten Sie:

responsive Schriftarten

Für viele Schriftarten existieren leichtere und fettere Varianten. So existieren neben Georgia und Verdana auch noch Georgia Pro Condensed und Verdana Pro Condensed. Verwenden Sie für kleinere Viewports die leichtere Variante um mehr Informationen zu vermitteln. [3]

@font-face

Bei einer Schriftformatierung mit font-family) werden installierten Fonts des Betriebssystems verwendet. Zusätzliche Schriftarten definieren Sie durch das Attribut @font-face.[4]

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: 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.

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://.



Beispiel
@font-face { font-family: 'meine-schrift';
             src: local ('meine-schrift')
                  url('pfad/zu/meinerschrift.ttf') format('truetype'); }

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)

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“
Beachten Sie: Die Angabe des Formates sollte mit dem Format der referenzierten Datei übereinstimmen – die Dateiendung stimmt nicht zwangsläufig mit dem Namen des Formats überein.

Eine so festgelegte Schriftart lässt sich wie gewohnt im CSS verwenden.

Beispiel
p { font-family: meine-schrift, arial, sans-serif; }
Empfehlung: Verwenden Sie nach Möglichkeit Schriftarten im Format 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.
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.

Formate

Alle aktuellen Versionen der Browser unterstützen das standardisierte[5] und für das Web angepasste Format WOFF oder dessen Nachfolger WOFF2. Es gibt mehrere Anbieter, die es ermöglichen, Schriften in das Format WOFF zu konvertieren. Beispielsweise können mit dem „Webfont Generator“ von fontsquirrel.com Schriften nach WOFF und WOFF2 konvertiert werden.

otf & ttf woff woff2 eot
IE Edge Tick.gif (9+) Tick.gif (9+) Tick.gif (14+) Tick.gif (5.5+)
Firefox Tick.gif (3.5+) Tick.gif (3.6+) Tick.gif (39+) Cross.gif
Chrome Tick.gif (4+) Tick.gif (4+) Tick.gif (38+) Cross.gif
Opera Tick.gif (10+) Tick.gif (15+) Tick.gif (24+) Cross.gif
Safari Tick.gif (3.1+) Tick.gif (5.1+) Tick.gif (10+) Cross.gif

Um eine möglichst breite Browserunterstützung zu erzielen, reicht bereits die Verwendung von WOFF und WOFF2. 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. Dies kommt auch Browsern zu Gute, die @font-face nicht unterstützen – diesen Browsern können Sie auf diesem Weg eine möglichst passende lokal vorhandene Ersatz-Schriftarten vorschlagen.

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.

Fallstricke

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.

Gemäß CSS3-Spezifikation muss der Browser für Schriften eine same-origin policy beachten.[6] 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.[7] Um die Beschränkungen der same-origin policy nicht unbeabsichtigt auszulösen, sollten Sie Schriften auf der eigenen Domain mit relativen Pfadangaben referenzieren.

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.ttf') format('truetype'); }
@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meiner-kursiven-schrift.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meiner-fetten-schrift.ttf') format('truetype');
             font-weight: bold; }
@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meiner-kursiv-fetten-schrift.ttf') format('truetype');
             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.[4]

Information: Einbindung von Schriften aus CDNs

Firmen wie Google Fonts bieten an, deren Schriften bequem einzubinden und von deren CDNs abzurufen. Dadurch ist es möglich, die Besucher Ihrer Website wiederzuerkennen und Profile zu erstellen. Überlegen Sie genau, ob das Einbinden einer Schriftart für Ihre Besucher einen Mehrwert bietet, der deren Daten Wert ist. Falls Sie sich dazu entscheiden, müssen Sie Ihre Benutzer in der Datenschutzerklärung darüber informieren.
Allerdings werden Schriftarten nach der erstmaligen Abholung im Browsercache gespeichert, sodass ein dauerhaftes Tracking dadurch nicht möglich sein sollte.


kostenlose Schriftarten

Variable Fonts mit font-variant

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

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

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

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Leer

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

font-face

Variable Fonts

Deutsch:

Quellen

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

Siehe auch

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