it-swarm.com.de

best-Practice-Schriftgröße für Handys

Ich habe diese Frage zu SO gesehen:

Was sind die häufigsten Schriftgrößen für H1-H6-Tags Dies ist die empfohlene Schriftgröße für H-Tags:

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

Gibt es eine "Best Practice" für diese Handys? -Say iPhone Bildschirmgröße?

31
raklos

Die Schriftgrößen in Ihrer Frage sind ein Beispiel dafür, in welchem ​​Verhältnis die Kopfzeilen im Vergleich zueinander stehen sollten, und nicht von der Größe, in der sie sich selbst befinden sollen (in Pixeln).

Also als Antwort auf Ihre Frage "Gibt es eine" bewährte Methode "für diese Mobiltelefone? - sagen Sie die Bildschirmgröße des Iphone?", Ja, das ist wahrscheinlich der Fall - aber Sie finden vielleicht das, was jemand als "bewährte Methode" bezeichnet funktioniert nicht für Ihr Layout.

Damit Sie jedoch auf dem richtigen Weg sind, bietet dieser Artikel über das Erstellen responsiver Layouts ein gutes Beispiel für die Berechnung der Basis font-size in Pixel in Relation zu den Bildschirmgrößen 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: 724px) {
    html {
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}
40
My Head Hurts

Basierend auf meinem Kommentar zu der akzeptierten Antwort gibt es viele mögliche Fallstricke, auf die Sie stoßen können, wenn Sie Schriftgrößen kleiner als 12px deklarieren. Indem Sie Stile deklarieren, die zu berechneten Schriftgrößen von weniger als 12px führen, wie folgt:

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

Sie haben Probleme mit Browsern wie Chrome mit einem chinesischen Sprachpaket, das alle unter 12px berechneten Schriftgrößen automatisch als 12px darstellt. Das Folgende ist also wahr:

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 12px verwenden sollten. Sie können zwar einen Fall für Bildunterschriften und Ähnliches anführen, aber noch einmal - lassen Sie sich unter einigen Browser-Einstellungen überraschen und bereit sein, Ihre Oma zum Schielen zu bringen, wenn sie versucht, Ihren Inhalt zu lesen.

Ich würde 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;
    }
}

Sie werden feststellen, dass TonnenvonSites , die sich auf die Barrierefreiheit konzentrieren müssen, ziemlich große Schriftgrößen verwenden, selbst für p-Elemente. 

Als Randbemerkung ist die Einstellung von margin-bottom gleich font-size normalerweise auch attraktiv, d. H .: 

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

Viel Glück.

3
nikk wong

Das Ganze ist, dass die Größe relativ zur Basis ist. Ich würde also sagen, dass Sie die Schriftgröße beibehalten können, indem Sie die Basis ändern. 

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

1
Florian Rachor