Verwenden Sie Legible Text Design Ihrer Website

Ob eine Website Grafik oder HTML-Text verwendet, Bildschirmtext auf dem Computer lesen kann auf das Auge unangenehm sein: Sie sind von der Blendung schielen beim Versuch, den kleinen Text zu lesen. Sie können die Folter zu minimieren, jedoch durch die Textmenge zu begrenzen Sie sich auf jeder Webseite enthalten. Durch das Brechen Kopie in kleine Stücke (im Gegensatz zu langen Absätzen) und die Wahl der richtigen Schriftarten, Farben und Größen, können Sie Ihre Seite viel einfacher auf einem Computer-Monitor zu lesen.

Print Designer haben den Luxus, mit allen Arten von Schriftarten und Schriftgrößen arbeiten. Dies, weil sie mit einem hohen drucken Lösung (Feine Größe Punkt) auf dem Papier - auch wenn der Text sehr klein ist, kann der Leser immer noch leicht im Detail zu sehen. Bilder auf einem Computermonitor angezeigt werden, sind jedoch eine andere Geschichte. Der kleinste Lichtpunkt auf einem Monitor, eine so genannte Pixel, 1 # 8260-72-Zoll breit, oder 72 Punkte pro Zoll - die, ohne dass Sie Ihre Herrscher raus, nicht so klein ist, wenn Standard-Druckauflösungen wie 150 und 300 Punkten pro Zoll verglichen.

Werfen Sie einen Blick auf die Art in dem ersten Beispiel. Dieser Text ist 10-Punkt-Syntax in fett auf dem Computer. Es wurde erweitert, so dass Sie, dass nur ein paar Pixel jeden Buchstaben bilden sehen können. Solch eine kleine Anzahl von Pixeln macht den Text erscheinen klobig und nicht lesbar - vor allem, wenn wie diese vergrößert. Zehn-Punkt-Schriftgröße ist eine gemeinsame Schriftgröße auf Visitenkarten, so wie Sie sehen können, was für arbeitet eine Visitenkarte nicht so gut auf dem Computer-Bildschirm funktioniert. Natürlich sind einige Schriftarten in dieser Größe besser funktionieren als andere auf dem Netz, aber Sie die allgemeine Idee.

bild0.jpg

Neben Schriftarten und -größen, tragen andere Faktoren Lesbarkeit auf einer Web-Seite in Text um. Sie können drei Dinge tun, um Ihren Text besser lesbar (unabhängig davon, welche Schriftart Sie wählen) machen:

  • Typischerweise ist dunkler Text auf einem hellen Hintergrund besser lesbar als umgekehrt. Wenn Ihre Web-Seite mit viel Text hat, dass Sie die Menschen lesen wollen, wählen Sie einen hellen Hintergrund mit dunklen Text für einen guten Kontrast. Eine dunkle, gedämpfte Farbe eher als schwarzer Text für Körper Kopie mildert den Effekt, der Text nicht so grell und stark als schwarzer Text auf einem weißen Hintergrund.

  • Versuchen Sie, die Erweiterung führend - der Raum zwischen den Textzeilen, - der Text besser lesbar zu machen. die führende Erhöhung der hilft, das Auge, um die nächste Textzeile zu finden. Vergleichen den visuellen Effekt der drei Textblöcke in dem zweiten Beispiel. Der Text im linken Block ist zu eng, während der mittlere Block von Text viel besser lesbar ist - vor allem auf dem dunklen Hintergrund. Die lose führenden im rechten Block gibt eine ganz andere, mehr dekorative Gefühl für den Text.

  • Versuchen Sie, jede Textkörper Spaltenbreite nicht mehr als etwa 450 Pixel zu begrenzen. Da Web-Seiten mehr horizontalen Raum als vertikale Raum haben, können Sie sich jede Textzeile über die gesamte Seite laufen zu machen versucht, so weit über der Faltlinie wie möglich zu erhalten. (Oberhalb der Faltlinie bedeutet im Browser-Platz auf dem Bildschirm, dass der Besucher ersten Begegnungen.) Das Problem mit dieser Taktik ist jedoch, dass nach Ihren Augen über die Seite den ganzen Weg zu bekommen, kann man nicht einfach die nächste Zeile zu finden. jeder Spalte Begrenzung Breite nicht mehr als etwa 450 Pixel hilft Ihrer Besucher Augen die Seite schnell und präzise im Zickzack nach unten. Typischerweise Konto Web-Seiten-Layouts für zwei bis drei schmalen Textspalten statt einer breiten ein, wie in der folgenden Abbildung.

    image1.jpg

    Mit arbeitet eine erhebliche Menge an führende nur gut für kleinere Textblöcke - nicht für ganze Seiten des Textkörpers. Sie können eine Menge, was zu verwenden, ein Lead-in Absatz oder ein Angebot machen aus dem Hauptkörper abheben, wie in der folgenden Abbildung.

    image2.jpg

Menü