La typographie est sans doute la partie la plus importante de la conception de tout site Web. Un en-tête énorme sur une page blanche vierge peut sembler être le rêve d'un minimaliste devenu réalité, mais que se passe-t-il lorsque nous commençons à réduire notre page pour des appareils de plus en plus petits?

Hnnggghh !!! Tout casse et semble terrible.

C'est pourquoi nous avons besoin d'une typographie réactive. Nous avons besoin d’une typographie qui puisse s’adapter à la réduction aux points de rupture. Mais personne de son esprit ne veut passer par tous les problèmes de réinitialisation de tous ses styles de base pour chaque élément typographique de sa page..

Heureusement, nous pouvons changer la taille de la html sélecteur de sorte que tous ses descendants héritent d'une taille relativement plus petite.

Par exemple

Commençons par un exemple de balisage d'évier de cuisine:

En-tête 1
 
En-tête 2
 
En-tête 3
 
En-tête 4
 
En-tête 5
 
En-tête 6
 
 Lorem ipsum dolor sit amet, consectetur elipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Élément de liste 1
 
Élément de liste 2
 
Élément de liste 3
 
 
 
Élément de liste 1
 
Élément de liste 2
 
Élément de liste 3
 

Poussez un peu les murs en rembourrant notre html sélecteur, et nous allons réinitialiser le haut de la margesur tous nos éléments typographiques car il est vraiment ennuyeux quand le haut de votre h1 La balise correspond à environ un pouce en dessous d’une image à côté de laquelle elle est censée s’asseoir. Tout le reste restera à la valeur par défaut du navigateur pour l'instant.

Nous utilisons Stylus ici parce que, comme vous le savez probablement, je suis un grand fan de la syntaxe laconique de Stylus:

remplissage html: 2rem h1, h2, h3, h4, h5, h6, p, ul, ol margin-top: 0

Bon début, mais les gros textes pour les énormes textes et les polices claires sont une très belle tendance en ce moment, ajoutons-le. Nous allons aussi jeter dans certains hauteur de la ligne pour vous assurer que nos paragraphes ont l'air sympa.

remplissage html: taille de police 2rem: taille de police 24px: 100 hauteur de ligne: 1,5 h1, h2, h3, h4, h5, h6, h6, p, ul, ol marge-top: 0

Correction de hauteur de ligne

Mais maintenant, nos éléments ont un énorme marge inférieure sur eux et nos en-têtes ont un énormehauteur de la ligne ainsi que. Heureusement, c'est une solution rapide:

remplissage html: taille de police 2rem: taille de police 24px: 100 hauteur de ligne: 1,5 h1, h2, h3, h4, h5, h6, h6, p, ul, ol marge supérieure: 0 marge inférieure: 1 rem h1, h2, h3, h4, h5, h6 marge-bas: .5rem hauteur-ligne: 1.1

Là! Notre typographie paresseuse est complète. Nous avons manqué pas mal d’éléments typographiques (blocs, listes de définitions, etc.), mais n'hésitez pas à les ajouter à la grille standard lorsque vous les rencontrez..

Malheurs de la petite fenêtre

Maintenant, encore une fois, que se passe-t-il lorsque nous contractons notre fenêtre de visualisation? Notre typographie a l'air terrible. Il est difficile à lire et obligera l'utilisateur à glisser plusieurs fois pour lire un paragraphe..

Alors corrigeons cela en ajoutant des requêtes aux médias et en modifiant notre html sélecteur taille de police à chaque point d'arrêt:

remplissage html: taille de police 2rem: taille de police 24px: hauteur de ligne 100: 1,5 @media (largeur maximale: 900px) taille de police: 20px @media (largeur maximale: 500px) taille de police: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol marge-haut: 0 marge-bas: 1rem h1, h2, h3, h4, h5, h6, marge-bas: .5rem ligne-hauteur: 1.1

Voila! 

Voilà, une typographie réactive en cinq minutes. Tous les éléments typographiques sont dimensionnés par rapport au html élément, donc en ayant un plus petit html la taille de la police sur des écrans plus petits nous réduisons tout proportionnellement.

Démo plein écran sur CodePen.

Lectures complémentaires

Si vous êtes particulièrement intéressé par vraiment Une typographie sensible et complète, et je souhaite adapter ce passe-partout de manière plus détaillée. Je recommande vivement une échelle plus moderne pour la typographie Web de Jason Pamental..