web-dev-qa-db-fra.com

meilleure pratique: taille de police pour mobile

J'ai vu cette question sur SO:

Quelles sont les tailles de police les plus courantes pour les balises H1-H6 Cette taille étant celle recommandée pour les balises H:

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

Existe-t-il une "meilleure pratique" pour ces téléphones mobiles? -ce que la taille d'écran iphone?

htmlcssmobile
31
raklos

Les tailles de police de votre question illustrent le rapport entre chaque en-tête et non leur taille (en pixels).

Donc, en réponse à votre question, "Existe-t-il une" meilleure pratique "pour les téléphones mobiles? Par exemple, la taille de l'écran d'un iphone?", Oui, il y en a probablement une. ne fonctionne pas pour votre mise en page.

Cependant, pour vous aider à rester sur la bonne voie, cet article sur la création de dispositions réactives fournit un bon exemple de la façon de calculer le font-size de base en pixels par rapport à la taille de l'écran du périphérique.

Les tailles de police suggérées pour les résolutions d'écran suggérées dans cet article sont les suivantes:

@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

Sur la base de mon commentaire sur la réponse acceptée, il existe de nombreux pièges potentiels que vous pourriez rencontrer en déclarant des tailles de police inférieures à 12px. En déclarant les styles qui conduisent à des tailles de police calculées inférieures à 12px, comme ceci:

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

Vous rencontrerez des problèmes avec les navigateurs, tels que Chrome avec un pack de langue chinoise qui rend automatiquement les tailles de police calculées sous 12px en 12px. Donc, ce qui suit est vrai:

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

Je dirais également que pour des raisons d'accessibilité, vous ne devriez généralement pas utiliser des tailles inférieures à 12px. Vous pourrez peut-être défendre les sous-titres, etc., mais encore une fois, préparez-vous à être surpris par certaines configurations de navigateur et à faire plisser les yeux à votre grand-mère lorsqu'elle tentera de lire votre contenu.

Je préférerais opter pour quelque chose comme ceci: 

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;
    }
}

Vous constaterez que les tonnesdesites qui doivent se concentrer sur l'accessibilité utilisent des tailles de police plutôt grandes, même pour des éléments p. 

En note de côté, définir margin-bottom égal à font-size tend également à être attrayant, c'est-à-dire: 

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

Bonne chance.

3
nikk wong

La chose à faire est que la taille est relative à la base. Je dirais donc que vous pouvez conserver les tailles de police en modifiant la base. 

Exemple: Si votre base est 16px et que p est 0,75em (ce qui correspond à 12px), vous devez augmenter la base à environ 20px. Dans ce cas, p équivaudrait alors à environ 15 pixels, ce qui est le minimum dont j'ai personnellement besoin pour les téléphones mobiles. 

1
Florian Rachor