10 Regeln zur Web-Typografie, die jeder Designer kennen sollte
Wenn jemand eine von Ihnen entworfene Website besucht, ist es wahrscheinlich, dass ihm die Farben, Bilder oder Geräusche egal sind. Sie sehen sich sofort den Text an.
Egal, wie viele Schnickschnack Sie in eine Website eingebaut haben, jeder verlässt sich auf Text, um zu erreichen, was immer er auf der Website besucht .
Alleine das sollte Typografie, die Kunst der Typisierung, zu einer Priorität für jeden Webdesigner machen.
In diesem Artikel werfen wir einen Blick auf 10 einfache Regeln, die Sie bei der Gestaltung Ihres nächsten Webprojekts berücksichtigen sollten.
1. Lesen Sie den Text selbst durch
Mit einem Design wie JonesingFor ein Designer ohne ein großes Verständnis für den Text hätte Mühe gehabt, die Typografie zusammenzustellen, die diese Website wirklich funktionieren lässt. Wenn Sie Ihre eigene Typografie angehen, müssen Sie sich wahrscheinlich keine Sorgen machen, den Text einer Website zu schreiben - aber Sie müssen ihn lesen!
Einige Webdesigner denken, dass das Kopieren und Einfügen einer Textdatei die Gesamtheit ihrer textlichen Pflichten darstellt. Das Lesen des Textes bietet jedoch zumindest eine Grundidee, wie der Text in eine Website integriert werden kann, wobei die Trennung zwischen dem Schreiben und dem Design einer Website vermieden wird.
Sie können Ihre Typografie um eine weitere Stufe erweitern, wenn Sie den Text lesen können, sobald er in Ihrem Design vorhanden ist. Beachten Sie besonders den Abstand der Buchstaben . Hast du ungewöhnlich große Räume, die merkwürdig aussehen? Eine kleine sorgfältige Typografie kann diese Probleme beseitigen. Sie können sich auch eine Vorstellung von Zeilen machen, die zu lang sind, um sie einfach zu lesen, umständliche Zeilenumbrüche und ähnliche Probleme.
2. Dump Lorem Ipsum so schnell wie möglich
Glaubst du, du hättest es entwerfen können? Jesus Rodriguez Velascos Website ohne den eigentlichen Text? Die Site ist stark abhängig von dem geschriebenen Wort - und auch sehr spezifischen Wörtern. Sogar der Body Text bekam besondere Aufmerksamkeit mit einem Drop Cap und einigen anderen Optimierungen, die mit Lorem Ipsum nicht möglich gewesen wären.
Wenn der Text Ihrer Website nicht wirklich Lorem ipsum ist, wird der Pseudo-Text keine Ähnlichkeit mit dem Original haben . Das bedeutet, dass jede Feinabstimmung, die Sie an dem Text vornehmen - oder dem Design, das ihn umgibt - warten muss, bis Sie das echte Ding bekommen. Wenn Sie so früh wie möglich im Text Text von Ihrem Kunden anfordern (und erhalten), können Sie Ihr Gesamtdesign und Ihre Typografie anpassen.
3. Zeigen Sie eine klare Hierarchie
Wenn Sie ankommen Rik Cat Industries Du weißt sofort, wo du anfangen solltest zu lesen. Obwohl oben links auf der Seite ein paar Links stehen, fällt Riks Begrüßung zuerst ins Auge. Es ist viel größer und verwendet Typografie, um eine klare Hierarchie zu erstellen .
Jeder Standort benötigt eine gut entwickelte Hierarchie: Indikatoren für den Beginn des Lesens und das weitere Vorgehen. Ihre Typografie kann diese Hierarchie - genau wie Riks - bereitstellen, solange Sie Ihre hierarchische Ordnung im Voraus kennen. Wenn Sie über Schriftgröße und Schriftarten nachdenken, können Sie einen Textabschnitt als Überschrift markieren, so dass eine andere Platzierung im Design nicht möglich ist.
Die Hierarchie Ihres Designs geht natürlich über die von Ihnen verwendete Typografie hinaus, aber da die Benutzer fast immer mit dem Text beginnen, ist es für Designer sinnvoll, dasselbe zu tun.
4. Achten Sie auf Makro- und Mikro-Typografie
Für ihre Titelseite verlassen sie sich ausschließlich auf Typografie Crowley Webb und Associates Die Website wurde mit zwei Faktoren konzipiert: Makro- und Mikro-Typografie .
Makro-Typografie ist die Gesamtstruktur Ihres Typs, wie er im Kontext Ihres Designs und seiner Ästhetik erscheint, wenn Sie Ihren Text als eigenständigen Block betrachten.
Bei der Mikro-Typografie geht es mehr um die Details der Abstände, um die Frage, ob Wörter einfach zu lesen sind. Mikro-Typografie ist eine absolute Notwendigkeit, wenn es darum geht, einen Textblock zusammenzustellen: Wenn er nicht lesbar ist, hat es keinen Sinn, weiterzumachen. Crowley Webb and Associates ging diese Frage sowohl durch sorgfältiges Schreiben als auch durch das Ausräumen jener Wörter an, die die Website hervorheben würde.
Aber die Makro-Typografie bietet Ihnen die Möglichkeit, Ihren Text mehr als gut zu verteilen: Es ist die Chance, ihn ansprechend und Teil Ihres gesamten Designs zu machen . Die Auswahl von Schriften und Farben auf dieser Website schafft ein realisierbares Ganzes. Das Ignorieren jeder Facette der Typografie ist schädlich.
5. Vorsicht bei Typfarben
Es wäre so einfach, Text im Hintergrund zu verlieren ArtofElan , besonders die helle rote auf dunkelrote Kombination, die vom Entwerfer verwendet wurde. Wenn ein Webdesigner mit einem Farbtyp arbeitet, ist Vorsicht geboten, es gibt keine Garantie, dass eine Rot-auf-Rot-Kombination oder sogar eine Gelb-auf-Rot-Kombination sichtbar ist . Immerhin hat jeder eine Website besucht, auf der der Text nur eine Schattierung von der Hintergrundfarbe entfernt zu sein schien und bei dem Versuch, ihn zu lesen, eine Augenbeanspruchung bekommen hat.
Die einfachste Lösung für diese Situation besteht darin, sicherzustellen, dass die Farbe Ihres Typs sich drastisch von der Ihres Hintergrunds unterscheidet . Schwarz und Weiß funktionieren so gut, weil sie so drastisch anders sind, wie du bekommen kannst, aber es gibt einige Farbkombinationen, die gut funktionieren: etwas in der Art eines dunklen Blaus auf einem hellen Rosa wird die Arbeit erledigen. Umgekehrter Text ist ziemlich schwierig ... während Sie mit hellpinkigem Text auf einem dunkelblauen Hintergrund arbeiten können, werden Sie eher eine Beschwerde darüber bekommen.
6. Machen Sie sich ernsthaft mit Ihrem CSS vertraut
Wenn Ihr CSS stabil ist, können Sie nahtlos zwischen den Seiten Ihrer Website wechseln, genau wie die verschiedenen Versionen von Hutchouse.com verlassen sich auf verschiedene Stylesheets, um beeindruckende Effekte zu erzielen. Auch wenn Sie nicht so weit gehen wie Hutchhouse, CSS kann helfen, Amateur-Typografie Probleme wie das Ändern von Schriften und Größen zwischen den Seiten zu beseitigen.
CSS kann eine einfache Konsistenz zwischen Ihrer Typografie auf der gesamten Website gewährleisten . Wenn Sie konsistent sind, wie Sie den Typ verwenden, kann jedoch das Brechen dieser Konsistenz auch nur eine kleine Menge dazu führen, dass alles, was Sie hervorheben möchten, wirklich herausragt, genauso wie das Einrichten und das anschließende Aufbrechen eines Rasters für ein effektives Design sorgen kann. In der Web-Typografie kann die Konsistenz Ihrer Schriften eine einfache Angelegenheit von CSS sein.
7. Denke den zentrierten Text ab
Die Wahl einer Alternative zu zentriertem Text kann ein Website-Design leicht lesbar machen DesignCanChange.org . Die Wahl zentrierten Textes, insbesondere auf einer solchen Seite, würde zu einer problematischen Seite führen: Die gezackten Ränder, die auf jeder Seite zentriert werden, machen es viel schwieriger zu lesen und es gibt viele Möglichkeiten für perfekt zentrierten Text, der den Rest des Textes verzerrt Ihre Designs auf verschiedenen Displays.
In einigen Kreisen ist der zentrierte Typ nur eine Stufe höher als die Verwendung von Comic Sans in einem Website-Design. Sie könnten es für eine Überschrift halten, aber im Allgemeinen, Ihren Text nach links auszurichten wird Ihre Leser viel bequemer machen, es sei denn, sie lesen von rechts nach links .
8. Deal mit intelligenten Anführungszeichen und anderen Symbolen
Luigi Ottani Die Website zeigt, wie sorgfältig Sie die Anführungszeichen und andere Symbole beachten: ein völliges Fehlen von Problemen, wenn die Website diese Symbole anzeigt. Viele Websites sind mit Symbolen übersät, die ein Browser nicht anzeigen kann. Es ist ein Vermächtnis der Tatsache, dass der meiste Text, mit dem ein Webdesigner arbeitet, wahrscheinlich in Microsoft Word oder einem anderen Textverarbeitungsprogramm geschrieben wurde, das alle möglichen kleinen Änderungen am Text vornimmt, ohne dass der Autor viel Aufmerksamkeit auf sich zieht.
Eine der schlimmsten Änderungen sind intelligente Anführungszeichen: Die geschweiften Anführungszeichen Word ersetzt automatisch gerade Anführungszeichen . Ein weiterer Problembereich tritt auf, wenn Sie mit Text arbeiten, der in einer anderen Sprache geschrieben ist: Akzente und Umlaten können genauso viel Ärger verursachen wie die Hilfsbereitschaft von Word. Wenn Sie einfach Text mit solchen Änderungen in Ihr Design kopieren und einfügen, müssen Sie wahrscheinlich später, zumindest für einige Webbrowser, zurückgehen.
Nehmen Sie sie früh im Entwurfsprozess auf, damit Sie sich darauf konzentrieren können, dass Ihr Text besser zu Ihrem Design passt . Wenn Sie möchten, dass diese ausgefallenen Symbole und intelligenten Zitate im endgültigen Design erscheinen, brechen Sie Ihre HTML-Entitäten aus.
9. Planen Sie, dass Ihr Text größer wird
Wenn Sie die Größe des Textes erhöhen Veerle Pieters ' Website, es ist nicht ganz so schön, als wenn Sie die Schriftgröße verwenden, die sie ausgewählt hat. Sie können jedoch immer noch alles lesen, Links finden usw., was für sehr wenige Websites gilt.
Das liegt daran, dass viele Designer sicherstellen, dass Text in 10-Punkt-Schrift oder sogar kleiner gestaltet wird. Die meisten Menschen sind komfortabel lesen solche Schriften, aber Baby Boomer machen einen großen Teil der Web-Browsing-Population und viele dieser alternden Web-Surfer werden ihre Browser eingestellt haben, um Typ so groß wie sie können . Ihr Text und Ihr Design müssen sich darauf einstellen können.
Es ist auch wichtig, die Tatsache zu berücksichtigen, dass die Größe des Browsers dramatisch variieren kann , wenn Sie nicht vorsichtig sind. Wenn die Größe um einen Punkt ansteigt, führt dies zu Problemen, und diese ältere Zielgruppe wird sich in Eile auf die nächste Website begeben. Für immer auf die Seite zu scrollen wird ein ähnliches Ergebnis haben.
10. Zeigen Sie eine Präferenz für Sans Serif
Wenn Sie auf die Ein List Apart's Website, so ziemlich jeder große Block Text ist in einer serifenlosen Schrift eingestellt, so dass es viel einfacher zu lesen ist. Überschriften und andere kleinere Textblöcke sind in serifierten Schriftarten angeordnet, wodurch eine Balance zwischen beiden entsteht.
Wenn es darum geht, Text auf einem Bildschirm auszulegen, sind Groteskschriften fast immer die beste Wahl, besonders wenn Sie eine Schriftart wie Verdana wählen, die für die Anzeige auf einem Computerbildschirm entwickelt wurde. Serifierte Schriftarten haben eine höhere Wahrscheinlichkeit, schlecht dargestellt zu werden, verschwommen oder sogar verpixelt zu werden.
Es ist natürlich nicht möglich, Serifen ganz zu vermeiden. Aber besonders bei großen Textblöcken kann die Verwendung einer Schriftart ohne Serifen eine zusätzliche Garantie bieten, dass Besucher den Text einer Website einfach lesen können. Wenn Sie Schriftarten für ein Projekt auswählen, sehen Sie sich zuerst die Optionen für die serifenlose Schrift an .
Ein letzter Kommentar
Die Typografie wird leicht übersehen, und selbst wenn ein Designer dies in Betracht zieht, ist es einfach, sie als zeitintensive Aktivität mit wenig Ertrag abzuschreiben. Wenn Sie jedoch nur ein paar Minuten mit dem Text verbringen, der das Herzstück Ihres Designs bilden wird, kann es von etwas, das jeder Webdesigner auf eine Seite schreiben kann, zu einem Element werden, das den Rest des Designs unterstützt.
Geschrieben exklusiv für WDD von Donnerstag Bram.
Befolgst du diese Regeln und andere? Bitte teilen Sie Ihre Ansichten unten ...