6 Möglichkeiten zur Verbesserung Ihrer Web-Typografie

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Typografie im Internet ist alles andere als einfach und für viele ein beunruhigendes Rätsel. Heute werden wir sechs Möglichkeiten untersuchen, wie Webdesigner und -entwickler die Typografie der von ihnen erstellten Websites verbessern können.

Einführung

Typografie ist die Kunst, Buchstaben, Wörter, Absätze und deren Interaktion miteinander zu gestalten. Viele Designer und Entwickler setzen Typografie oft mit der Auswahl einer Schriftart gleich, während andere einfach vergessen, dass 95% des Webdesigns Typografie ist und diese eher vergessen. Wenn Typografie wirklich 95% des Webdesigns ausmacht, sollte sie für jeden Designer und Entwickler im Vordergrund stehen. Hier sind sechs Möglichkeiten, um Ihre Web-Typografie zu verbessern.

1. Verstehen Sie die Grundlagen der Typografie

Die Grundlagen der Typografie sind für alle Designer wichtig, unabhängig davon, ob sie für das Web entwerfen oder nicht.

Typografische Definitionen

Im Folgenden finden Sie einige grundlegende typografische Definitionen, die jeder Designer / Entwickler beim Umgang mit Typografie verstehen sollte. Diese Liste ist keineswegs vollständig. Ausführlichere Glossare finden Sie in der Liste der empfohlenen Lektüre am Ende dieses Artikels.

Aufsteiger: Jeder Teil eines Kleinbuchstabens, der über die Mittellinie steigt.
Grundlinie: Die Linie, auf der der Text ruht.
Kappenhöhe: Der obere Rand einer bestimmten Linie ohne Führung.
Absteiger: Jeder Teil eines Kleinbuchstabens, der unter die Grundlinie fällt.
Kerning: Die Breite des Abstands zwischen zwei angegebenen Zeichen, um das optimale Erscheinungsbild zu erzielen. Im Allgemeinen wird das Kerning automatisch von der angegebenen Anwendung ausgeführt. Es ist jedoch erforderlich zu verstehen, dass Photoshop (oder eine andere Bildbearbeitungssoftware) nicht unbedingt das gleiche Kerning wie ein Webbrowser bereitstellt.
Führend: Die Höhe des Abstands zwischen zwei beliebigen Zeilen in einem Abschnitt. Die optimale Menge an Leading beträgt im Allgemeinen die Hälfte der Schriftgröße. Wenn Sie beispielsweise eine Schriftgröße von 12 Pixel verwenden, sollten 6 Pixel führend sein.
Buchstabenabstand: Die Standardbreite des Abstands zwischen einem bestimmten Zeichensatz. Dies wird manchmal auch als "Tracking" bezeichnet.
Ligaturen: Spezielle Glyphen, die zwei separate Zeichen zu einer Glyphe kombinieren. Ligaturen werden häufig automatisch in Designprogrammen wie Photoshop oder InDesign erstellt, in Webbrowsern jedoch im Allgemeinen nicht als einzelne Glyphen gerendert. Wenn die Verwendung von Ligaturen im Web gewünscht wird, verwenden Sie HTML- oder Unicode-Zeichenentitäten, um sie manuell zu erstellen.
Linienhöhe: Die Höhe einer Linie einschließlich aller hinzugefügten Zeilen. Die Linienhöhe ist die effektivste Methode zur Steuerung des vertikalen Rhythmus. Wenn Sie beispielsweise eine Schriftgröße von 12 Pixel für Standardtext verwenden, sollten ungefähr 6 Pixel Zeilenabstand vorhanden sein, was einer Zeilenhöhe von 18 Pixel entspricht.
Maß: Die Breite einer bestimmten Zeile oder Textspalte (im Allgemeinen in Zeichen). Meiner Erfahrung nach beträgt das optimale Maß für das Lesen im Allgemeinen 60 Zeichen. Dies variiert jedoch von Schriftart zu Schriftart, basierend auf dem Buchstabenabstand und dem Wortabstand.
Rendern: Der Prozess der Interpretation des Typs durch einen Browser oder eine andere Anwendung. Jeder Browser, jede Anwendung und jedes Betriebssystem rendert den Typ anders.
Gewicht: Die Kühnheit oder Leichtigkeit einer bestimmten Schriftart. Online mit gerenderter Schrift ist es am besten, sich an zwei Schriftstärken zu halten: normal und fett. Mit bildbasierter Typografie ist die Verwendung anderer Gewichte wie Semibold, Light und Black viel einfacher.
Wortabstand: Die Breite eines Leerzeichens zwischen zwei gegebenen Wörtern.
X-Höhe: Die Höhe des Textes zwischen der Grundlinie und der Mittellinie. Dies entspricht der Höhe eines typischen Kleinbuchstabens (ursprünglich das "x" -Glyphen).

Typografische Skala

Um eine effektive typografische Skala zu erstellen, ist die beste Methode, die ich gefunden habe, die Maßeinheit "em" zu verwenden, da sie die Größe relativ zur Basis eines bestimmten Dokuments festlegt. Im folgenden Beispiel beträgt die Basisschriftgröße 12 Pixel, wodurch die Standardschriftgröße für Absätze auf 15 Pixel festgelegt wird.

1	body {
2	font-size: 12px;
3	}
4	h1 {
5	font-size: 5.0em;
6	}
7	h2 {
8	font-size: 4.0em;
9	}
10	h3 {
11	font-size: 3.0em;
12	}
13	h4 {
14	font-size: 2.0em;
15	}
16	blockquote {
17	font-size: 1.5em;
18	}
19	p {
20	font-size: 1.25em;
21	}
22	input {
23	font-size: 1.0em;
24	}
25	small {
26	font-size: 0.75em;
27	}

Vertikaler Rhythmus

Der vertikale Rhythmus des Linienabstands, der den optimalen Abstand für das Auge bietet. Um diesen Rhythmus zu erzeugen, folgen Sie am besten einem Grundlinienraster. Nach meiner Erfahrung ist der vertikale Online-Rhythmus am besten auf oder nahe 1,5 eingestellt. NETTUTS+ verwendet beispielsweise einen vertikalen Rhythmus von 1,6 em, was ungefähr einer Zeilenhöhe von 17,6 Pixel entspricht (basierend auf einer Schriftgröße von 11 Pixel).

Im Folgenden finden Sie einen vertikalen Standardrhythmus, den ich auf vielen meiner Websites verwende, die auf dem 960-Rastersystem basieren. Um einen vertikalen Rhythmus angemessen zu erreichen, sollte jeder Absatz einen Rand oder eine Auffüllung haben, die der Standardhöhe der Grundliniengitterlinie entspricht.

body {
 font-size: 12px;
 line-height: 15px;
}
p {
 margin-bottom: 15px;
}

2. Entwerfen Sie im Browser

Wie die meisten Designer und Entwickler wissen, werden Websites in verschiedenen Browsern unterschiedlich gerendert. Dies gilt insbesondere für das Rendern von Schriftarten. Im Folgenden finden Sie einen Vergleich, wie fünf gängige Browser denselben Text unterschiedlich rendern:

Bildquelle: FontTech.Info

Wenn Sie ein typografisches Layout oder eine Website erstellen, die reich an Inhalten ist (z. B. eine Zeitschrift oder eine Blog-Website), ist es ein großer Segen, die Unterschiede zwischen der Typografie in den verschiedenen Browsern und Betriebssystemen zu erkennen. Das Entwerfen im Browser ist nichts Neues (selbst 1997, als ich meine erste Website erstellte, habe ich sie vollständig im Browser entworfen). Während nicht jede Site ein Kandidat für das Entwerfen in einem Browser ist, eignen sich diejenigen, die sich am meisten mit Typografie befassen, perfekt für das Entwerfen in einem Browser.

Bildquelle: Für ein schönes Web

Andy Clarke, populärer Designer / Autor, sprach kürzlich bei An Event Apart Boston mit einer Präsentation namens Walls Come Tumbling Down, in der er sich aus vielen Gründen für das Entwerfen im Browser aussprach. Das obige Bild aus seiner Präsentation zeigt die Verwendung eines standardisierten Rasters sowohl für Spalten als auch für den vertikalen Rhythmus.

Der beste Weg, um in einem Browser zu entwerfen, ist die Verwendung eines solchen Rasters. In das Quellpaket habe ich zwei verschiedene Säulengitter mit jeweils drei Varianten des vertikalen Rhythmus aufgenommen. Das folgende CSS zeigt die einfachste Methode zum Bereitstellen eines dieser Testraster, indem das Hintergrundbild oder die Hintergrundbilder im Hauptteil der HTML-Seite durch eine Klasse ersetzt werden, die für das von Ihnen ausgewählte Raster spezifisch ist. Fügen Sie einfach die angegebene Klasse zum Body-Tag oder zum DIV-Tag des Inhaltscontainers hinzu, und schon können Sie in Ihrem Browser entwerfen.

.grid960base15 {
 width: 960px;
 line-height: 15px;
 background: url(images/grid960base15.png) repeat-y;
}
.grid960base18 {
 width: 960px;
 line-height: 18px;
 background: url(images/grid960base18.png) repeat-y;
}
.grid960base30 {
 width: 960px;
 line-height: 30px;
 background: url(images/grid960base30.png) repeat-y;
}
.grid600base12 {
 width: 600px;
 line-height: 12px;
 background: url(images/grid600base12.png) repeat-y;
}
.grid600base16 {
 width: 600px;
 line-height: 16px;
 background: url(images/grid600base16.png) repeat-y;
}
.grid600base18 {
 width: 600px;
 line-height: 18px;
 background: url(images/grid600base18.png) repeat-y;
}

Es sollte beachtet werden, dass für einen guten vertikalen Rhythmus eine genaue Kontrolle über die Linienhöhe erforderlich ist, um den richtigen vertikalen Rhythmus zu erreichen. Darüber hinaus können Sie dieses Lesezeichen zum Erstellen von Rastern verwenden, um jede Website mit einem benutzerdefinierten Raster zu überlagern. Ich finde das nützlich, wenn Sie das Hintergrundbild nicht durch eines der Gitter ersetzen können.

3. Verwenden Sie eine CSS-Bildersetzungstechnik

Das Ersetzen von Text durch Bilder ist seit den 90er Jahren eine Standardpraxis im Webdesign. Mit der Einführung von CSS in den wichtigsten Browsern entstanden Bildersetzungstechniken, die nicht nur darin bestehen, ein Bild zu erstellen und es an die Stelle des Textes zu setzen. Die erste weit verbreitete davon war Fahrner Image Replacement (FIR), aber als die Leute mit CSS Image Replacement spielten, stellten sie fest, dass diese Technik nicht zugänglich war. Die Phark Image Replacement-Technik wurde ursprünglich als zugänglicher Ersatz für die klassische FIR-Technik konzipiert. Phark Image Replacement wurde erstmals 2003 von Mike Rundle von 9rules vorgeschlagen und basiert auf der Verwendung der CSS-Eigenschaften für Texteinzug und Hintergrundbild, um den Text vor dem Benutzer zu verbergen, bleibt jedoch für Bildschirmleser und Suchmaschinen zugänglich.

Um Phark Image Replacement zu verwenden, legen Sie das Containerelement (in diesem Fall die DIVs) auf eine definierte Höhe und Breite fest. Stellen Sie dann ein Hintergrundbild ein. Setzen Sie abschließend die Eigenschaft text-indent auf -9999px. Die Eigenschaft zum Einrücken von Text verschiebt den Anfang des Texts im Wesentlichen um 9999 Pixel nach links. Dies vergrößert jedoch nicht den scrollbaren Bereich, wodurch der Text effektiv verschwindet.

Während Phark derzeit die am häufigsten verwendete CSS-Bildersatztechnik ist, gibt es viele andere mit unterschiedlichen Vor- und Nachteilen. Zum Beispiel zeigt Phark dem Benutzer nichts an, wenn Bilder deaktiviert sind, aber CSS aktiviert ist, ein relativ kleiner Nachteil. Darüber hinaus ist CSS Image Replacement nicht wirklich für großformatige Typografie (d. H. Artikel) gedacht, sondern am besten für Schaltflächen, Überschriften und andere kleine Textmengen. Um mehr über andere CSS-basierte Bildersatztechniken zu erfahren, hat CSS-Tricks eine gute Zusammenfassung aller verfügbaren CSS-basierten Bildersatztechniken namens Nine Techniques for CSS Image Replacement geschrieben.

4. Verwenden Sie eine "erweiterte" Bildersatztechnik

Standard Image Replacement ist ideal für sehr dekorative Situationen und kleinere Textmengen. Was tun Sie, wenn Sie Text für einen ganzen Artikel ersetzen möchten? Wie wäre es, Überschriften zu ersetzen und den Text auswählbar zu halten? Die Antwort hier ist eine der fortschrittlichen Bildersatztechniken. Für alle intensiven Zwecke stehen derzeit drei verschiedene erweiterte Bildersetzungen zur Verfügung (wenn Sie andere kennen, lassen Sie diese bitte in den Kommentaren): Flash-basiert, Javascript-basiert und PHP-basiert.

Skalierbarer Inman-Blitzersatz (sIFR)

Die erste der fortschrittlichen Bildersatztechniken, die auf den Markt kamen, war Scalable Inman Flash Replacement (sIFR), ursprünglich von Shaun Inman als IFR entworfen und anschließend von Mike Davidson und Mark Wubben, die das Projekt derzeit pflegen, zur sIFR-Bezeichnung weiterentwickelt.

PROS:

Die schärfste Schriftwiedergabe aufgrund von Anti-Aliasing

Behält den ursprünglichen semantischen und zugänglichen Text bei

Verschlechtert sich anmutig in den Originaltext

Text ist wählbar (teilweise)

Unauffälliges Skript

NACHTEILE:

Nicht für große Textkörper geeignet

Die Einrichtung kann kompliziert und schwierig sein

Benötigt Flash und Javascript

Ladezeiten können träge sein

Das Drucken ist problematisch

Wenn Sie lernen möchten, wie Sie sIFR implementieren und Beispiele anzeigen, bietet NETTUTS + ein großartiges Tutorial zur Verwendung von sIFR oder besuchen Sie die offizielle Site für sIFR2 oder die offizielle Site für sIFR3, die neueste Version.

cufón

Die jüngste populäre fortgeschrittene Bildersatztechnik heißt cufón, angeblich ein Portmanteau-Wort für "benutzerdefiniert" und "Schriftart". Es soll "eine würdige Alternative zu sIFR werden, die trotz ihrer Vorzüge immer noch schmerzhaft schwierig einzurichten und zu verwenden ist", so das Cufón-Wiki.

PROS:

Schnellste fortschrittliche Bildersatztechnik

Behält den ursprünglichen semantischen Textinhalt bei

Verschlechtert sich anmutig in den Originaltext

Benötigt keine Plugins (wie Flash)

Unauffälliges Skript

Einfache Einstellung

NACHTEILE:

Text kann nicht kopiert und eingefügt werden (Text kann nicht ausgewählt werden)

Die Lizenzierung von Schriftarten ist in Bezug auf Cufón verschwommen

Textbegründung und Effekte funktionieren nicht

: Schwebezustand hat viele Macken

Benötigt Javascript

Wenn Sie lernen möchten, wie man Beispiele für Cufón implementiert und sieht, bietet NETTUTS + einen großartigen Screencast und ein Tutorial zur Verwendung von Cufón oder besuchen Sie die offizielle Website von Cufón.

Facelift Image Replacement (FLIR)

Die Facelift Image Replacement (FLIR) -Technik unterscheidet sich von den beiden zuvor genannten darin, dass serverseitiges Scripting mit PHP und der GD Image Library verwendet wird. Es wurde von Cory Mawhorter entwickelt, um eine automatische serverseitige Technik zum Ersetzen von Schriftarten bereitzustellen.

PROS:

Behält den ursprünglichen semantischen Textinhalt bei

Benötigt keine Plugins (wie Flash)

Probleme mit der Schriftlizenzierung sind, wenn überhaupt, unwahrscheinlich

NACHTEILE:

Text kann nicht kopiert und eingefügt werden (Text kann nicht ausgewählt werden)

Das Rendern von Schriftarten ist im Vergleich zu anderen Alternativen unterdurchschnittlich

Benötigt einen Webserver mit PHP und GD

Benötigt mehr Serverressourcen

Kann schwierig einzurichten sein

Wenn Sie lernen möchten, wie Sie FLIR implementieren und Beispiele anzeigen, bietet Divito Design ein gutes Tutorial zur Verwendung von FLIR oder besuchen Sie die offizielle Website von FLIR

5. Verwenden Sie die @font-face-Regel von CSS3 für das Einbetten von Web-Schriftarten

CSS3 ist relativ neu in der Landschaft des Webs und hat noch keine breite Anwendung gefunden. Eine der aufregendsten Funktionen von CSS3 ist die @font-face-Regel. Derzeit gibt es zwei große Hürden für die Verwendung von @font-face. Erstens unterstützen nicht viele Schriftgießereien und Schriften das Einbetten von @font-face. Einige Lizenzen sind vage und befassen sich nicht mit dem Einbetten von Webinhalten, während andere das Einbetten von @font-face ausdrücklich untersagen. Für eine Liste von Schriftarten, die das Einbetten von @ font-face unterstützen, können Sie webfonts.info mit einer großartigen Liste versehen. Die zweite Hürde besteht darin, dass nicht alle Browser die @font-face-Regel unterstützen, wie in der folgenden Browser-Supporttabelle gezeigt.

Bildquelle: Wikipedia

Die @font-face-Regel ermöglicht jetzt das Einbetten von Schriftarten in IE6, IE7, IE8, FireFox 3.5+ (PC & Mac) und Safari (PC & Mac). Unterstützung in Opera 10 und Chrome ist in Kürze verfügbar. Dies bedeutet, dass in irgendeiner Form oder Weise Webfonts für geschätzte 90% + Benutzer verfügbar sein werden.

Erster Schritt: Machen Sie die @font-face-Deklaration(en)

Im Idealfall ist diese erste @font-face-Deklaration Teil einer CSS-Datei, die über bedingte Kommentare nur an den IE mit der EOT-Version der Schriftart gesendet wird. Die zweite @font-face-Deklaration sollte eine OTF- oder TTF-Schriftdatei sein. Aufgrund von Browsersicherheitsbeschränkungen sollte die Quell-URL für Deklarationen relativ sein (obwohl einige Browser absolute URLs unterstützen).

@font-face {
 font-family: "Anivers";
 src: url("Anivers.eot");
}
@font-face {
 font-family: "Anivers";
 src: url("Anivers.otf");
}

Schritt zwei: Verwenden Sie die Schriftart

Ja. Das ist alles dazu.

1	body {
2	font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
3	}

Sobald Deklarationen abgegeben wurden, kann die deklarierte Schriftfamilie wie jede andere Schriftart verwendet werden, die auf dem System eines Benutzers verfügbar wäre. Dies ist ein aufregendes Neuland für Webdesigner und -entwickler, das in den kommenden Monaten unbedingt verfolgt werden muss.

Kommende @font-face-Bereitstellungsprojekte wie Typekit und Typotheque möchten eine wichtige Hilfe bei der Aushandlung von Web-Einbettungslizenzen mit den großen Schriftgießereien bieten. Bei all den Fragen zum Mieten von Schriftarten für die Web-Einbettung kann es sich außerdem als schwierig erweisen, einige (oder alle) der Schriftarten, die Sie in einem Webdesign verwenden, für die Verwendung in Ihrer Bildbearbeitungssoftware zu erhalten. Hierfür gibt es zwei Lösungen:1) Entwerfen im Browser wie oben empfohlen oder 2) Verwenden ähnlicher Schriftarten zum Entwerfen der statischen Seitendesigns.

6. Inspiration finden und nie aufhören zu lernen

Die Typografie im Internet steckt im Vergleich zur Typografie in Print, Rundfunk und Film noch in den Kinderschuhen. Sehen Sie sich andere Medien an, um erfinderische Typografie zu verwenden. Wenn Sie das nächste Mal im Kino sind, sehen Sie sich alle Filmplakate an und achten Sie genau auf die Typografie, die in Voransichten und Trailern verwendet wird. Schauen Sie sich die Typografie sowohl im Inneren als auch auf dem Cover der Bücher in Ihrem örtlichen Buchladen an. Untersuchen Sie Ihre DVD-Sammlung oder Ihre Lieblingsmagazine auf Inspiration.

Folgen Sie online führenden Typografie-Experten wie For a Beautiful Web, ich liebe Typografie, TypeInspire oder webfonts.info. Im Folgenden finden Sie eine Liste empfohlener Leselinks für weitere Informationen zur Web-Typografie zusätzlich zu NETTUTS+ und den oben genannten.

Hoffentlich helfen Ihnen diese sechs Tipps, wenn Sie das nächste Mal an Typografie für das Web arbeiten. Es ist eine aufregende Zeit, ein Typophiler zu sein, der im Web arbeitet.

Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS RSS-Feed, um weitere tägliche Tutorials und Artikel zur Webentwicklung zu erhalten.