Anmerkung des Herausgebers: Dieser Gastbeitrag wurde von Abbey Fitzgerald geschrieben, einer UX-Softwareentwicklerin und Webdesignerin, die die Kunst des Programmierens liebt.

Typografie ist ein grundlegendes Element in jeder Ihrer Webdesign-Arbeiten. Der Grund, warum wir beauftragt werden, Websites für unsere Kunden zu entwerfen, ist, dass sie ein Erlebnis bieten können, das ihren Benutzern hilfreiche Inhalte bietet. Eine solide typografische Basis hilft dabei, Inhalte so anzuzeigen, dass Benutzer sie effektiv nutzen können. Während es auf einer Website viele andere Designelemente geben kann, ist der Inhalt die Hauptüberlegung, und als Designer ist es unsere Aufgabe, Projekte durch unsere Auswahl und Verwendung von Typografie zu verbessern.

Typografische Grundlagen

Schriftart vs. Schriftart

Bevor wir zu weit in die Typografie-Diskussion einsteigen, lassen Sie uns die Begriffe „Schriftart“ und „Schriftbild“ durchgehen. Eine Schriftart bezieht sich auf den Satz typografischer Symbole und Zeichen: Buchstaben, Zahlen und alle Zeichen, mit denen wir Wörter auf unserer Website platzieren können. Es ist das Design des Alphabets, im Grunde die Form der Buchstaben, die diesen Stil ausmachen. Wenn wir uns auf Helvetica beziehen, beziehen wir uns auf eine Schriftart.

Eine Schriftart ist definiert als der vollständige Zeichensatz innerhalb der Schriftart, der sich häufig auf eine bestimmte Größe und einen bestimmten Stil bezieht. Helvetica Bold 10 Point ist eine Möglichkeit, auf eine Schriftart zu verweisen. Schriftarten sind spezifisch für die Dateien, die alle Zeichen und Glyphen innerhalb der Schriftart enthalten.

Diese großartige Debatte „Schriftart vs. Schriftbild“ sorgt für wunderbare Gespräche mit anderen Designern. Für alle Schreibfreaks da draußen, wir sprechen eigentlich über Schriftarten, aber „Webfonts“ werden am häufigsten in Gesprächen verwendet.

Schriftklassifizierung

Wenn Sie auf die vielen verfügbaren Schriftarten auf der Welt stoßen, müssen Sie mit deren Klassifizierung vertraut sein. Am gebräuchlichsten ist es, sie nach technischem Stil zu klassifizieren: Serif, Sans-Serif, Schrift, Anzeige usw. Schriften werden auch nach anderen Merkmalen wie proportional oder monospaced klassifiziert. Je nach Quelle können sie sehr spezifisch werden.

Geschichte der websicheren Typografie

In den frühen Tagen des Internets waren wir mit websicheren Optionen konfrontiert, die sehr einschränkend waren. Damit ein Benutzer die vom Designer vorgesehene Schriftart sehen konnte, musste diese auf seinem Computer verfügbar sein. Wenn Sie ein Stylesheet von einer älteren Website öffnen, werden Sie wahrscheinlich Arial, Georgia, Times New Roman, Trebuchet MS und/oder Verdana finden. Dies waren die Schriftarten, die am wahrscheinlichsten auf dem Computer eines Benutzers vorhanden waren, sodass sie als „websicher“ galten, da die Mehrheit der Benutzer die Website wie beabsichtigt anzeigen konnte.

Wenn Sie schon seit einiger Zeit Websites entwerfen oder ein langjähriger Websurfer sind, erinnern Sie sich wahrscheinlich an die Tage der begrenzten typografischen Möglichkeiten. Vor nicht allzu langer Zeit sahen wir beim Surfen im Internet immer wieder die gleichen fünf Schriften. Die Dinge sahen ohne andere websichere Optionen langweilig aus, und man könnte argumentieren, dass diese Schriftarten nicht die beste Wahl für das Web waren (schließlich stammen sie aus dem Druck). Aber als sich das Web weiterentwickelte, wurden mehr Typoptionen verfügbar.

Was sind Webfonts?

Da Typografie so wichtig ist, ist es an der Zeit zu feiern, dass große Fortschritte gemacht wurden. Wir haben so viele Schriftarten zur Verfügung, dass wir jetzt auswählen können, was für unsere Benutzer am besten ist, anstatt uns auf dieselben alten websicheren Schriftarten verlassen zu müssen, auf die wir früher beschränkt waren.
Webfonts sind nicht wie websichere Schriftarten auf dem System des Benutzers vorinstalliert. Wir müssen uns nicht darauf verlassen, dass der Benutzer die gewünschte Schriftart auf seinem Computer hat. Sie stammen aus einer mitgelieferten Quelle, sodass jeder Benutzer die definierte Schriftart sehen kann. Diese Schriftarten werden beim Rendern der Webseite vom Browser heruntergeladen und dann auf den Text angewendet.

So verwenden Sie Webfonts

Die @font-face-Regel

Diese weithin unterstützte Regel ermöglicht es uns, Schriftarten von einem Server herunterzuladen oder sie zu hosten, damit wir sie auf unseren Webseiten verwenden können. Indem wir die @font-face Regel in unserem Stylesheet deklarieren, können wir den Namen der Schriftart, den Ort und die Schriftstärke angeben.

Dieses Beispiel zeigt, wie wir Open Sans Regular hinzufügen. Sie werden sehen, dass die Quelle ein Schriftartenordner ist, der im Website-Projekt enthalten ist.

 [CSS]

@Schriftart {
Schriftfamilie: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
Schriftstärke: normal;
Schriftstil: normal;
}

[/css]

Die obige Deklaration fügt die Schriftart hinzu, damit sie verwendet werden kann. Wie bekommen wir es eigentlich zur Anzeige?

 [CSS]

.Beispiel{
Schriftfamilie: "Open Sans Regular", Arial, serifenlos;

}

[/css]

Sie können sehen, dass der Name der Schriftart auf „Open Sans Regular“ eingestellt ist. Dies ist der Schriftartname, auf den dann in unserem CSS-Schriftartenstapel verwiesen wird, zusammen mit Fallback-Schriftarten, falls die Schriftart aus irgendeinem Grund nicht geladen wird. In den meisten Fällen wird die Schriftart problemlos geladen, aber es ist eine gute Idee, für alle Fälle Fallbacks einzuschließen.

Denken Sie daran, dass die meisten Schriftarten andere Familien haben, manche mehr als andere. Um diese zu verwenden, stellen Sie sicher, dass Sie sie jeweils in die @font-face -Regel aufnehmen.

Formate und Webfonts

Lassen Sie uns etwas tiefer in Webfonts eintauchen, wenn Sie mehrere Formate benötigen. Diese Schriftarten werden selbst gehostet und auf dem Server in einem Ordner namens „Schriftarten“ gespeichert. Sie werden feststellen, dass gegenüber dem letzten Beispiel einige neue Zeilen hinzugefügt wurden.

 [CSS]

@Schriftart {
Schriftfamilie: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url(" ../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
Schriftstärke: normal;
Schriftstil: normal;
}

[/css]

Es gibt einen Grund, warum wir verschiedene Formate wie .eot, .woff, .ttf, .truetype und SVG einbinden müssen. Unterschiedliche Browser unterstützen unterschiedliche Schriftformate, daher müssen wir unsere Grundlagen abdecken und alles bereitstellen, was verschiedene Browser benötigen.

Hier ist eine Liste von Browsern und welche Schriftdateitypen sie unterstützen:

• Internet Explorer – .eot
• Mozilla Firefox – .otf und .ttf
• Safari und Opera – .otf, .ttf und .svg
• Chrome – .ttf und .svg
• Mobile Safari – .svg

Font-Hosting

Bei der Verwendung von Webfonts benötigt das Stylesheet die Schriftart selbst, damit sie in Ihrem Design gerendert werden kann. Aus diesem Grund müssen die Schriftartdateien irgendwo gehostet werden. Es gibt zwei Möglichkeiten, wo Sie Ihre Schriftarten unterbringen können. Sie können einen Dienst nutzen, der Schriftarten für Sie hostet, oder Sie können die eigentlichen Schriftartdateien selbst hosten. Es hängt wirklich vom Projekt ab, jeder mit seinen eigenen Vorteilen.

Je nachdem, welchen Ansatz Sie wählen, ob selbst gehostet oder mit einem Schriftartendienst wie Typekit gehostet, sieht das CSS anders aus. Wie der Name schon sagt, werden Kits mit Typekit erstellt. Diese enthalten alle Schriftarten, die Sie verwenden werden. Um auf diese Dateien zu verweisen, fügen Sie dem Kopf Ihres HTML-Dokuments ein Javascript-Snippet hinzu. Auf diese Weise können Sie die richtigen @font-face -Regeln laden.

Hosting-Dienstleister

Es gibt zu viele Hosting-Dienstleister, um sie zu erwähnen, aber TypeKit, Fonts.com, H&Co (Hoefler and Company) sind einige Optionen. Grundsätzlich haben sie die Schriftarten auf ihrem Server, und Sie können sie je nach Art Ihres Kontos frei verwenden.

Einige Vorteile dieses Ansatzes sind:

• Diese Anbieter haben in der Regel eine größere Auswahl an hochwertigen Schriften, da sie im Typografie-Geschäft tätig sind.
• Schriftarten sind einfach zu verwenden/installieren.
• Es ist einfach, die Schriftarten während des Designprozesses zu ändern oder eine globale Änderung vorzunehmen.
• Da es sich um Dateien von Drittanbietern handelt, können sie leicht von Benutzern zwischengespeichert werden.
• Weniger HTTP-Anforderungen führen zu einer verbesserten Leistung

Es ist ziemlich einfach, die neuen Schriftarten zu Ihrer Website hinzuzufügen. Beispielsweise bietet Fonts.com drei verschiedene Veröffentlichungsoptionen mit Premium-Plan-Mitgliedschaften. Es gibt sowohl Javascript- (auch mit Typekit) als auch Nicht-Javascript-Optionen, die auf ein bereitgestelltes Stylesheet verlinken, sowie eine selbst gehostete Option. Je nachdem, was Sie wählen, sieht Ihr CSS anders aus.

Nutzungsüberlegungen

Bei gehosteten Schriftarten kann weniger mehr sein. Es ist wichtig, nicht zu viele zu verwenden, da es sonst zu Leistungsproblemen kommen kann. Mehrere Stärken derselben Schriftart werden als zusätzlicher Satz betrachtet, sodass Sie im Wesentlichen eine andere Schriftart laden. Es hat sich bewährt, nur das einzuschließen, was Sie benötigen.

Selbsthosting

Es ist ziemlich einfach, Webfonts selbst zu hosten. Alles, was Sie tun müssen, ist die Schriftartdatei auf Ihrem Webserver einzubinden, und sie wird automatisch heruntergeladen, wenn ein Benutzer Ihre Website besucht.

Einige Vorteile des Selbsthostens sind:

• Keine Javascript-Abhängigkeit für die Lieferung von Schriftarten, alles, was Sie brauchen, sind CSS-Referenzen.
• Schnelles Rendern von Schriftarten.
• Keine Abhängigkeit von der Betriebszeit des Font-Hosting-Anbieters.
• Bei kostenlosen und gekauften Schriftarten gäbe es keine Abonnementgebühren oder Beschränkungen für die Seitenaufrufe.

Nutzungsüberlegungen

Es ist wichtig sicherzustellen, dass Sie alle erforderlichen Formate haben. Wenn ein Format nicht enthalten ist, wird zur nächsten Fallback-Schriftart gewechselt. Es ist wichtig, sicherzustellen, dass Sie den richtigen Pfad zur Schriftart für die Quelle haben. Wie wir in einem vorherigen Beispiel gesehen haben, würde die Quelle ungefähr so ​​​​aussehen:

 [Code]

src: url("../fonts/OpenSans-Regular-webfont.eot");

[/Code] 

Wo man gute Webfonts findet

Es gibt so viele Webfonts zur Auswahl; Wir haben das große Glück, all diese Optionen zu haben. Die Suche nach der perfekten Schriftart ist einfacher als je zuvor.

Hier sind einige großartige Quellen für Webfonts:

• Typekit
• Google Webfonts
• Höfler und Co
• Fonts.com
• FontEichhörnchen

Erstellen Sie Ihren eigenen Webfont

Wenn Sie die perfekte Schriftart nicht finden können, können Sie zufällig immer Ihre eigene erstellen. Font Squirrel stellt Ihnen einen Web-Font-Generator zur Verfügung, der jede Schriftart in ein Kit von Web-Dateien zum Einbetten umwandelt. Denken Sie nur daran, dass Sie diese hosten müssen. Um mehr zu erfahren, werfen Sie einen Blick auf den Webfont-Generator Font Squirrel. Nur eine Warnung, wenn Sie Ihre eigene Schriftart erstellen, ist es wichtig, dass Sie die Rechte haben, diese Schriftart zu verwenden.

Webfonts sind eine großartige Möglichkeit, Ihrem nächsten Webprojekt die perfekte Schriftart hinzuzufügen. Mit einer großen Auswahl an Schriftarten und vielen großartigen Quellen sind Sie nicht mehr an die traditionellen websicheren Optionen gebunden. Webfonts sind einfach zu verwenden und machen Spaß beim Experimentieren. Sie sind eine großartige Möglichkeit, Ihren Website-Projekten Persönlichkeit zu verleihen.