Un guide simple pour la typographie réactive
La grande majorité des articles sur le design réactif se concentrent sur deux domaines principaux: une grille fluide et flexible et des images fluides et flexibles. Ce dont beaucoup d’entre eux ne parlent pas, c’est la typographie.
Et pourtant, pour la majorité des sites Web, le texte, le contenu est l'élément le plus important.
Certes, pour les sites où les images ou la vidéo sont le contenu principal, le type de réponse est un peu moins important, mais il ne faut pas le négliger.
La bonne nouvelle est que la typographie réactive n'est pas particulièrement difficile à réaliser. Nous avons juste besoin de prendre le temps de réfléchir à la manière dont notre type devrait réagir aux changements de taille de l'écran, puis mettre en œuvre ces modifications.
Principes de type réactif
Il existe deux principes principaux pour créer une typographie efficace. Le premier est le type redimensionnable. Cela signifie que le type qui non seulement redimensionne en fonction de la taille de l'écran, mais qui est également redimensionnable par l'utilisateur.
La seconde est des longueurs de ligne optimisées, qui conservent la lisibilité. Cela signifie que pour certains écrans, il est plus judicieux de réduire la taille de la zone de contenu et de raccourcir la longueur des lignes, même si le contenu peut théoriquement être plus large.
Type redimensionnable utilisant rems
La plupart des concepteurs utilisent des pixels ou des ems pour dimensionner leur type. Ems est une meilleure option, car ils permettent aux utilisateurs de redimensionner le type dans leur navigateur. Mais les ems sont relatifs à l'élément parent, ce qui signifie qu'ils sont plus compliqués à utiliser que les pixels, ce qui ne fait que s'agrandir dans les conceptions réactives où il y a plus de tailles et de relations à suivre.
Rems offre une meilleure alternative à ems. Ils fonctionnent de manière presque identique, sauf pour une différence essentielle: les unités rem sont relatives aux html element, plutôt que des éléments parents individuels. Cela rend le dimensionnement correct de votre type beaucoup plus simple.
Les unités Rem sont désormais prises en charge dans tous les principaux navigateurs modernes, y compris Opera à partir de la version 11.6 et IE9. Bien que vous souhaitiez peut-être inclure des solutions de secours pour les navigateurs antérieurs, il existe un support suffisamment large pour que rems puisse les utiliser maintenant.
Comme vous utiliserez des unités rem pour le type de dimensionnement, assurez-vous d'appliquer la réinitialisation à votre html élément et pas votre body élément. Donc, ça devrait ressembler à ceci:
html { font-size:100%; }
Vos unités rem seront désormais appliquées à la taille de police par défaut du périphérique.
Ensuite, vous devrez spécifier la taille de la police pour chaque taille d'affichage. Je recommande d'expérimenter avec des tailles de police réelles sur différents appareils pour voir ce qui semble le mieux. Cela dépend en grande partie des polices que vous avez sélectionnées, ainsi que de votre conception globale.
Vous voudrez probablement spécifier plusieurs tailles de police en fonction de différentes tailles d'écran, ce qui est assez simple à faire. Par exemple, votre CSS pourrait ressembler à ceci:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Certes, il s'agit d'un code simplifié pour cet article, mais vous donne un point de départ. Vous remarquerez peut-être que pour les plus petits écrans, une taille de police légèrement supérieure est spécifiée. En effet, les grandes tailles de police sont généralement plus faciles à lire sur les petits écrans.
Bien sûr, vous voudrez faire des spécifications supplémentaires pour des choses comme votre h1 éléments et autres. Je recommande fortement d'utiliser un outil comme Spécimen de police Web pour voir comment votre type va réellement regarder.
Maintenir des longueurs de ligne optimales
Bien que le type redimensionnable soit un concept assez simple, le maintien de longueurs de ligne correctes sur plusieurs périphériques devient un peu plus délicat. Il y a eu pas mal de débats sur la longueur de ligne optimale pour la lisibilité, mais selon le Baymard Institute , le consensus semble se situer entre 50 et 75 caractères par ligne.
Ils recommandent également d'utiliser un conteneur de largeur fixe pour votre contenu, mais cela va à l'encontre de l'objectif d'un design réactif. Nous devons donc aborder les choses un peu différemment si nous voulons conserver une réactivité avec des longueurs de ligne optimisées.
Tout d'abord, examinez les différentes tailles d'écran que vous allez concevoir et déterminez la taille de la police à utiliser pour obtenir environ 50 caractères sur une ligne. Pour de très petits écrans, vous devrez peut-être descendre en dessous de 50 caractères par ligne afin de conserver une taille de police lisible, mais 50 devrait être l'objectif. Cela nous donne un bon point de départ pour notre taille de police.
Nous devrions également définir des largeurs maximales (ou points d'arrêt) pour les zones de contenu textuel. Examinez la taille du type que vous utilisez pour une taille d'écran donnée, puis déterminez la largeur du conteneur de contenu lorsque vous avez environ 75 caractères par ligne. Cela ne va pas être exact sauf si vous utilisez une police monospace, mais vous devriez être capable de trouver une moyenne assez facilement. Cela devient notre largeur maximale de conteneur.
Disons que la taille de police par défaut pour un périphérique donné est 16px, et vous voulez que la taille de votre police soit 20px (disons que nous utilisons un caractère serif comme Droid Serif pour cet exemple). Cela signifie que vous spécifiez le type pour être 1.25rem. À cette taille, vous voudrez une largeur de conteneur d'environ 675px de large. Cela nous donne un compte de caractères dans les années 60 en moyenne, ce qui est juste dans notre largeur cible.
Pour spécifier la largeur du conteneur, utilisez simplement ce code:
@media (min-width: 950px) { .container {width:675px;} }
Vous pouvez définir ces largeurs de ligne maximales pour chaque taille d'affichage, ou uniquement pour des tailles spécifiques. Avec des écrans plus petits, vous souhaiterez peut-être laisser la largeur du conteneur et laisser le type s'étendre sur toute la largeur de l'écran.
Maintenant, avec des écrans beaucoup plus grands, vous pouvez envisager de diviser votre contenu en plusieurs colonnes. Disons, par exemple, que vous travaillez avec un iPad en mode paysage. La largeur de votre écran est de 2048 pixels. En étirant vos lignes pour remplir l'écran, il est difficile de lire, mais en centrant votre contenu et en raccourcissant la longueur de votre ligne, vous évitez de voir le contenu en mode paysage.
Au lieu de cela, définissez votre type sur deux colonnes (ou même trois, selon la taille de votre police). Spécification multi-colonnes de CSS3 Il est très facile de diviser votre texte en plusieurs colonnes sans avoir à modifier l'intégralité de votre mise en page. Combinez cela avec les requêtes multimédias et vous disposez maintenant d'une disposition de contenu qui se divise en deux ou trois colonnes pour les écrans plus grands, maintenant à la fois une taille de texte très lisible et une longueur de ligne très lisible.
Encore une fois, le code pour ce faire est assez simple:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Désormais, sur des écrans de plus de 1140 pixels de large, vous divisez votre contenu en deux colonnes, ce qui rend vos lignes beaucoup plus lisibles.
Utiliser des polices de caractères alternatives
Une chose que l'on oublie souvent lorsqu'on parle de typographie réactive est l'idée que différentes polices de caractères peuvent ne pas fonctionner correctement pour différentes tailles. Cela est particulièrement vrai pour les polices d'affichage.
Est-ce que cela signifie que vous devriez éviter d'utiliser ces polices dans vos conceptions réactives? Bien sûr que non. Au lieu de cela, spécifiez simplement différentes polices pour différents éléments dans vos mises en page plus grandes ou plus petites.
Par exemple, avec une conception pour ordinateurs de bureau, vous pouvez utiliser une police comme Script de ligue pour vos en-têtes. Mais sur un écran plus petit, tel qu'un iPhone, vous devrez soit le rendre si grand qu'il domine le contenu, soit il sera très difficile à lire.
Ce que nous pouvons faire ici, c'est utiliser League Script pour les plus grands écrans (iPad, ordinateur de bureau, etc.), tout en passant à une version plus grande de la police du corps pour les écrans plus petits (iPhone ou autres smartphones).
Pour ce faire, vous spécifiez simplement quelque chose comme ceci:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Bien sûr, cela peut être fait pour plus que vos rubriques.
Conclusion
Bien que le design réactif se soit largement concentré sur les images et la mise en page générale, la typographie est tout aussi importante que ces deux éléments. La meilleure partie est qu'il n'est pas particulièrement difficile d'adapter et d'optimiser votre typographie pour un design réactif.
Il est essentiel que vous mettiez le même temps et le même effort que vous mettez dans d'autres éléments de votre conception. Maintenir la lisibilité de votre contenu texte est un élément essentiel pour créer une expérience utilisateur optimale pour vos visiteurs.
Mettez-vous autant l'accent sur la typographie sensible dans vos conceptions que sur les grilles et les images réactives? Pourquoi ou pourquoi pas?