Une typographie responsive
Lorsque l'on aborde le responsive design, nous avons tendance à penser essentiellement grilles et images fluides et flexibles, en laissant de côté la typographie et comment elle réagit au redimensionnement des écrans.
Il existe deux façons principales pour mettre en place une telle typographie:
- redimensionner la taille des polices en fonction de la taille des écrans ( utilisation de l'unité rem)
- maintenir la lisibilité en optimisant la longueur des lignes
Redimensionner la typographie en utilisant l'unité rem
Ayant fait le choix d'utiliser l'unité rem au lieu de l'em pour sa facilité d'utilisation (évite la difficulté de l'effet cascade du aux blocs imbriqués) , sa grande compatibilité à 83% ( il reste le problème d'IE8: utilisation d'un repli sur le pixel).
Après avoir fait un reset
html { font-size:100%;
}
ou
html { font-size:62.5%;
}
Il suffira de modifier dans les médiaquerries les différentes tailles de police suivant les tailles d'écran.
Maintenir une longueur de ligne optimale
Même si nous pourrons trouver divers avis, il est admis que les lignes de contenu devraient contenir entre 50 et 75 caractères. Ce qui implique de fixer ces largeurs minimales et maximales suivant les tailles de police.