bewährte Schriftgröße für Mobilgeräte

Lesezeit: 7 Minuten

Benutzer-Avatar
raklos

Ich habe diese Frage auf SO gesehen:

Was sind die gängigsten Schriftgrößen für H1-H6-Tags, wobei dies die empfohlenen Schriftgrößen für H-Tags sind:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Gibt es hierfür eine „Best Practice“ für Mobiltelefone? -Sagen Sie die Bildschirmgröße des iPhones?

  • Die einzige Empfehlung, die ich geben kann, ist, dass ja, Ems der richtige Weg sind, nicht Pixel, wie die andere Frage vermuten lässt. Aber es kommt darauf an. Wenn zum Beispiel der Text in einem h1 groß ist (wie ein ganzer Satz), finde ich 2em etwas zu überwältigend und würde mich für eine kleinere Größe entscheiden.

    – Herr Lister

    7. Februar 2012 um 10:40 Uhr


  • Nun, Sie wissen, dass em ein relatives Maß ist, oder? Also 1em ohne Basis bedeutet nichts.

    – Florian Rachor

    7. Februar 2012 um 10:42 Uhr

  • @FlorianRachor Stimmt nicht, tut mir leid.

    – Herr Lister

    7. Februar 2012 um 11:03 Uhr

Benutzer-Avatar
Mein Kopf tut weh

Die Schriftgrößen in Ihrer Frage sind ein Beispiel dafür, welches Verhältnis die einzelnen Header im Vergleich zueinander haben sollten, und nicht, wie groß sie selbst sein sollten (in Pixel).

Also als Antwort auf deine Frage “Gibt es eine ‘Best Practice’ für diese für Mobiltelefone? – Sagen wir iPhone-Bildschirmgröße?“, ja, das gibt es wahrscheinlich – aber Sie könnten feststellen, dass das, was jemand als “Best Practice” bezeichnet, für Ihr Layout nicht funktioniert.

Um Sie jedoch auf den richtigen Weg zu bringen, diesen Artikel über das Erstellen responsiver Layouts ist ein gutes Beispiel für die Berechnung der Basis font-size in Pixeln im Verhältnis zur Bildschirmgröße des Geräts.

Die in diesem Artikel vorgeschlagenen Schriftgrößen für Bildschirmauflösungen lauten wie folgt:

@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}
 
@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}
 
@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}
 
@media (min-width: 624px) {
    html {
        font-size: 9px;
    }
}
 
@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}

  • da steht gebrauch rem Anstatt von em. em erbt vom Elternteil, während rem ist direkt von html..wie hier in der Geige zu sehen ist, die ich gemacht habe jsfiddle.net/5qb4x

    – Muhammad Umer

    16. August 2013 um 20:55 Uhr


  • Ich würde eher sagen, dass es schon schlecht ist, unter 12px zu gehen. Nun, sogar 8px sind lesbar, aber es ist nicht so einfach zu lesen wie 12px oder ähnliches. Der Benutzer sollte Text in der Größe sehen, die ihm die Möglichkeit gibt, Text zu lesen, ohne das Telefon zu skalieren oder näher an die Augen zu halten. Inhalt ist das, was Kunden auf unserer Website suchen, nicht weißer Hintergrund mit kleinen Buchstaben 😉

    – stattdessen

    6. Mai 2015 um 23:20 Uhr

  • Ein weiterer Grund, warum alles < 12 Pixel schlecht ist, liegt darin, dass einige Browser (wie Chrome mit einem chinesischen Sprachpaket) alles, was kleiner als 12 Pixel ist, als 12 Pixel darstellen. Aus diesem Grund würde ich niemals unter 12 Pixel gehen und jeden, der Ihnen sagt, dies zu tun, mit einem Körnchen Salz nehmen.

    – Nikk Wong

    14. März 2016 um 21:25 Uhr


  • Die Medienabfrage ist gut, Sie können eigene Regeln basierend auf der tatsächlichen Medienbreite festlegen

    – andyCao

    28. Oktober 2016 um 8:06 Uhr

  • Es sollte 624 statt 724 px sein.

    – Rodrigo

    30. April 2020 um 15:44 Uhr

Benutzer-Avatar
Nikk Wong

Basierend auf meinem Kommentar zur akzeptierten Antwort gibt es viele potenzielle Fallstricke, auf die Sie stoßen können, wenn Sie Schriftgrößen kleiner als deklarieren 12px. Durch das Deklarieren von Stilen, die zu berechneten Schriftgrößen von weniger als führen 12pxso:

html {
  font-size: 8px;
}
p {
  font-size: 1.4rem;
}
// Computed p size: 11px.

Sie werden auf Probleme mit Browsern wie Chrome mit einem chinesischen Sprachpaket stoßen, das automatisch alle berechneten Schriftgrößen rendert 12px wie 12px. Folgendes gilt also:

h6 {
    font-size: 12px;
}
p {
   font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.   
// How unpleasant of a surprise.

Ich würde auch argumentieren, dass Sie aus Gründen der Barrierefreiheit im Allgemeinen keine Größen unter 12 Pixel verwenden sollten. Sie können vielleicht für Bildunterschriften und dergleichen plädieren, aber noch einmal – bereiten Sie sich darauf vor, von einigen Browser-Setups überrascht zu werden, und bereiten Sie sich darauf vor, Ihre Oma zum Schielen zu bringen, wenn sie versucht, Ihre Inhalte zu lesen.

Ich würde mich stattdessen für so etwas entscheiden:

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

p {
    font-size: 1rem;
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}

Das wirst du finden Tonnen von Websites die sich auf Zugänglichkeit konzentrieren müssen, verwenden ziemlich große Schriftgrößen, selbst für p Elemente.

Als Randnotiz Einstellung margin-bottom gleich dem font-size tendenziell auch attraktiv, dh:

h1 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
}

Viel Glück.

  • Wie erzwinge ich dann berechnete Schriftgrößen unter 12px? Wenn ich es auf 10 Pixel setze, möchte ich, dass es 10 Pixel und nicht 12 Pixel ist.?

    – Herr Calvin

    1. Mai 2016 um 10:09 Uhr

  • In einigen Browsern ist dies nicht möglich. Ich denke, die chinesische Version von Chrome tut dies, weil chinesischer Text < 12px völlig unleserlich ist. Bei anderen Chrome-Distributionen bin ich mir nicht sicher, aber ich gehe davon aus, dass es möglich ist, dass auch andere Sprachen diese „Mindestgröße“ festgelegt haben. Aus diesem Grund und aus Gründen der Zugänglichkeit im Allgemeinen ist es eine gute Idee, die Mindestgröße bei 12 Pixeln zu belassen. Es ist sowieso keine schlechte Idee. Unternehmen wie Google investieren viel in Barrierefreiheit und verwenden selten Schriftgrößen < 12 Pixel.

    – Nikk Wong

    24. Mai 2016 um 19:25 Uhr

Die ganze Sache zu em ist, dass die Größe relativ zur Basis ist. Ich würde also sagen, Sie könnten die Schriftgrößen beibehalten, indem Sie die Basis ändern.

Beispiel: Wenn Ihre Basis 16 Pixel beträgt und p 0,75 em ist (was 12 Pixel entspricht), müssten Sie die Basis auf etwa 20 Pixel erhöhen. In diesem Fall würde p dann ungefähr 15px betragen, was das Minimum ist, das ich persönlich für Mobiltelefone benötige.

  • Aber hier geht es nicht um die Basisschriftgröße. Wenn ja, würde ich sagen, dass es von der Bildschirmbreite abhängt. Wissen Sie, mit einem @media Regel. Hier geht es um das Header-zu-Normal-Verhältnis, und dann können Sie nichts Besseres tun, als ems zu verwenden.

    – Herr Lister

    7. Februar 2012 um 10:42 Uhr


  • Entschuldigung, aber Sie sind mit sich selbst nicht einverstanden. “Header-zu-Normal-Verhältnis” – was ist die normale Größe? Genau die Basis, die in px gemessen wird, da die Medien aus Pixeln bestehen. Wenn Sie sie verwenden möchten, müssen Sie eine Basis festlegen (16px ist in den meisten Browsern Standard).

    – Florian Rachor

    7. Februar 2012 um 10:50 Uhr

  • Dann verstehst du die Frage nicht. Die Frage ist nicht, was die beste, sagen wir mal, Körpergröße ist. Es geht um die Größe von Headern im Verhältnis zur normalen Größe. Und em ist nicht relativ zu einer undefinierten Größe, die Sie zuerst festlegen müssen, sondern relativ zur Größe im übergeordneten Element (in diesem Fall body). Wenn Sie keine Größe für den Text festlegen, verwendet der Browser seine Standardgröße. Dem Browser ist also immer bekannt, wie groß ein em in Pixel ist, auch wenn Sie dem Benutzer keine Basisgröße aufzwingen.

    – Herr Lister

    7. Februar 2012 um 11:02 Uhr

  • Es tut mir leid, aber ich habe das Gefühl, dass Sie das Em-Konzept nicht verstehen. Du schreibst im Grunde dasselbe wie ich, sagst mir aber immer wieder, dass ich falsch liege. Wenn Sie keine Größe festlegen, verwendet der Browser 16 Pixel. Wenn die Größen h1-h6 das beste p/h-Verhältnis auf dem Bildschirm darstellen, ist es höchstwahrscheinlich das beste für ein Mobiltelefon. Sie passen einfach die Basis an das Medium an. Die ganze Sache mit ihnen ist die relative Größe zu einer Basis. Sie ändern also die Basis und nicht das Verhältnis.

    – Florian Rachor

    7. Februar 2012 um 11:10 Uhr

  • @FlorianRachor “Wenn Sie keine Größe festlegen, verwendet der Browser 16px.” Das ist nicht ganz sachlich. Während viele Browser etwa 16 Pixel als Werkseinstellung haben, kann der Benutzer dies auf eine Größe seiner Wahl ändern. Wie auch immer, meine Antwort war auf Ihre Aussage “1em ohne Basis bedeutet nichts”, was keinen Sinn ergab. Es gibt immer eine “Basisgröße”, auch wenn Sie nichts auf der Webseite angeben, also ist ein em immer eine bestimmte Anzahl von Pixeln in einer bestimmten Situation. Es ist relativ zur Schriftgröße im übergeordneten Element, nicht zu einer “Basis” -Größe, die explizit festgelegt werden muss, um einen Wert zu haben.

    – Herr Lister

    7. Februar 2012 um 12:37 Uhr

1158040cookie-checkbewährte Schriftgröße für Mobilgeräte

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy