Nichts ist wichtiger als die Lesbarkeit, wenn es um den Text auf Ihrer Website geht.

Absolut gar nichts.

Wenn du die Worte nicht lesen kannst, was tust du dann? Wer bekommt deine Nachricht?

Genauso wichtig wie die Wörter selbst ist das Design des Textes - von den Schriften über die Silbentrennung bis hin zur Darstellung auf dem Bildschirm. Teil des Designs beinhaltet die Wörter selbst, wie Sie die "großen Wörter" auf Ihrer Website zusammensetzen, kann auch einen Unterschied machen.

Schriftauswahl

Es gibt nur so viele Schriftarten zur Auswahl. Es kann ziemlich überwältigend sein.

Lass es nicht sein. Das Beste, was Sie tun können, wenn es um Lesbarkeit geht, ist, es einfach zu halten.

Wählen Sie eine oder zwei Schriftarten für Ihre Site aus. Ein guter Ausgangspunkt ist eine Schriftart für die Haupttextkopie und eine für die großen Wörter, wie Kopfzeilen, Banner und Breakout-Text. Die Verwendung einer anderen Schriftart für jedes Element ist störend, verwirrend und schwer zu lesen.

Beginnen Sie mit einer serifenlosen Schrift für die Hauptkörperkopie. Sans Serifs sind am leichtesten für das Auge, wenn es darum geht, Bildschirm lesen und neigen dazu, auch bei kleineren Größen gut funktionieren. Serifenschriften können beginnen, "zusammen zu laufen" oder ihre Serifen zu verlieren, abhängig von Schriftgröße, Bildschirmauflösung und sogar Farbkontrast zwischen Text und Hintergrund.

Typecast

Denken Sie daran, dass Ihre Körperkopie die am meisten gelesene Sache auf der Website sein wird und auf Computern, Tablets oder mobilen Geräten leicht verdaulich sein muss. Es ist in Ordnung, verschiedene Stile dieser Schrift in der Kopie zu verwenden, aber nicht verrückt werden. Fettdruck und Kursivdruck eignen sich hervorragend für die Betonung von Schwerpunkten, aber große Blöcke dieser Stile können schwer zu lesen sein.

Wenn Sie Hilfe bei der Auswahl einer Schriftart benötigen, die versucht, Schriftarten mit Online-Tools wie Google Web Fonts oder Typecast zu verbinden.

Google webfonts

Silbentrennung

Die Silbentrennung ist schlecht. Es ist hässlich. Es ist ineffektiv und verwirrend. (Und diese Probleme vergrößern sich plattformübergreifend.)

Hyphenation

Bleib weg davon.

Für den Fall, dass Sie eine Aktualisierung benötigen, erfolgt die Silbentrennung, wenn ein Wort am Ende einer Zeile geteilt wird, sodass ein Teil eines Wortes am Ende einer Zeile erscheint und der Rest des Wortes am Anfang der nächsten erscheint. Silbentrennung ist im Webdesign ziemlich aus der Mode gekommen, aber von Zeit zu Zeit stößt man auf sie. (Es wird regelmäßig in Print-Publikationen wie Zeitungen verwendet.)

Bei der Verwendung von Bindestrichen wurde darauf geachtet, dass der Text gleichmäßig (und gleichmäßig) über die Zeilen verteilt ist. Bei der Arbeit mit ausgerichtetem Text können Probleme mit ungeraden Abständen auftreten, wenn die Silbentrennung entfernt wird.

Aber Bindestriche, die Wörter unterbrechen, können den Text schwer lesbar machen. Das Lesen eines Bindestrichs kann dazu führen, dass eine Person über ein Wort stolpert oder es falsch interpretiert. Das Verwenden von Bindestrichen kann auch unbeabsichtigt die Betonung bestimmter Wörter oder deren Auswirkung auf den Rest der Kopie ändern. Unterbewusst sagt ein Bindestrich einem Leser, dass das Wort etwas weniger wichtig ist als andere Wörter, die vollständig wiedergegeben werden.

Speichere Bindestriche nur für die Wörter, die sie benötigen, z. B. mit Modifikatoren, und um Zeilen nicht zu trennen. Text sieht sauberer und professioneller aus und hat die Lesbarkeit erhöht, ohne all die lästigen Striche an den Zeilenenden.

Bad Racket

Rechtfertigung

Wie die Silbentrennung ist die vollständige Rechtfertigung aus der Web-Design-Mode herausgefallen, obwohl sie immer noch häufig im Druck verwendet wird.

Justification

Wenn Sie die Option "Volle Anpassung" verwenden, wird jede Linie vollständig vom linken Rand bis zum rechten Rand gefüllt, sodass jede Linie die gleiche Breite hat. Bei Verwendung der vollständigen Ausrichtung werden Leerzeichen zwischen Wörtern erstellt (und geschlossen), sodass der Abstand nicht gleichmäßig verteilt wird. Die Verwendung dieser Art von Textausrichtung kann für einige Websites funktionieren, ist jedoch nicht immer die visuell ansprechendste Option. Sehen Sie sich an, wie Ihr Text bricht und versuchen Sie, ihn ein paar Mal zu lesen, um festzustellen, ob eine vollständige Rechtfertigung eine praktikable Option ist.

Es gibt auch andere Arten von "Ausrichtung" oder Textausrichtung. Sie können Text so einstellen, dass er am linken Rand, am rechten Rand oder in der Mitte ausgerichtet ist.

Bei englischsprachigen Websites ist die linke Rechtfertigung die gängigste Praxis. Der Text wird am linken Rand ausgerichtet und hat eine unregelmäßige rechte Kante. Das Gefühl ist freundlich und leicht zu lesen. Weil diese Technik so verbreitet ist, werden viele Leser nicht einmal bemerken, wie der Text aufgebaut ist. Dies ist die beste Option für die Arbeit mit großen Textblöcken.

Nanozoom

Die rechte Ausrichtung ist eine andere Option, funktioniert aber nicht so gut für Textabschnitte. Wenn der Text auf den rechten Rand und der linke auf den linken Rand ausgerichtet ist, befinden sich Start- und Stopppunkte auf dem Bildschirm. Die natürliche Lesereihenfolge ist umgekehrt und nur der Gedanke, Text auf diese Weise zu lesen (besonders in großen Mengen), kann einen Leser unbehaglich machen. Reservieren Sie rechts ausgerichteten Text für kleine Breakouts, wenn Sie es in Ihr Designschema integrieren möchten.

The paper mill

Zentrierter Text ist ein sehr beliebtes Werkzeug, obwohl es für große Textblöcke nicht empfohlen wird. (Zugegeben, Sie werden feststellen, dass es auf diese Weise überall im Internet verwendet wird.) Die Fallstricke der zentrierten Ausrichtung ähneln denen, die mit rechtsbündigem Text verbunden sind - es hat keine "natürlichen" Starts und Stopps und kann sich auf der Seite unangenehm anfühlen. Mittig ausgerichteter Text kann sich etwas formell anfühlen (weil er oft für Elemente wie Einladungen verwendet wird) und sollte für kleine Textabschnitte reserviert werden, bei denen Betonung wichtig ist. Es ist keine gute Wahl für große Kopierblöcke.

Andere Arten von Effekten

Striche oder Konturen

Verwenden Sie in Maßen größere Textelemente als Schwerpunkt, vermeiden Sie aber kleine Texte.

Durchstreichen oder unterstreichen

Beide werden häufig verwendet - durchgestrichen als Notation, dass etwas nicht mehr gültig ist und zur Betonung unterstrichen wird. Verwenden Sie diese Tools weiterhin, aber verwenden Sie sie nur sparsam. Beide arbeiten für kleine Textstücke, verursachen jedoch große Lesbarkeitsprobleme, wenn sie mehr als ein paar Wörter umfassen.

53

Neigung oder Verzerrungen

Diese Effekte sind großartig, wenn Sie Typografie als Kunstform verwenden. Sie sind nicht so effektiv, wenn Sie versuchen, eine Nachricht zu vermitteln. Sie sollten Textmanipulationen und Verzerrungen auf Hauptkörperkopie vermeiden.

Farbe

hip2save

Die Verwendung von Farbe kann ein großartiges Werkzeug sein, um ein einzelnes Wort in einem Textblock zu betonen. (Die am häufigsten und visuell ansprechendsten Farbkombinationen für Textblöcke sind Schwarz oder Dunkelgrau auf Weiß oder Weiß auf dunklem Hintergrund.) Achten Sie auf Farben, die in scharfem Kontrast zum Hintergrund stehen, so dass sie leicht zu sehen und zu lesen sind. Superhelle (wie Gelb oder Fuchsie) Farben können schwierig zu lesen sein, wenn sie nicht mit einer dicken, großen Schrift verwendet werden. Berücksichtigen Sie die Fettschrift für zusätzliche Betonung mit Farbe, aber reservieren Sie diese Technik für eine begrenzte Anzahl von Wörtern.

Halten Sie großen Text sauber

Obwohl die Silbentrennung in der Textkopie als eine Frage der Präferenz angesehen werden kann, sollte sie immer in großer Schrift vermieden werden. Einfache Rechtsetzungsstile sind ein Muss; linker oder zentrierter Text sind die besten Optionen.

Header, Banner, Breakouts und andere große Typen oder Möbel müssen lesefreundlich sein. Diese Wörter werden nicht nur für die Navigation verwendet, sondern müssen auch gelesen werden, um die Nutzer durch die Inhalte auf Ihrer Website zu bewegen.

Bindestriche sind Stolpersteine.

Eine ungerade Ausrichtung wird die Navigation nicht unterstützen.

Es gibt ein paar andere Dinge, über die Sie sich Gedanken machen sollten, wenn Sie das Design für Ihren großen Typ planen.

Denken Sie über die Größe des Typs im Verhältnis zur Hauptkörperkopie nach. Schlagzeilen und Header, die deutlich größer und kühner sind, sprechen laut zu den Lesern, während kleinere, dünnere Möbel flüstern.

Dewey's Pizza

Für große Wörter ist der Kontrast von größter Bedeutung. Wählen Sie bei der Auswahl von Schriften etwas für Möbel aus, die der Körperkopie nicht zu ähnlich sind. Betrachten Sie eine Serifenschrift, wobei zu berücksichtigen ist, dass Serifen bei großen Schriftgrößen am besten funktionieren, so dass die Terminals und Details zu jedem Buchstaben nicht in den Pixeln verloren gehen. Eine andere Option ist, nach Farbe zu suchen, um einen eindeutigen Stil und eine Hierarchie für Möbel zu etablieren.

Ethical Studios

Denke auch über den Raum um die großen Worte nach. Stellen Sie sicher, dass große Wörter in der Nähe der Kopie liegen, die sie beschreiben. Fügen Sie zusätzlichen Platz über jeder Kopfzeile oder Kopfzeile hinzu und verdichten Sie den Abstand zwischen der Kopfzeile und der Kopie.

Schreiben Sie zu passen

Überlegen Sie schließlich, ob Sie fit sind.

Schauen Sie sich an, wie sich der Text ausrichtet, sobald Sie die Kopie für die großen Wörter geschrieben haben. Befüllt es die Linie? Wie viele Zeilen?

Visuell möchten Sie für Header, die ein konsistentes Aussehen haben. Dies gilt sowohl für den Schriftschnitt als auch für die Länge der Wörter. Vermeiden Sie Objekte, die eine Zeile vollständig ausfüllen und nur einen Bruchteil der nächsten Zeile. Denken Sie an Möbel in Form von kleinen Rechtecken; Sie möchten, dass alles in den Rahmen passt, ohne dass weiße Räume auffallen.

modernerd

Erstellen Sie einen Stil für die großen Wörter, ob es sich um eine einfache Kopfzeile mit nur wenigen Wörtern oder um zwei Zeilen umfassende Gedanken über jedem Textabschnitt handelt. Betrachten Sie einen Teil dieses Stils als die Art von Schlagzeile, die Sie verwenden - wird er eine Frage stellen, eine Faktenerklärung abgeben, den Lesern sagen, was zu tun ist, zeigen, wie etwas zu tun ist, oder mit Worten und Phrasierungen indirekter und niedlicher sein?

Versuchen Sie, Kopfzeilen und Überschriften zu schreiben, die nur eine Zeile lang sind (höchstens zwei), verwenden Sie aktive Wörter.

Crafting Type

Dies kann schwer zu erreichen sein und Vorsicht vor Tricks. Greifen Sie nicht auf einen Thesaurus und ersetzen Sie ein großes Wort durch ein kurzes, um die Dinge in Ordnung zu bringen. (Sie laufen Gefahr, das falsche Wort zu benutzen oder einen Begriff zu verwenden, den Ihre Leser vielleicht nicht kennen.) Denken Sie im Gespräch, wenn Sie schreiben. Verfasse die Wörter und überarbeite sie dann (ausschneiden oder hinzufügen), so dass du die Integrität dessen, was du ausdrücken möchtest, aufrechterhältst und eine saubere, leicht lesbare Kopie produzierst.

Fazit

Bei der sauberen Kopie geht es um mehr als nur einfache Schriften und Bindestriche. Es geht darum, Kopien zu schreiben, die Sinn machen und lesbar darstellen.

Denken Sie über Ihr Publikum nach, wenn Sie alles zusammenfügen. Sie würden eine andere Technik und einen anderen Stil verwenden, wenn Sie Blogposts über Hochzeitsideen (traditionelles, weibliches Gefühl) schreiben, anstatt über Tattoos zu bloggen (wahrscheinlich kantiger und dunkler). Deine Zielgruppe hat Auswirkungen auf visuelle Effekte. Sie sollten sich auch auf deine Kopie auswirken.

Aber am wichtigsten, denken Sie darüber nach, wie alles zusammenkommt. Entfernen Sie alles andere von Ihrem Website-Design und lassen Sie nur den Typ zurück. Ist es einfach zu lesen? Müssen Sie hinein- oder herauszoomen? Schaust du auf den Bildschirm? Dies sind die wirklichen Fragen, die Sie beantworten müssen, denn am Ende des Tages kommt es vor allem auf Lesbarkeit an.

Welchen Text finden Sie online schwer zu lesen? Mit welchen Techniken halten Sie Ihren Text lesbar? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Textbild über Shutterstock.