Skip to main content

Was ist ein "Schriftstapel"?

Während Bilder bei Websites viel Liebe finden, ist es das geschriebene Wort, das Suchmaschinen anspricht und den Inhalt der meisten Websites weitergibt. Daher ist das typografische Design ein äußerst wichtiger Bestandteil des Website-Designs. Mit der Wichtigkeit des Textes einer Website muss sichergestellt werden, dass sie gut aussieht und leicht lesbar ist. Dies geschieht mit CSS (Cascading Style Sheets).

Dem modernen Webdesign-Standard folgend, wenn Sie das Aussehen des Textinhalts einer Website bestimmen möchten, verwenden Sie CSS. Dadurch wird dieser CSS-Stil von der HTML-Struktur einer Seite getrennt. Wenn Sie beispielsweise die Schriftart einer Seite auf "Arial" setzen möchten, können Sie dies tun, indem Sie die folgende Stilregel zu Ihrem CSS hinzufügen (dies würde wahrscheinlich in einem externen CSS-Stylesheet erfolgen, das die Stile für alle unterstützt.) Seite auf der Website):

Karosserie {

Schriftfamilie: Arial;

}

Diese Schriftart ist für den "Hauptteil" festgelegt, sodass die CSS-Kaskade den Stil auf alle anderen Elemente der Seite anwendet. Dies ist darauf zurückzuführen, dass jedes andere HTML-Element ein untergeordnetes Element des "body" -Elements ist. CSS-Stile wie die Schriftfamilie oder Farbe werden vom übergeordneten Element zum untergeordneten Element kaskadiert. Dies ist der Fall, wenn nicht für bestimmte Elemente ein spezifischerer Stil hinzugefügt wird. Das einzige Problem bei diesem CSS ist, dass nur eine einzige Schriftart angegeben wird. Wenn diese Schriftart aus irgendeinem Grund nicht gefunden werden kann, ersetzt der Browser stattdessen eine andere. Das ist schlecht, weil Sie nicht kontrollieren können, welche Schriftart verwendet wird. Der Browser wird für Sie auswählen und Ihnen gefällt möglicherweise nicht, was er verwenden möchte! Hier kommt ein Fontstack ins Spiel.

Ein Schriftartenstapel ist eine Liste von Schriftarten in der Deklaration der CSS-Schriftfamilie. Die Zeichensätze werden in der Reihenfolge aufgeführt, in der sie auf der Website angezeigt werden sollen, wenn ein Problem auftritt, z. B. wenn eine Schrift nicht geladen wird. Mit einem Schriftartenstapel kann ein Designer das Aussehen der Schriftarten auf der Webseite selbst dann steuern, wenn der Computer nicht über die von Ihnen angeforderte ursprüngliche Schriftart verfügt.

Wie sieht also ein Fontstack aus? Hier ist ein Beispiel:

Karosserie {

Schriftfamilie: Georgia, "Times New Roman", Serife;

}

Hier gibt es ein paar Dinge zu beachten.

Zuerst werden Sie sehen, dass wir die verschiedenen Schriftnamen mit einem Komma getrennt haben. Sie können beliebig viele Zeichensätze hinzufügen, sofern diese durch ein Komma getrennt sind. Der Browser versucht, die zuerst angegebene Schriftart zu laden. Wenn dies fehlschlägt, wird die Zeile in der Zeile durchlaufen und jede Schriftart getestet, bis eine gefunden wird, die verwendet werden kann. In diesem Beispiel verwenden wir webgeschützte Schriftarten. "Georgia" wird wahrscheinlich auf dem Computer der Person gefunden, der die Website besucht (der Browser sucht auf Ihrem Computer nach den auf der Seite angegebenen Schriftarten), so dass die Website dies tatsächlich anzeigt Computer, welche Schriftarten von Ihrem System geladen werden sollen). Wenn die Schriftart aus irgendeinem Grund nicht gefunden wurde, würde sie den Stapel nach unten verschieben und die nächste angegebene Schriftart versuchen.

Beachten Sie bei der nächsten Schrift, wie sie in den Stapel geschrieben wird. Der Name von "Times New Roman" ist in doppelte Anführungszeichen gesetzt. Dies liegt daran, dass der Name der Schrift mehrere Wörter enthält. Alle Namen von Schriftarten mit mehr als einem Wort (Trebuchet MS, Courier New usw.) müssen den Namen in doppelten Anführungszeichen enthalten, damit der Browser weiß, dass alle diese Wörter Teil eines Schriftnamens sind.

Schließlich beenden wir den Fontstapel mit "serif", einer generischen Fontklassifizierung. In dem unwahrscheinlichen Fall, dass keine der in Ihrem Stack genannten Schriftarten verfügbar ist, findet der Browser stattdessen nur eine Schrift, die mindestens der von Ihnen gewählten Klassifizierung entspricht. Wenn Sie beispielsweise serifenlose Schriftarten wie Arial und Verdana verwenden, wird das Beenden eines Schriftenstapels mit der Klassifizierung "serifenlos" mindestens die Schrift in dieser Gesamtfamilie beibehalten, wenn ein Ladeproblem auftritt. Zwar sollte es sehr selten sein, dass ein Browser keine der im Stack aufgelisteten Schriften findet und diese generische Klassifikation verwenden muss. Es ist eine bewährte Methode, sie trotzdem einzufügen, um nur doppelt sicher zu sein.

Fontstacks und Webfonts

Viele Websites verwenden heutzutage Webfonts, die entweder zusammen mit anderen Ressourcen (z. B. Bildern der Website, Javascript-Datei usw.) auf der Website enthalten sind, oder mit einem externen Zeichensatz wie Google Fonts oder Typekit verlinkt. Diese Schriftarten sollten zwar geladen werden, da Sie auf die Dateien selbst verlinken, Sie möchten jedoch weiterhin einen Schriftartenstapel verwenden, um sicherzustellen, dass Sie die Kontrolle über eventuell auftretende Probleme haben. Dasselbe gilt für "Web-Safe" -Schriftarten, die sich auf einem Computer befinden sollten. Beachten Sie, dass die in diesem Artikel als Beispiele verwendeten Schriftarten, einschließlich Arial, Verdana, Georgia und Times New Roman, alle Web-sicheren Schriftarten sind, die verwendet werden sollten auf dem Computer einer Person). Auch wenn die Wahrscheinlichkeit, dass eine Schrift fehlt, sehr gering ist, hilft die Angabe eines Schriftstapels, den typografischen Entwurf einer Site so stark wie möglich zu schützen.

Originalartikel von Jennifer Krynin. Herausgegeben von Jeremy Girard.