Share
Bei der Verwendung von Typografie im Internet müssen Sie viele Dinge beachten, um eine Seite zu erstellen, die einen klaren Zugriff auf den Inhalt bietet und ihn lesbar darstellt. Normalerweise kann dies in zwei Bereiche unterteilt werden: Lesbarkeit und Lesbarkeit. Lesbarkeit bezieht sich auf die Art und Weise, wie Wörter und Blöcke vom Typ auf einer Seite angeordnet werden. Lesbarkeit bezieht sich darauf, wie eine Schrift gestaltet ist und wie gut ein einzelnes Zeichen von einem anderen unterschieden werden kann. In diesem Artikel werde ich ein wenig über beide sprechen und einige spezifische Techniken vorschlagen, um Ihre Typografie zu verbessern.
Sprechen wir zuerst über die Lesbarkeit. Es ist wichtig zu verstehen, was eine Schrift besser lesbar macht als eine andere. Bei der Auswahl einer Schriftart hängt alles davon ab, wie Sie sie verwenden möchten. Stellen Sie sich einige grundlegende Fragen: In welcher Größe wird der Text verwendet? Erscheint es als Text oder Schlagzeile? Muss es ein Arbeitstier sein oder wird es eher als Augenweide verwendet? Wird es mit einer anderen Schriftart gekoppelt? Ergänzt das Erscheinungsbild der Schrift das Thema?
Es ist auch wichtig zu wissen, dass verschiedene Schriftarten für unterschiedliche Zwecke entworfen wurden. Das Original Garamond wurde beispielsweise so konzipiert, dass es in einem großen Textkörper gut lesbar ist. Einige sagen auch, es sei die umweltfreundlichste Schrift ihrer Zeit und sparte den Tintenverbrauch. Bell Centennial ist eine von AT & T in den 70er Jahren in Auftrag gegebene Schrift, die in Telefonverzeichnissen verwendet werden soll. Diese Verzeichnisse wurden aus billigem Papier hergestellt. Aus diesem Grund wurde Bell Centennial so konzipiert, dass die Farbverteilung während des Druckvorgangs möglich ist. Auf der digitalen Seite gibt es Schriftarten, die speziell für den Bildschirm entwickelt wurden, wie beispielsweise Georgia und Verdana. Azura ist eine relativ neue Schriftart, die speziell zum Lesen von Text auf dem Bildschirm entwickelt wurde.
Kurz gesagt, es hilft, den beabsichtigten Kontext der verwendeten Schrift zu kennen. Einige Schriftarten sind in der Tat recht flexibel, enthalten mehrere Strichstärken und können auf verschiedene Weise verwendet werden. Andere sind eher eingeschränkt und so konzipiert, dass sie sehr spezifisch verwendet werden können.
Dies führt uns zu den ersten Dingen, an die wir uns bezüglich der Lesbarkeit einer Schrift erinnern sollten:
Einige Schriftarten wurden so konzipiert, dass sie großflächig verwendet werden können, beispielsweise in Überschriften. Normalerweise sind diese Schriften bei kleineren Größen weniger lesbar und sollten nicht für Textkopien verwendet werden. Diese nennt man Gesichter anzeigen. Die unten abgebildete Schrift, Knockout, ist eine meiner Lieblingsanzeigen.
Andere Schriftarten sind speziell für die Verwendung in großen Bereichen kleinerer Körpertexte konzipiert. Diese werden als Text- oder Körpergesichter bezeichnet.
Dazwischen gibt es viele Variationen. Normalerweise finde ich ein Gesicht, von dem ich denke, dass es für die Aufgabe geeignet ist, wobei ich daran denke, dass ich beabsichtige, es mit einer anderen Schriftart zu koppeln und es auszuprobieren. Ich habe bereits alle Schriftarten herausgefiltert, von denen ich denke, dass sie für diese Aufgabe nicht geeignet sind. Wenn Sie jedoch gerade erst anfangen, kann dies einige Versuche und Irrtümer erfordern.
Was ist also besser lesbar: Serifen oder Serifenlose Schriftarten? Die Geschichte sagt uns, dass Serifengesichter immer als lesbarer angesehen wurden, da sie fast immer für große Textpassagen verwendet wurden. Die serifenförmigen Gesichter lassen das Auge leichter über den Text fließen, verbessern die Lesegeschwindigkeit und verringern die Ermüdung der Augen.
Das heißt, es gibt viele lesbare Serifenlose Gesichter. Online scheint es, dass serifenlose Gesichter mehr als je zuvor für Textkörper verwendet werden. Ich denke, dafür gibt es mehrere Gründe. Die einfacheren Buchstabenformen scheinen mit aktuellen Designtrends besser zu funktionieren und wirken moderner. Normalerweise lesen wir keine großen Textpassagen auf einer Website. Daher eignen sich serifenlose Schriftarten nur für kürzere Kopien.
Es sei darauf hingewiesen, dass es zu diesem Thema eine Debatte gibt - ein Gesichtspunkt ist, dass sich Serifengesichter auf dem Bildschirm nicht wesentlich verringern, was die Lesbarkeit erheblich verringert. Andere glauben, dass es keinen Unterschied gibt. Die Position, die ich immer einnehme, ist, fühlt es sich richtig an? Würde ich einen Abschnitt lesen, der die Art und Weise enthält, wie ich sie entworfen habe??
Ein weiteres Merkmal ist die x-Höhe. Dies gilt in der Regel für die Verwendung von Textgrößen für Texttyp. Die x-Höhe ist die Messung der Höhe des Kleinbuchstabens "x" in einer bestimmten Schrift. Es berücksichtigt nicht die Höhe der Aufstiegs- oder Abseilgeräte. Sie sind vielleicht überrascht zu wissen, wie groß die x-Höhe von Gesicht zu Gesicht ist. Wenn sie klein verwendet werden, sind Schriftarten mit größeren x-Höhen normalerweise besser lesbar.
Lesbarkeit bedeutet, Wörter und Wortgruppen so anzuordnen, dass das Auge des Lesers leicht und auf sinnvolle Weise auf den Inhalt zugreifen kann. Es ist wirklich eine Kunstform, die im Laufe der Zeit verfeinert wird, wenn erfolgreiche Kombinationen gefunden werden.
Nach meiner Erfahrung ist dies eines der schwierigsten Konzepte, die für angehende Entwickler und Designer gleichermaßen zu begreifen sind. Selbst erfahrene Designer haben manchmal Schwierigkeiten, Typografie in einem Layout anzuordnen. Nun, da diese beiden Bezeichnungen sich beim Webdesign zu verschmelzen beginnen, ist es wichtig, das Konzept der Lesbarkeit zu verstehen. Hier sind einige Dinge, die Sie beachten sollten:
Einer der häufigsten typografischen „Fehler“, die ich heute im Internet sehe, ist der falsche Schriftabstand. Ich beziehe mich hier auf Fälle, in denen einem Blocktext nicht genügend Rand, Unterüberschriften und korrelierter Haupttext gegeben werden, die nicht visuell zusammengruppiert sind usw. Durch den richtigen Abstand (kombiniert mit der Hierarchie) kann der Leser den Text scannen und an den gewünschten Punkten darauf zugreifen.
Es ist keine feste Regel, aber mir scheint, dass die Beziehung zwischen Absatzabstand (zusätzlicher Abstand vor oder nach einem Absatz), der Abstand um einen Block vom Typ und der Buchstabenabstand proportional zur Linie sein können Höhe eines Absatzes. Die Zeilenhöhe wird als vertikaler Abstand zwischen Textzeilen definiert. Wenn zum Beispiel die Zeilenhöhe eines Absatzes auf 2em und ein Absatz mit dem gleichen Textgröße auf 1,5em eingestellt ist, erfordert der erste Absatz mehr Absatzabstand und wahrscheinlich einen größeren Rand.
Ein Großteil davon wird eher mit dem Auge als mit einer exakten Formel durchgeführt, aber ich benutze eine gute Faustregel, wenn es um das Verhältnis des Absatzabstands zur Zeilenhöhe geht. Normalerweise mache ich meinen Absatzabstand (der im Web in einen Rand oder eine Auffüllung am oberen oder unteren Rand eines Absatzes übersetzt wird) um die Hälfte der Zeilenhöhe. Dies hilft tendenziell, Textpassagen „zusammenzuhalten“, anstatt zwischen jedem Absatz eine vollständige Rückgabe zu verwenden, wodurch viel Platz zwischen den Absätzen entsteht.
Natürlich sollte darauf geachtet werden, dass der Text nicht zu klein dargestellt wird. Es ist auch wichtig zu wissen, dass das Alter Ihres Publikums variieren kann, daher auch die Qualität der Augen. Im Allgemeinen ist es gut, um 13px oder .813em am kleinsten zu bleiben. Mit der umfassenderen Implementierung responsiver Websites zeichnet sich derzeit ein Trend hin zu einer größeren Körperkopie ab. Bei der RWD ist es auch wichtig zu wissen, dass unterschiedliche Textgrößen für verschiedene Geräte sinnvoll sein können. Zum Beispiel kann es sinnvoll sein, die Größe der Körperkopie auf der Breite eines Mobiltelefons im Gegensatz zu einer Desktopbreite zu erhöhen.
Eine weitere gängige Praxis, die die Lesbarkeit von Typen verhindert, besteht darin, dass die horizontalen Zeilen des Typs auf einer Seite zu breit werden. Diese Entfernung wird als Maß (manchmal auch Leitungslänge) bezeichnet. Wenn eine Textzeile zu lang ist, ist dies ein langwieriger Lesestoff und eine Strecke, die das Auge des Lesers dazu bringt, zur linken Zeile des Textblocks für die nächste Zeile zurückzukehren. Es ist auch einschüchternd, einen so angeordneten Textblock zu sehen, und einige Leser versuchen vielleicht gar nicht, ihn zu lesen.
Wie groß darf also ein Textblock maximal sein? Nun, alles hängt von der Größe des Textes ab. Je größer der Text ist, desto länger kann die Zeile sein (das ganze Proportionsding wieder). Meiner Meinung nach sind im Allgemeinen etwa 70 Zeichen so lang, wie Sie möchten. Im Durchschnitt versuche ich für Text in Textgröße im Bereich von 45ems zu bleiben.
Der Buchstabenabstand (auch als Tracking bezeichnet) ist die konsistente Zunahme oder Abnahme des Abstands zwischen den Buchstabenformen in einem Wort oder einem Textblock. Es ist nicht mit Kerning zu verwechseln, was sich auf die Entfernung der einzelnen Zeichen bezieht. Der Buchstabenabstand kann verwendet werden, um die Dichte eines Textblocks oder einer einzelnen Überschrift oder eines Untertitels anzupassen.
Offensichtlich beeinflusst der Abstand der Buchstaben die Lesbarkeit von Text. Zu viel oder zu wenig und die Lesbarkeit wird beeinträchtigt. Es gibt jedoch Zeiten, in denen meiner Meinung nach Buchstabenabstände erforderlich sind. Wie Sie in der folgenden Grafik sehen können, füge ich Unterhöhen oder Phrasen von Großbuchstaben gerne großzügige Buchstabenabstände hinzu. Ich finde es einfacher, Text in Großbuchstaben zu lesen, wenn die Zeichen etwas mehr Platz haben. Abhängig von der verwendeten Schriftart möchte ich den Buchstabenabstand in der Textkopie leicht erhöhen.
Es mag offensichtlich sein, dass ein guter Typenkontrast für die Lesbarkeit unerlässlich ist. Tatsache ist, dass Designer (ich eingeschlossen) immer die Grenzen des Kontrasts überschreiten. Es kann sein, dass wir möchten, dass ein bestimmter Textabschnitt weniger hervorgehoben wird oder dass in unserem Design "Hierarchieebenen" erstellt werden. Denken Sie auf jeden Fall daran, dass der Kontrast auf dem Bildschirm, insbesondere bei kleinen, feinen Formen wie Körpertext, von Bildschirm zu Bildschirm stark variiert. Es ist am besten, wenn Sie etwas zu viel Kontrast haben.
Wie wir bereits in dieser Serie besprochen haben, spielt die Hierarchie eine wichtige Rolle bei der Lesbarkeit von Inhalten. Eine erfolgreiche Hierarchie organisiert den Inhalt in verdaubare Teile und ermöglicht dem Leser, den Text einfach zu scannen und auf ihn zuzugreifen.
Denken Sie darüber nach, diese Lesbarkeits- und Lesbarkeitskonzepte in Ihren Projekten anzuwenden. Je mehr Sie es tun, desto besser werden Sie.
Accentsconagua