Das Beste aus den begrenzten Möglichkeiten der Web-Typografie herausholen

Was haben wir also wirklich hier?

Was die Auswahl an Schriftarten angeht, sind die Möglichkeiten ziemlich karg. Aber Helvetica ist nicht auf fast jedem Computer der Welt, weil sie eine schlechte Schriftart ist. Sie ist eigentlich eine **tolle** Schriftart, wenn Sie mich fragen, es ist nur, dass die Leute es leid sind, sie ohne die Liebe, die sie verdient, verwendet zu sehen. Da man (im Allgemeinen) keine Schriftart in eine Webseite „einbetten“ kann, müssen Sie Schriftarten wählen, die garantiert auf allen Systemen der Benutzer vorhanden sind. Sie könnten „Avenir 85 HeavyCondensed“ wählen, wenn Sie möchten, aber sie wird für 99 % Ihrer Benutzer auf die Browser-Standardeinstellung zurückfallen. Auch wenn es nur ungefähr ≈10 absolut web-sichere Schriftarten gibt, bedeutet das nicht, dass Ihre Web-Typografie zum Scheitern verurteilt ist. Es gibt viel, was Sie tun können, um sicherzustellen, dass Sie das Beste aus Ihrer begrenzten Auswahl herausholen.

Am Ende dieses Artikels finden Sie eine Überschrift und einen Beispielabsatz für alle regulären web-sicheren Schriftarten. Dies wird wahrscheinlich nicht in RSS-Readern angezeigt, Entschuldigung! Sehen Sie den Beitrag auf der Website für die Live-Beispiele an.

Wie man mit „Mach die Schrift größer!“ umgeht

Ich bin sicher, Sie haben das schon einmal von einem Kunden oder sogar einem Familienmitglied gehört, das Ihnen helfen wollte. Was sie **wirklich** sagen wollen, ist „es muss leichter zu lesen sein“. Die Antwort darauf ist manchmal, die Schriftart größer zu machen, aber genauso oft ist es etwas anderes, das sie schwer lesbar macht. Hier sind einige Dinge, die Sie ausprobieren können, anstatt die Schriftart blindlings größer zu machen:

• Geben Sie Ihren Textbereichen viel Weißraum (Abstand) um sie herum. Text braucht Platz zum Atmen, um leicht lesbar zu sein, und Weißraum ist im Allgemeinen eine gute Sache im Design.
• Machen Sie den Text **kleiner**. Es funktioniert vielleicht nicht, aber Sie würden überrascht sein, wie oft es doch funktioniert. Wie ich sagte, Text braucht Platz zum Atmen, und ihn kleiner zu machen, könnte etwas Platz schaffen und ihn tatsächlich leichter lesbar machen.
• Erhöhen Sie den Zeilenabstand. Wiederum zum Thema Atmen, zusätzlicher Platz zwischen den Zeilen kann genau das sein, was der Arzt verordnet hat.

Kerning: Es ist möglich, aber nicht schön

Wenn Sie auf Ihrem Website einen auffälligen Kerning-Fehler bei einem bestimmten Wort entdecken, ist es möglich, ihn zu beheben, aber es ist nicht die semantisch gesündeste Vorgehensweise. Was Sie tun müssen, ist, den Buchstaben vor dem Kerning-Problem zu isolieren und ihm einen positiven oder negativen Buchstabenabstand zu geben, um es zu beheben. Zum Beispiel:

<span class="kern">W</span>ashington

Dann stylen Sie die Kerning-Klasse in Ihrem CSS

.kern { letter-spacing: -0.1em; }

Beachten Sie, dass ein em-Wert verwendet wird, damit er sich mit der Textgröße ausdehnen und zusammenziehen kann, wenn der Benutzer die Größe ändert, im Gegensatz zu einem statischen Pixelabstand. Dieser Trick stammt aus diesem Beispiel.

Steuerung von Witwen und Waisen

Da die Textgröße auf Webseiten nie absolut ist, ist die Steuerung Ihrer Witwen und Waisen nicht einfach (oder in den meisten Fällen überhaupt möglich). Das Beste, was Sie tun können, ist, manuell <br />-Tags an Stellen einzufügen, an denen Sie anstößige Waisen sehen. Führen Sie danach einige Tests durch, indem Sie Ihren Text nach oben und unten anpassen, und stellen Sie sicher, dass Sie die Dinge nicht verschlimmern, indem Sie einen seltsamen Textfluss erzeugen. Ich finde, dies kann eine effektive Lösung für Dinge wie Überschriften sein, mehr als für Absätze.

Da es keine Möglichkeit gibt, Text zwischen vertikalen Spalten fließen zu lassen, sind Witwen weniger ein Problem. Persönlich denke ich, dass Textfluss eine tolle Ergänzung zu CSS3 wäre. Wenn das also jemals passiert, können wir uns dann darum kümmern =)

Machen Sie einige Tests

Anstatt Ihre eigenen Tests nach dem Motto „Änderung vornehmen, speichern, neu laden“ durchzuführen, gibt es einige Tools, die Ihnen helfen, mit Web-Typografie zu experimentieren und Ihre Entscheidungen auf diese Weise zu treffen.

Gibt es NICHTS, was wir tun können?

Es gibt Optionen. sIFR ist eine Webtechnologie, die Flash nutzt, um Text Ihrer Wahl im Wesentlichen durch eine Schriftart Ihrer Wahl zu ersetzen. Die Ergebnisse sehen gut aus, sind gut abwärtskompatibel und bleiben suchmaschinenfreundlich. Es gibt jedoch ein paar Nachteile. Der Text wird nicht mehr auswählbar, was ihn für ganze Absätze ungeeignet macht, und Sie können keine Rollover-Stile anwenden, sodass es für Benutzer nicht immer offensichtlich ist, wenn Sie den Text in einen Link umwandeln.

Etwas aufwendiger ist CSS-Bildersetzung, mit der Sie Text durch Grafiken ersetzen können, während er suchmaschinenfreundlich bleibt. Mit etwas mehr Aufwand könnten Sie Rollover-Stile anwenden, leidet aber ansonsten unter den gleichen Schwächen wie sIFR.

Wenn wir alle auf CSS3 warten können, besteht eine gute Chance, dass echtes Font-Embedding ein Teil davon sein wird. Sicher, das wird Jahre und Jahre dauern, aber Fortschritt ist Fortschritt. Die großen Debatten darum drehen sich hauptsächlich um Lizenzbeschränkungen. Da Schriftarten nicht immer kostenlos sind (vor allem die guten nicht), würde das Einbetten von Schriftarten, die jeder sehen kann, potenziell Einschränkungen verletzen, die von den Schriftkünstlern und -händlern in die Schriftarten eingebaut wurden. Persönlich halte ich das für absurd, natürlich sollten wir das dürfen. Nur weil ich Bauhaus Neue nicht persönlich besitze, heißt das, dass ich es in einer gedruckten Zeitschrift nicht sehen darf? Natürlich nicht. Solange es Technologie gibt, um die Schriftdateien selbst richtig zu schützen, sollte dies kein Problem sein.

Hier sind die Beispiele

Helvetica
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Georgia
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Trebuchet MS
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Verdana
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Comic Sans MS
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Times
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Courier New
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Lucida Grande
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Impact
Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll. Dies ist ein Textabsatz, der das grundlegende Aussehen dieser speziellen Schriftart zeigen soll.

Ebenfalls praktisch sicher sind Arial und Arial Black. Arial ist sehr, sehr ähnlich wie Helvetica und Arial Black ist extrem dick, sodass sie in Absatzform noch grausamer wäre als Impact.