it-swarm-eu.dev

Gibt es eine optimale Schriftgröße?

Bei den meisten Website-Projekten, an denen ich beteiligt war, beträgt die Schriftgröße für den Massentext normalerweise 12 bis 13 Pixel, aber ich frage mich, ob dies eine gute Größe ist. Ich erinnere mich, dass ich einen Artikel gelesen habe, in dem es heißt, dass die Schriftgrößen auf Websites viel größer sein sollten, etwa 17 Pixel, damit der Massentext den gedruckten Schriftgrößen entspricht.

Gibt es eine optimale Schriftgröße? Wann ist etwas für den Durchschnittsbenutzer zu groß/zu klein?

Gibt es Vor- und Nachteile für kleine/mittlere/große Schriftgrößen?

pdate :
Ich möchte Ihre Erfahrungen mit tatsächlichen Tests von Benutzerreaktionen usw. sammeln. Es ist einfach, dies und das ist zu groß oder zu klein, aber ich habe gelernt, dass Benutzer manchmal überraschen und anders reagieren als Gutachten .

Auch die Möglichkeit, die Schriftgröße zu ändern, ist eine gute Diskussion, aber hier wird nicht darum gebeten. Was mich interessiert, ist, wie Benutzer auf unterschiedliche Schriftgrößen reagieren und nicht, wie sie diese ändern können sollten.

56
googletorp

Dies ist ein viel diskutiertes Thema. Eine der besten Möglichkeiten, wie ich dies erklärt habe, ist die Präsentation Design für Entwickler: Ihre Frontends weniger lutschen lassen von Idan Gazit.

Dies hatte die folgende Folie: alt text Dies ist 16px Text auf einem normalen Bildschirm und 12pt Text in einem Buch. Die Botschaft ist, dass 12pt hervorragend für ein Buch geeignet ist, aber normalerweise auch viel näher am Leser gehalten wird als ein Bildschirm. Unter Berücksichtigung der Entfernung scheinen die 16 Pixel auf dem Bildschirm und 12 Pixel im Buch ungefähr gleich groß zu sein. 12pt auf Papier = 16px auf dem Bildschirm

Es gibt alle möglichen Ausnahmen, bei denen der kleinere Text bevorzugt wird. Für eine optimale Lesbarkeit von längerem Text stimme ich jedoch 16px zu.

Es wird empfohlen, die skalierbaren Einheiten wie em oder % als die Einheiten mit fester Größe wie zu ändern. pt oder px . Lesen Sie mehr: CSS-Schriftgröße: em vs. px vs. pt vs. Prozent

34
user745

Es gibt keine optimale Schriftgröße. Wenn Sie nach einem suchen, vergessen Sie etwas Wichtiges: Die Lesbarkeit von Text ist nicht nur ein Produkt der Größe.

Ich habe in den letzten fünf Jahren als UI-Designer rund ein Dutzend Websites erstellt, und alle hatten unterschiedliche Zielgruppen. Eines der Dinge, die ich fand, war, dass die Größe nicht der größte Faktor ist. Es ist eine Kombination verschiedener Aspekte im Zusammenhang mit der Anzeige von Text:

  • kontrast
  • schriftfamilie
  • zeilenhöhe
  • position auf der Seite

Das Kombinieren dieser führt zu einer groben Metrik für allgemeine Lesbarkeit und ich habe festgestellt, dass dies das wichtigste Entwurfsziel für Text ist.

Als Anekdote aus dem Testen (seit Sie gefragt haben): Ich habe an einer Community-Site mit 700.000 monatlichen Besuchen gearbeitet, bei der das Hauptpublikum nicht mit Computern versierte Benutzer waren. Wir haben 12px Verdana für den Körpertyp und 14px-16px Arial für Titel verwendet. Gelegentlich fielen wir für weniger wichtigen Text auf 11px Verdana in Grau. Bei der Durchführung von Usability-Tests auf der Website erhielten wir Feedback nicht zur Größe des Textes, sondern dazu, wie sich die Umgebungsfarben des Designs anfühlten, als würden Sie in eine Lampe starren. Wir haben dies als zu hell interpretiert und den Kontrast des gesamten Designs so angepasst, dass er weniger hell ist. Teilweise aufgrund dieser Änderungen und teilweise aufgrund von Änderungen in der Navigationsstruktur konnten wir einen deutlichen Anstieg der Seitenaufrufe pro Besucher gegenüber dem Vormonat verzeichnen.

Eine Sache, an die Sie sich bei kleinen Schriftgrößen erinnern sollten, ist, dass sie einen Zweck haben: Wenn Sie etwas brauchen, das kleiner ist als etwas anderes (duh!). Als UI-Designer ist es jedoch wichtig, sich daran zu erinnern, dass es Ihre Aufgabe ist, Klarheit und Benutzerfreundlichkeit (unter anderem) in der Benutzeroberfläche zu schaffen, und dass durch das Hervorheben von Einige Elemente der Benutzeroberfläche können Sie die Benutzerfreundlichkeit verbessern. Es liegt an Ihnen, zu entscheiden, welche Elemente verkleinert und welche Aspekte des Textes geändert werden sollen (aus meiner obigen Liste).

20
Rahul

12px scheint für die meisten Leute gut zu funktionieren. Wenn Sie etwas mit 17 Pixel haben, ist das Lesen schwieriger, und wenn Sie es unter 10 Pixel haben, ist es auch schwieriger. Ich denke, 12-13px ist eine gute Richtlinie.

Aber wirklich, Sie sollten Ihre Textgröße auf so etwas wie 1em einstellen. Dies liegt daran, dass einige Browser es Benutzern nicht erlauben, die Größe von Text zu ändern, wenn dieser in Pixel festgelegt ist. Egal welche Textgröße Sie haben, Personen mit scharfen Augen verkleinern den Text, damit sie mehr lesen können, und Personen mit schlechtem Sehvermögen vergrößern den Text.

Stellen Sie einfach 1em ein und lassen Sie die Leute und ihre Browser den Rest erledigen.

Es ist jedoch gut, Ihre Seite mit verschiedenen Schriftgrößen zu testen, um festzustellen, ob das Layout überschaubar bleibt.

9
Vincent McNabb

Nach jüngsten wissenschaftlichen Erkenntnissen:

  • 18 und 22 Punkte führen zu einer deutlich verbesserten objektiven Lesbarkeit (gemessen mit Eye-Tracker).
  • 10 und 12 Punkte führen zu einer erheblichen Beeinträchtigung des Verständnisses (gemessen mit Verständnisfragen).
  • je größer desto besser, da sich die objektive Lesbarkeit mit zunehmender Schriftgröße kontinuierlich verbessert.

Nimm mein Wort nicht dafür. Lesen Sie die Details in der wissenschaftliche Arbeit .

7
Martin

Die optimale Schriftgröße ist individuell und wird vom Betriebssystem/Browser des Benutzers festgelegt. Also nicht ändern.

Wenn Sie die Schriftart (z. B. Überschriften) vergrößern müssen, tun Sie dies relativ (z. B. 200% oder 2em).

Verkleinern Sie niemals die Schriftgröße und behalten Sie immer einen guten Kontrast bei, um die Lesbarkeit zu gewährleisten.

5
George Pavelka

Nein.
... nicht in px jedenfalls.

Die richtigen Einheiten zum Ausdrücken einer optimalen Größe, falls es eine gibt, wären Winkel auf der Netzhaut.

Wenn Sie sich px ansehen, betrachten Sie nur einen von drei Faktoren, die zur Bestimmung der Lesbarkeit erforderlich sind1::

Der Punktabstand oder die richtige Definition von "Auflösung" (Pixel/Abstand) ist die Konvertierung von px in einen tatsächlichen Abstand.

Leseabstand benötigen Sie natürlich, da Zeichen gleicher Dimension nicht überall gleich lesbar sind.

... und natürlich geht die Lesbarkeit mit:

  • höherer px
  • höherer Punktabstand (oder niedrigere Auflösung)
  • geringerer Leseabstand

1Es gibt auch die Textfarbe, die Hintergrundfarbe, die Schriftart usw. (fetter Text, der schwarz auf weiß ist, benötigt eine kleinere Größe als kursiver Text, der gelb auf orange ist), aber px, Punktabstand und Leseabstand decken was ab Sie benötigen eine Entscheidung, die ausschließlich auf Dimension basiert.

3
A.M.

Sie sollten nicht versuchen, eine Schriftgröße festzulegen. Sie können + N verwenden, um anzuzeigen, dass "dies größer als die Grundlinie ist" (oder -N, um es kleiner zu machen). Jede von Ihnen angegebene Größe ist unter bestimmten Umständen falsch. Die einzige praktikable Option, bei der Benutzer keine Korrekturmaßnahmen auf Ihrer Website ergreifen müssen, besteht darin, den Browser entscheiden zu lassen.

2
Monica Cellio

Sie sollten nie Pixel für Schriftgrößen verwenden. Wenn Sie versuchen, 14px-Schriftarten auf einem 12-Zoll-Bildschirm zu lesen, der die Full HD-Auflösung unterstützt, erhalten Sie Text in 1-2 mm hohen Zeichen (und Kopfschmerzen in weniger als einer Stunde).

2
JanC

12px ist in Ordnung, aber wichtig ist auch, dass Benutzer die Schriftgröße selbst erhöhen können und Ihre Website in diesem Fall nicht beschädigt wird.

2
Ryan Shripat

Es gibt einige seltsame Beiträge und Missverständnisse in diesem Thread. Es scheint, dass viele Menschen die Wissenschaft und die gut recherchierten Aspekte des Lesens und Verstehens von Text ignorieren wollen. Zufällig bin ich dabei, neue Standards zu diesem Thema zu erforschen. Hier ein kleiner Überblick über den aktuellen Stand der Technik:

Die Wissenschaft der Kunst

Bisherige Forschungen haben festgestellt, dass die optimale Lesegeschwindigkeit für normal sehende Personen mit einer Schrift bei maximalem Kontrast eine x-Höhe zwischen 0,2 ° und 2 ° des Sichtwinkels beträgt. Die X-Höhe ist die tatsächliche vertikale Größe des Kleinbuchstaben x einer Schriftart. Natürlich variiert die tatsächliche Schriftgröße je nach Betrachtungsabstand, aber zum Glück basiert das CSS-Referenzpixel - px - auf dem Blickwinkel. Ein Sichtwinkel von 0,2 ° wird als kritische Druckgröße bezeichnet, da an diesem Punkt die maximale Lesegeschwindigkeit erreicht wird. (Oberhalb von 2 ° geht es wieder runter.)

Ein px ist 0,0213 Grad oder 1,278 Bogenminuten. Dies basiert auf einem Gerät mit einer Pixeldichte von 96 dpi bei einem Abstand von 28 Zoll. Gerätehersteller können daher die Referenz px verwenden, um eine Größe basierend auf der beabsichtigten/erwarteten Sichtweite festzulegen. Dies wird in den W3C-CSS-Standards erörtert. Gerätehersteller verwenden den Referenz-px, um die tatsächliche Rastergröße basierend auf dem beabsichtigten Betrachtungsabstand festzulegen. 16px sind nicht unbedingt 16 Gerätepixel. Auf einem iPhone mit einem Pixelverhältnis von 2: 1 wären es beispielsweise 32 Gerätepixel.

Somit beträgt die kritische Druckgröße für die Bahn eine x-Höhe von 9,4 Pixel. Abhängig vom spezifischen Schriftdesign bezieht sich dies auf eine Schrift zwischen 17 und 20 Pixel. Dies führte zu Barrierefreiheitsstandards, die angeben, dass 18px die gewünschte Mindestschriftgröße ist.

Aber warte, es gibt noch mehr

Es gibt auch eine kritische Kontrast Ebene. Die oben genannten Schriftgrößen beziehen sich auf einen maximalen Kontrast. Aber was ist mit niedrigeren Kontrasten? Viele Designer beeinträchtigen die Lesbarkeit ihrer Websites erheblich, indem sie Farben mit geringerem Kontrast verwenden. Ein Teil davon ist auf das Versagen von WCAG 2.0 bei der Angabe korrekter Kontraste in Bezug auf die räumliche Frequenz zurückzuführen. 4,5: 1 ist mehr als für eine große, fette Überschrift erforderlich, aber 4,5: 1 reicht für einen kleinen, dünnen Text nicht aus.

Bei normal sehenden Personen kann der kritische Kontrast bei großen Fettschlagzeilen auf dem Höhepunkt der Kontrastempfindlichkeitsfunktion nur 10% betragen. Bei den sehr hohen räumlichen Frequenzen kleiner dünner Schriftarten muss der Kontrast jedoch mehr als 20-mal höher sein. In der folgenden Abbildung sehen Sie, dass der gesamte Text dieselbe CSS-Farbe hat (und es wird nicht einmal erläutert, wie Antialiasing den Textkontrast bis zur Unkenntlichkeit beeinträchtigt).

(contrast sensitivity curve sowing relation to text size

Somit liefern die Schriftgröße zusammen mit dem Kontrast und einer Reihe anderer Designmerkmale zusammen einen "am besten lesbaren" Text. Unabhängig davon ist eine Schriftgröße von 12 Pixel, die viele Poster in diesem Thread empfehlen, schockierend zu klein, und wo sie auf diese Zahl gekommen sind, kann man nur vermuten. Sie könnten etwas wie 12px für einen Copyright-Hinweis verwenden oder etwas, das niemand lesen soll, aber 12px ist keineswegs eine geeignete Größe für Inhaltstext.

Die Glyphen haben es

Die offizielle Empfehlung ist die Mindestgröße von 18 Pixel. Einige Schriftarten wie Verdana (eine für die Webnutzung entwickelte Schriftart) funktionieren jedoch möglicherweise bis zu 16 Pixel. Times New Roman sollte jedoch niemals auf weniger als 18 Pixel eingestellt werden, da es eine sehr kleine x-Höhe und im Allgemeinen eine schlechte Lesbarkeit aufweist (danke Microsoft, ugh). Versuchen wir für eine andere Schriftart, die Microsoft entstellt hat, niemals "Courier New" zu verwenden, bei der Microsoft eine allgemein lesbare monospaced Schriftart verwendet und sie dann viel zu dünn und leicht gemacht hat. Wie, was dachten sie?

Für einige allgemeine Überlegungen zur Auswahl der Schriftart für Barrierefreiheit und Lesbarkeit habe ich dieses vorläufige PDF auf meinem Research Gate-Konto, das Sie kostenlos herunterladen können: https: //www.researchgate). net/publications/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Ein sehr wichtiger Schlusskommentar

Wichtiger als das, was Sie als Schriftgröße festlegen, ist, dass Sie Benutzern erlauben, Text auf die gewünschte Größe zu vergrößern, ohne den Inhalt zu beschädigen. Der aktuelle Standard legt den Zoom um 200% fest, ohne zu brechen, aber das ist nicht ausreichend. 500% sind aus Anwendersicht viel vernünftiger.

ERWÄGEN:

20/20 ist durchschnittliches Sehen. Die oben erwähnten Schriftgrößen (18px) basieren auf diesem durchschnittlichen Benutzer von 20/20. 20/40 benötigt ZWEIMAL diese Größe für die gleiche Wahrnehmung. 20/200 Benutzer benötigen zehn Mal diese Größe (d. H. Sie möchten möglicherweise 1000% zoomen). Ich erwähne mindestens 500%, da dies die Auswirkungen der Tatsache berücksichtigt, dass die Seite größere Schriftarten enthält, sowie die physische Größe des Geräts.

Eine Technologie, die derzeit in der Forschung fehlt, ist das Vergrößern kleinster Schriftarten, aber das Verkleinern größerer Schriftarten, damit große Überschriften für die Lesbarkeit nicht zu groß werden.

Bedenken Sie in der Zwischenzeit nur, dass ein großer Teil der Personen, die Ihre Website lesen, keinen so guten Monitor wie Ihren und kein so gutes Sehvermögen wie Sie haben. Wenn Sie eine Vorstellung davon haben möchten, wie Ihre Website von weniger glücklichen Personen gesehen werden kann, besorgen Sie sich einen billigen, unkonventionellen, kleinen Monitor mit niedriger Auflösung (möglicherweise haben Sie einen im Speicher) und stellen Sie ihn 3 bis 4 Fuß entfernt ein (dh mehr als einen Meter entfernt). Können Sie Ihre Website lesen? Zoomen Sie jetzt den Text - bricht Ihre Site aufgrund der Grenzen des kleinen Monitors?

Dies ist das Problem, das viele Benutzer mit vielen Websites haben. Nur weil Sie eine Sicht von 20/15 und ein wunderschönes 32-Zoll-Retina-Display haben, bedeutet dies nicht, dass Ihre Benutzer nahezu diese visuelle Anpassung haben.

-Andy

0
Myndex

Ich stimme Erik zu, 16pt scheint der beste Standard für die Lesbarkeit zu sein . Lesen Sie hier mehr: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell