Typografie

Erinnern wir uns wieder an die Visuellen Regeln, dass die Schriftart eines Elements mithilfe der font-family Eigenschaft geändert werden kann.

Im obigen Beispiel wurde die Schriftfamilie für alle <h1> Überschriftenelemente auf Arial eingestellt.

Schauen wir uns an, was wir beim Festlegen von font-family Werten beachten sollten.

Mehrwortwerte

Wenn wir eine Schriftart mit mehreren Wörtern angeben, beispielsweise Times New Roman, empfiehlt es sich, Anführungszeichen (' ') zu verwenden, um die Wörter wie folgt zu gruppieren:

Websichere Schriftarten

Es gibt eine Auswahl an Schriftarten, die in allen Browsern und Betriebssystemen gleich aussehen. Diese Schriftarten werden als websichere Schriftarten bezeichnet. Eine vollständige Liste websicherer Schriftarten finden wir hier.

Fallback-Schriftarten und Schriftartenstapel

Websichere Schriftarten sind gute Ersatzschriftarten, die verwendet werden können, wenn die bevorzugte Schriftart nicht verfügbar ist.

Im obigen Beispiel sind Georgia und Times New Roman Ersatzschriften für Caslon. Wenn wir eine Gruppe von Schriften angeben, erhalten wir einen sogenannten Schriftstapel. Ein Schriftstapel enthält normalerweise eine Liste ähnlich aussehender Schriften. Hier versucht der Browser zuerst, die Schriftart Caslon zu verwenden. Wenn diese nicht verfügbar ist, versucht er, eine ähnliche Schriftart, Georgia, zu verwenden. Und wenn Georgia nicht verfügbar ist, versucht er, Times New Roman zu verwenden.

Serifen und serifenlose Schriften

Die Schriftarten Caslon, Georgia und Times New Roman sind Serifenschriften. Serifenschriften haben zusätzliche Details an den Enden jedes Buchstabens, im Gegensatz zu serifenlosen Schriftarten, die diese zusätzliche Details nicht haben.

serif und sans-serif sind auch Schlüsselwortwerte, die als endgültige Fallback-Schriftart hinzugefügt werden können, wenn nichts anderes im Schriftartenstapel verfügbar ist.

In CSS ist die font-weight die Eigenschaft die steuert, wie fett oder dünn Text angezeigt wird. Sie kann mit Schlüsselwörtern oder numerischen Werten angegeben werden.

Schlüsselwortwerte

Die font-weight Eigenschaft kann einen dieser Schlüsselwortwerte annehmen:

• bold - Fette Schriftstärke

• normal - Normale Schriftstärke. Dies ist der Standardwert.

• lighter - Eine Schriftstärke heller als der übergeordnete Wert des Elements.

• bolder - Eine Schriftstärke fetter als der übergeordnete Wert des Elements.

Numerische Werte

Numerische Werte können zwischen 1 (am hellsten) und 1000 (am fettesten) liegen, üblicherweise werden jedoch Schritte von 100 verwendet. Eine Schriftstärke von 400 entspricht dem Schlüsselwortwert normal und eine Schriftstärke von 700 entspricht bold.

Wir können Text auch kursiv setzen mit dem font-style Eigentum.

Mit der Eigenschaft text-transform kann der Text auch so formatiert werden, dass er entweder komplett in Großbuchstaben oder komplett in Kleinbuchstaben angezeigt wird.

Wir haben gelernt, wie Text durch Schriftfamilie, Stärke, Stil und Transformationen definiert werden kann. Jetzt lernen wir einige Möglichkeiten kennen, wie Text im Container des Elements angezeigt oder angeordnet werden kann.

Buchstabenabstand

Die letter-spacing Eigenschaft wird verwendet, um den horizontalen Abstand zwischen den einzelnen Zeichen in einem Element festzulegen. Es ist nicht üblich, den Abstand zwischen Buchstaben festzulegen, aber es kann manchmal die Lesbarkeit bestimmter Schriftarten oder Stile verbessern. Die letter-spacing Eigenschaft nimmt Längenwerte in Einheiten wie 2px oder 0.5em an.

Im obigen Beispiel wird jedes Zeichen im Absatzelement durch 2 Pixel getrennt

Wortabstand

Mit der Eigenschaft word-spacing können wir den Abstand zwischen Wörtern festlegen. Es ist auch nicht üblich, den Abstand zwischen Wörtern zu vergrößern, aber es kann dazu beitragen, die Lesbarkeit von fettgedrucktem oder vergrößertem Text zu verbessern. Die word-spacing Eigenschaft akzeptiert auch Längenwerte in Einheiten wie 3px oder 0.2em.

Im obigen Beispiel ist der Wortabstand auf 0.3em eingestellt. Für den Wortabstand empfiehlt sich die Verwendung von em Werten, da der Abstand auf Basis der Schriftgröße eingestellt werden kann.

Zeilenhöhe

Mit dieser Eigenschaft können wir line-heigt festlegen, wie hoch jede Zeile mit unserem Text sein soll. Zeilenhöhenwerte können eine einheitenlose Zahl wie 1.2 sein oder ein Längenwert wie 12px, 5% oder 2 em sein.

Im obigen Beispiel ist die Höhe zwischen den Zeilen auf 1.4 eingestellt. Im Allgemeinen wird der Wert ohne Einheit bevorzugt, da er auf der Grundlage der aktuellen Schriftgröße reagiert. Mit anderen Worten: Wenn line-height durch eine Zahl ohne Einheit angegeben wird, wird beim Ändern der Schriftgröße die Zeilenhöhe automatisch angepasst.

Textausrichtung

Die Eigenschaft text-align, die wir möglicherweise bereits aus der Lektion "CSS Visuelle Regeln" kennen, richtet Text an seinem übergeordnetem Element aus.

Online-Schriftartendienste wie Google Fonts erleichtern das Auffinden und Verlinken von Schriftarten auf unserer Webseite. Wir können Schriftarten durchsuchen und auswählen, die zum Stil unserer Webseite passen.

Wenn wir in Google Fonts eine Schriftart auswählen, werden uns alle verfügbaren Stile für diese Schriftart angezeigt. Wir können dann die Stile auswählen, die wir auf unserer Webseite verwenden möchten.

Wenn wir mit der Auswahl einer Schriftart und ihrer Stile fertig sind, können wir unsere ausgewählte Schriftfamilie überprüfen. Außerdem wird automatisch ein <link> Element für die Verwendung auf unserer Seite generiert.

Das generierte <link> Element muss dem <head> Element in unserem HTML-Dokument hinzugefügt werden, damit es in unserem CSS verwendet werden kann.

@font-face Schriftarten können auch mithilfe eines Regelsatzes in unserem CSS-Stylesheet hinzugefügt werden, anstatt ein <link> Element in unserem HTML-Dokument zu verwenden. Wie bereits erwähnt, können Schriftarten wie jede andere Datei im Web heruntergeladen werden. Sie sind in verschiedenen Dateiformaten verfügbar, beispielsweise:

• OTF (Open Type Font)

• TTF (True Type Font)

• WOFF (Web Open Font Format) 

• WOFF2 (Web Open Font Format 2)

Die verschiedenen Formate sind eine Abfolge von Standards für die Funktionsweise von Schriftarten in verschiedenen Browsern, wobei WOFF2 das fortschrittlichste Format ist. Es ist eine gute Idee, die Formate TTF, WOFF und WOFF 2 in unsere @font-face Regel aufzunehmen, um die Kompatibilität mit allen Browsern sicherzustellen.

Sehen wir uns an, wie man @font-face mit der gleichen Schriftart Roboto wie zuvor verwendet:

Im Abschnitt "Ausgewählte Familien anzeigen" können wir die Schriftdateien mit der Schaltfläche "Herunterladen" auf unseren Computer herunterladen. Die Dateien werden in einem einzigen Format heruntergeladen, in diesem Fall TTF. Wir können zusätzliche Tools verwenden, um zusätzliche Dateitypen für WOFF und WOFF2 zu generieren. Weitere Informationen finden wir in der Liste der Schriftartengeneratoren von MDN.

Wenn wir die benötigten Dateien haben, verschieben wir sie in einen Ordner im Arbeitsverzeichnis unserer Webseite. Schon können wir sie in einem @font-face Regelsatz verwenden!

Schauen wir uns das obige Beispiel Zeile für Zeile an:

• Als Selektor wird die @font-face Regel verwendet. Es empfiehlt sich, den @font-face Regelsatz oben in unserem CSS-Stylesheet zu definieren.

• Innerhalb des Deklarationsblocks wir die font-family Eigenschaft verwendet, um einen benutzerdefinierten Namen für die heruntergeladene Schriftart festzulegen. Der Name kann beliebig sein, muss aber in Anfühungszeichen gesetzt werden. Im Beispiel heißt die Schriftart Roboto.

• Die src Eigenschaft enthält drei Werte, die jeweils den relativen Pfad zur Schriftdatei und ihr Format angeben. In diesem Beispiel werden die Schriftdateien in einem Ordner fonts im Arbeitsverzeichnis gespeichert.

• Beachten wir, dass die Reihenfolge der verschiedenen Formate wichtig sind, da unser Browser oben in der Liste beginnt und sucht, bis er ein unterstütztes Schriftformat findet. Weitere Informationen zur Formatpriorisierung finden wir bei CSS-Tricks.

Sobald die @font-face Regel definiert ist, können wir die Schriftart in unserem Stylesheet verwenden!