5 einfache Möglichkeiten zur Verbesserung der Web-Typografie

Typ ist eines der am häufigsten verwendeten Elemente des Webs. Denk darüber nach. Es sei denn, du bist YouTube oder Flickr, die Besucher deiner Seite kommen wahrscheinlich für deinen Text - nicht die originelle Verpackung, die ihn umgibt. Warum behandeln Webdesigner Text immer noch als sekundäres Element?

Gute Typografie bringt Ordnung auf die Seite und erhöht die Lesbarkeit . Es ermöglicht Menschen, Informationen schneller zu verarbeiten.

Eine besser lesbare Website bedeutet zufriedene Besucher. Glückliche Besucher kehren oft zurück, kaufen Produkte, hinterlassen Kommentare und teilen die Seite mit Freunden. Sehen Sie, warum es sich lohnt, darüber nachzudenken?

Ich könnte ewig darüber reden, wie weit Typografie im Web gekommen ist und wie weit es noch gehen muss. Ich habe häufig zwischen Web- und Print-Design geprellt. Wenn Sie von InDesign zu TextMate wechseln, sind die Einschränkungen des Webtyps kristallklar .

Es wurde jedoch viel darüber gesagt, was ein Web-Typ nicht kann . Das wird nicht eine andere Tirade sein. Konzentrieren wir uns stattdessen auf 5 einfache Korrekturen für die typografischen Schandflecken, die im Web reichlich vorhanden sind.

1. Verwenden Sie ein Stylesheet zurücksetzen

Dumm, aber wahr: Keine zwei Browser verwenden die gleichen Präsentationsstandards. Unterschiede in Padding, Rändern, Überschriften und Einrückungen sind grassierend. Wenn Sie möchten, dass Ihr Seitenlayout in allen Browsern konsistenter ist, lohnt es sich, mit einem CSS-Reset-Stylesheet zu beginnen.

Verwenden Sie ein Reset-Stylesheet für einen besseren Web-Typ.

Zwei empfehle ich:

Yahoo CSS Stylesheet zurücksetzen
Eric Meyers CSS Reset Stylesheet

2. Achten Sie auf Ihre Maßnahme

Maß bezieht sich auf die Länge einer einzelnen Textzeile. Eine längere Linie = ein längeres Maß. Studien haben gezeigt, dass für eine optimale Lesbarkeit laufende Textspalten wie Ihre Haupttextkopie zwischen 45 - 75 Zeichen (30 - 50 ems) einschließlich Leerzeichen enthalten sollten . Dies ist einer der Gründe, warum Fluiddesigns (solche, bei denen sich die Spalten ausdehnen und zusammenziehen, um der Browserbreite zu entsprechen) für die Augen schwieriger sind.

Zusätzlich sollte Ihr Leading mit der Länge Ihres Measures zunehmen . Leading ist die Menge an Leerraum zwischen den Textzeilen und wird über die CSS-Eigenschaft line-height gesteuert. Wenn Sie eine extra lange Messung verwenden müssen, stellen Sie sicher, dass sich Ihre Führung öffnet.

Wenn Sie eine kleine Spalte haben, z. B. eine Seitenleiste mit einem kurzen Measure, sollte Ihr Leading enger sein. Ich finde den Standardwert, den die meisten Browser zuweisen, ist ein wenig zu eng. Eine Zeilenhöhe von etwa 1,4em funktioniert gut für die meisten Body-Inhalte.

3. Neigen Sie in den Raum zwischen

Es geht nicht nur um deinen Text, sondern auch um den Raum, der ihn umgibt. Zu wenig Platz macht Text schwer lesbar, aber auch zu viel. Der Schlüssel ist, eine einfache Balance zu finden, die das Auge von einem Element zum nächsten führt.

Einer der häufigsten Fehler, die neue Designer machen, ist es, jeden Quadratzentimeter Platz zu füllen. Leerraum bezieht sich auf den leeren oder "negativen" Bereich um Ihren Inhalt und ist entscheidend. Werfen Sie einen Blick auf ein gut gestaltetes Magazin wie Dwell oder Good und Sie werden sehen, dass, obwohl es das Geld des Herausgebers kostet, jede Seite zu drucken, sie reichlich weißen Raum um den Text herum hinterlassen. Die Seite wird in Balance sein und dein Auge wird sich effektiv von Raum zu Raum bewegen.

Versuchen Sie, neben der Anpassung der Zeilenhöhe (wie in # 1 erwähnt) auch die Abstände und Ränder zu erhöhen . Wenn Sie nicht versuchen, einen verrückten visuellen Trick zu ziehen, sollte Ihr Text immer eine gute Menge Leerraum enthalten. Lass es nicht mit anderen Elementen kollidieren, besonders mit Bildern. Lassen Sie Ihre Inhaltsblöcke (Überschriften, Absätze, Seitenleisten usw.) atmen.

Mark Boulton schrieb einen sehr informativen Artikel über Weißer Raum für A List Apart, schau es dir an.

4. Go Font nicht verrückt

Eine gute Faustregel für jeden Designer ist: Verwenden Sie nicht mehr als zwei Schriftarten Gesichter in Ihrem Design. Zwei Schriftgesichter können sehr stilvoll aussehen. Eine Liste Apart verwendet Variationen von Georgia und Verdana, um ein elegantes und poliertes Aussehen zu schaffen. Wenn Sie Ihrer Oberfläche weiterhin Schriftschnitte hinzufügen, entsteht unnötige Verwirrung. Vermeiden Sie auch, zu viele Schriftgrößen, Farben oder Behandlungen auf einer Seite oder in einem Absatz zu verwenden, oder sie konkurrieren miteinander, anstatt wie beabsichtigt zu betonen.

Obwohl Schriftstapel und Technologien wie sIFR und Schrift.js Erlauben Sie Ihnen, fast jede gewünschte Schriftart als Standard anzugeben, widerstehen Sie der Versuchung, mit der Bodycopy auszukommen. Dekorative Schriften werden am besten in Schlagzeilen gehalten, weil sie die Lesbarkeit beeinträchtigen. Denken Sie darüber nach - wann haben Sie das letzte Mal einen Taschenbuchroman in Comic Sans gefunden?

Berücksichtigen Sie beim Erstellen von Font-Stacks die Größe Ihrer Paarungen. Einige Schriftarten, die ähnlich aussehen, werden in sehr unterschiedlichen Größen dargestellt. Verdana und Arial sind ein gutes Beispiel dafür. Typentester ist ein großartiges Tool zum Vergleichen von Core-Web-Fonts und zum Erstellen eines erfolgreichen Stacks. Ein anderes nützliches Werkzeug genannt Font Stack Builder zeigt Ihnen, wie viel Prozent der Benutzer die einzelnen Varianten sehen.

Unabhängig davon, welche Schriften Sie verwenden, stellen Sie sicher, dass sie nicht winzig klein sind. Ich weiß es ist hart ... winziger Text sieht cool aus. Aber denken Sie an die armen, blinzelnden Benutzer! Körpertext über 10 oder 12 Pixel halten. Wenn Sie auf Teeny Tiny bestehen, verwenden Sie zumindest die relative Größe für alle IE 6.0 Benutzer, die es sonst nicht größer machen könnten. Lesen Wilson Miner's Artikel auf Schriftgrößen für eine großartige Auseinandersetzung mit der Debatte.

5) Vernachlässige nicht die Details

Der Kunde hat den Inhalt bereitgestellt. Das Hinzufügen zur Website ist nur eine Frage des Kopierens und Einfügens, richtig? Falsch, falsch, falsch. Dies ist eine Falle, in die Webdesigner allzu oft fallen.

Selbst diejenigen von uns, die fleißig Tag-Tags hinzufügen, jeden Absatz formatieren und Aufzählungslisten sorgfältig organisieren, vergessen einige wichtige typografische Details. Viele (einschließlich mir) haben das formale Typografie-Training verpasst, also können Sie uns nicht die Schuld geben. Aber der Teufel steckt im Detail. Es ist Zeit, dass wir diese Grundlagen annehmen:

Verwenden Sie intelligente Zitate

Was ist der Unterschied zwischen intelligenten Anführungszeichen und dummen Anführungszeichen? Intelligente Zitate (auch bekannt als Buch oder lockig ) sind gekrümmt und haben sowohl einen öffnenden als auch einen schließenden Stil. Dumm ( gerade ) Zitate sind in der Regel gerade auf und ab. Ein Apostroph ist typografisch nur ein einfaches Zitat, so dass das gleiche Problem gilt. Ein dummes Zitat (auch Prime genannt ) sollte nur zwischen Messungen verwendet werden. Zum Beispiel verwendet 6'4 "doppelte und einzelne Hochkommata.

Leider setzen unsere Tastaturen standardmäßig auf Anführungszeichen. Microsoft Word und andere Texteditoren korrigieren sie einfach während des Schreibens für uns. Das Hinzufügen intelligenter Anführungszeichen zu HTML-Seiten erfordert mehr Arbeit vom Webentwickler, da Sie Markup verwenden müssen, um öffnende und schließende Anführungszeichen zu erstellen. Ich sehe das gleiche Problem mit Em- und En-Bindestrichen, Ellipsen-, Marken- und Copyright-Symbolen. Codierer nehmen den einfachen Ausweg, indem sie sie durch Bindestriche, mehrere Perioden, ein großes TM und das berüchtigte (C) ersetzen. Die Verwendung der richtigen Symbole macht visuell einen Unterschied. Mach es richtig und lass die Redakteure überall lächeln.

Wie man intelligente Zitate macht:

#8216; = öffnendes einzelnes Zitat
’ = schließendes einzelnes Zitat
“ = öffnendes Doppelzitat
” = schließendes Doppelzitat

Ich weiß - niemand möchte den ganzen Tag damit verbringen, Zitate zu jagen. Zum Glück, Werkzeuge wie Klugscheißerchen und Textismus kann einen Großteil der Arbeit für Sie erledigen, indem Sie automatisch Text formatieren, der intelligente Anführungszeichen und dergleichen enthält.

Lesen "Die Probleme mit EM und EN" von A List Apart für weitere Einzelheiten zum Thema und die UTF-8-Zeichencodierung für die gebräuchlichsten Sonderzeichen.

Ein Vorbehalt - viele CMS-Texteditoren (wie der, den diese Website verwendet) lassen Sie keine intelligenten Anführungszeichen ohne zusätzliche Plugins implementieren. Traurig aber wahr.

Hör auf, nach einer Periode zwei Leerzeichen zu setzen. Bitte! Es ist nicht notwendig und es ist eigentlich ziemlich nervig.

Verwenden Sie für Ihre Links border-bottom: 1px solid statt text-decoration: unterstreichen . Unterstreichungen können durch die Unterlängen-Zeichen (g, j, p, q, y) verlaufen, wodurch sie schwer lesbar sind, insbesondere wenn kleinere Schriftgrößen verwendet werden.

Und obwohl es nichts mit Typografie zu tun hat, hat eine schnelle Rechtschreibprüfung niemanden getötet . Selbst wenn alles, was Sie getan haben, Kopieren und Einfügen war, spiegelt sich ein Schreibfehler, der auf eine Live-Site durchschlägt, schlecht für alle Beteiligten.

Achte auf diese 5 Fixes und deine Website-Designs werden sich sicherlich verbessern. Denken Sie daran, dass dies nur ein Ausgangspunkt ist. Gute Typografie ist eine gelernte Fähigkeit, genau wie alles andere, und es erfordert Studium und Übung . Achten Sie immer auf Websites, die es richtig machen und notieren Sie, was sie tun. Brauchen Sie Inspiration? Auf den folgenden Seiten finden Sie Beispiele für großartige Web-Typografie und Post-Beispiele, die Sie als inspirierend empfinden.

Inspirierende Art:

Von Mindy Wagner exklusiv für WDD geschrieben.

Was denkst du über diese einfachen Möglichkeiten, deine Typografie zu verbessern? Implementieren Sie sie auf Ihren Websites? Wir würden gerne von Ihnen hören!

Typografie Benutzerfreundlichkeit Web-Design Schriftart Schreiben