SimpleGeek

Activités, Loisirs et Humeurs d'un geek breton en Normandie ...

Une typographie responsive

Rédigé par Webmaster Aucun commentaire

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.

Pour aller plus loin

Un guide simple pour la typocraphie responsive

L'article original

Écrire un commentaire

Quelle est la deuxième lettre du mot zulnga ?

Fil RSS des commentaires de cet article