it-swarm.com.de

Minimale Schriftgröße für die mobile Ansicht

Welche Mindestschriftgröße sollte beim Entwerfen einer mobilen App oder einer auf Mobilgeräte reagierenden Website die Sehkraft des Benutzers nicht beeinträchtigen?

23
jyo

Bei mobilen Layouts werden die Schriftgrößen normalerweise in EMs und nicht in Pixeln festgelegt, sodass die Schriftgröße relativ ist und auf verschiedene Bildschirmparameter reagiert werden kann. 16px ist die ideale Schriftgröße unterhalb dieser Schriftgröße, die für den Benutzer schwierig zu lesen wäre.

14
NB4

W3Recommendation zur Schriftgröße hat einen Hinweis, der besagt (Hervorhebung von mir):

Um die Lesbarkeit zu gewährleisten, sollte eine UA, die diese Richtlinien anwendet, dennoch vermeiden, eine Schriftgröße zu erstellen, die auf einem Computerbildschirm weniger als 9 Pixel pro EM-Einheit ergibt.


12 Pixel , laut dieser Artikel von "think with Google" auf Mobile.

  • Wählen Sie die richtige Schriftart. Ihre Mindestschriftgröße sollte 12 Pixel betragen. alles kleiner und die Benutzer werden schielen. Stellen Sie sicher, dass Sie eine Schriftart wählen, die sauber und leicht zu lesen ist. Vermeiden Sie nach Möglichkeit die Verwendung von bildbasiertem Text.

12sp , das für Beschriftungen verwendet wird, gemäß Abschnitt Materialdesign-Typografie . Dies ist die von ihnen vorgeschlagene Mindestschriftgröße (sowohl für Desktop- als auch für Mobilgeräte). (Siehe diese Frage für weitere Informationen zu SP-Einheiten).

Schriftgrößen werden mit sp (skalierbare Pixel) angegeben, um große Schriftmodi für Barrierefreiheit zu aktivieren.

(enter image description here

Beachten Sie, dass dies für englische und englischsprachige Skripte (Latein, Griechisch und Kyrillisch) empfohlen wird. Für süd- und südostasiatische und nahöstliche Sprachen, einschließlich Arabisch, Hindi und Thai:

Schriftgröße : Bei Titeln mit Untertiteln ist die Schriftgröße 1 Pixel größer als die für Englisch angegebene. Für Stile, die größer als Titel sind, ist die englische Schriftgröße geeignet.

Quelle: https://material.io/guidelines/style/typography.html

8
Alvaro

Es gibt kein bestimmtes Minimum, das vom Benutzer abhängt. (vor allem, wenn Sie sich mit Barrierefreiheit befassen)

Einige Benutzer müssen die Schriftgröße erhöhen (und die Größe, auf die sie sich erhöhen, hängt von externen Umgebungsfaktoren ab, z. B. tragen sie ihre Brille oder nicht).

Sie sollten also eine Größe festlegen und dem Benutzer erlauben, sie nach Belieben nach oben oder unten zu ändern. Erlauben Sie dem Benutzer sogar noch besser, eine Größe festzulegen und sie für die nächste Verwendung zu speichern - sie können sie möglicherweise noch ändern, aber es ist wahrscheinlicher, dass sie korrekt ist als jede Größe, die der Entwickler wählen würde.

Aus diesem Grund sollten Sie relative Änderungen der Schriftgröße verwenden, wenn mehr als eine Schriftgröße vorhanden ist. Verwenden Sie daher EM als Größe wie in Antwort von NB4

4
user151019

Das hängt von der Schriftart ab. Die Standard-Browser-Schriftart von 16px/1em/100% ist in den meisten Fällen laut Die Google Developer's Insights-Seite zu Schriftarten (Hervorhebung von mir):

Standardmäßig zeigt der Browser jede Schriftart mit 16 Pixel (CSS-Pixel) an. Dies ist in den meisten Fällen eine gute Standardeinstellung, muss jedoch möglicherweise für eine bestimmte Schriftart angepasst werden - dh die Standardgröße kann niedriger oder höher eingestellt werden, um sie zu berücksichtigen für die verschiedenen Eigenschaften der Schriftart. Sobald die Standardgröße festgelegt ist, sollten größere und kleinere Schriftarten relativ zur Standardgröße mithilfe von Pixeln definiert werden. Diese können dann verwendet werden, um die Größe des Texts für den primären, sekundären und anderen Inhaltstyp auf der Seite anzupassen.

Typecasts Blog-Beitrag über eine modernere Skala für Web-Typografie schlägt außerdem vor, 16px (1em oder 100%) als Basis zu verwenden:

body {
  font-size: 100%;
}

Der Beitrag hat auch eine vorgeschlagene Skala für Überschriften und dergleichen.

3
topher

Dies hängt in höchstem Maße von zwei Parametern ab: der von Ihnen verwendeten Schriftart und dem Gerät, auf dem die App angezeigt wird.

  1. Schriftart: Unterschiedliche Schriftarten haben unterschiedliche Eigenschaften in Bezug auf die Lesbarkeit. Eine Grundregel, die dies steuert, ist x-Höhe der Schriftart , aber es gibt auch andere Faktoren.
  2. Gerät: Die Hauptfaktoren sind: In welcher Entfernung betrachtet der Benutzer das Gerät und in welcher Pixeldichte. Faustregel: Je näher das Gerät wahrscheinlich ist und je höher die Pixeldichte ist, desto kleiner sollte die Schrift sein.

    Ein buchartiges Gerät mit einer theoretischen Genauigkeit von 300 dpi könnte tatsächlich nach Schriftarten fragen so klein wie 10px oder 11px .

    Am anderen Ende des Spektrums benötigt ein Fernsehbildschirm mit 90 dpi, der möglicherweise auf der anderen Seite des Flurs steht, etwas, das näher an 18 Pixel oder höher liegt.

Am Ende des Tages lautet die Antwort: Es kommt darauf an. Nehmen Sie Ihre App, verwenden Sie sie selbst, testen Sie sie mit realen Personen unter realen Umständen und bewerten Sie das Feedback. Wenn Sie das Ergebnis in CSS implementieren, finden Sie möglicherweise diese Technik wertvoll.

2
Boldewyn