Un guide de la typographie fluide

Lorsque le terme réactivité est entré pour la première fois dans le vocabulaire des spécialistes du marketing et des concepteurs de sites Web, nous l'avons utilisé pour décrire l'avenir de la conception d'e-mails et de sites Web. Les concepteurs Web, en particulier, étaient confrontés à un défi de taille : créer des sites Web qui fournissaient aux utilisateurs de mobiles, de tablettes et d'ordinateurs de bureau un site Web qui non seulement s'adaptait à leurs écrans, mais offrait une expérience agréable.

La réactivité n'est pas une nouvelle tendance, mais elle est très importante. L'expérience utilisateur est un facteur primordial dans la façon dont Google évalue votre site et s'il apparaîtra ou non dans les résultats de recherche. C'est tellement important pour Google qu'ils fournissent un service de consultation gratuit .

Même pour ceux qui ont fait des efforts pour rendre leurs sites Web réactifs, il reste encore du travail à faire pour offrir une meilleure expérience aux visiteurs. Mais ce qui a vraiment changé, c'est la définition de ce que signifie réellement le terme "tous les appareils".

Il y a quelques années, quand quelqu'un disait "réactif sur tous les appareils", cela signifiait probablement 3 appareils :

• Bureau
• Tablette
• Téléphone intelligent

Bien qu'il s'agisse des 3 types d'appareils les plus couramment décrits, nous devons être conscients que les visiteurs de notre site Web peuvent consulter notre site sur une grande variété de tailles d'écran, des grands Mac Apple aux ordinateurs portables légers avec des écrans plus petits. La technologie continue de progresser et nous devons nous préparer à de nouveaux types d'appareils passionnants tels que la technologie portable et la réalité virtuelle.

Concentrons-nous sur un élément du responsive design : le texte. Lorsque vous passez d'un appareil à un autre, la taille de la police sur le site Web doit changer. Mais comment y parvenir ? Simple : lors du codage du site Web, vous définissez différentes tailles de police en pixels (px) pour différentes tailles d'écran d'affichage.

Lorsque vous ouvrez le site Web sur votre tablette 9 pouces, la taille de la police passera à une taille plus petite.

Mais qu'en est-il des tablettes 7'' ou 12'' ? La taille de la police restera-t-elle la même ? Nous abordons ici le concept de typographie fluide .

Imaginez la grande variété d'appareils et de tailles d'écran non seulement parmi les différentes marques mais aussi parmi les différents modèles d'une même marque de téléphones, de tablettes ou d'ordinateurs portables, sans oublier les grands écrans de télévision.

Vous serez d'accord avec moi si je dis qu'il serait impossible de définir la taille de la police pour chacun de ces appareils.

En fait, ce serait fou si quelqu'un essayait même de le faire. C'est pourquoi certains esprits intelligents ont proposé une typographie fluide , afin que les polices puissent se redimensionner d'elles-mêmes. Comment? En définissant la taille de police relative en fonction de la taille réelle de l'écran.

​Au lieu de définir la taille exacte de la police, vous pouvez utiliser les unités REM, qui sont relatives à la taille de la police de l'élément racine (cela semble compliqué, mais soyez patient, nous essaierons de ne pas vous endormir (petit jeu de mots REM ? Non. D'accord continuons) .

La plupart des navigateurs ont une valeur par défaut de taille de police 16px afin que nous puissions lire le texte facilement. Donc, en utilisant REM, si vous voulez avoir une police de 16px sur votre site Web, vous dites que la taille de votre police est de 1rem. Vous pouvez également l'utiliser pour modifier la taille de votre police relativement, par exemple 0,75 rem (12 px) ou une taille supérieure ou 1,25 rem (20 px), etc.

Les unités EM fonctionnent de la même manière, vous définissez votre propre taille de police de base pour tous les autres calculs de taille de police.Vous pouvez en savoir plus sur les unités EM ici.

Les unités REM et EM sont souvent utilisées dans la typographie sautante. Vous pouvez créer des sites Web agréables et réactifs avec eux, mais la transition d'une taille de police plus petite à une plus grande (et vice-versa) ne sera pas aussi fluide qu'elle pourrait l'être avec des unités encore plus relatives comme Vh et Vw.

Vh représente la hauteur de la fenêtre et Vw la largeur de la fenêtre. Ainsi, au lieu de regarder la taille de la police racine dans le navigateur comme vous le feriez dans les unités REM et EM, la taille de police idéale est calculée en fonction de la hauteur et de la largeur de l'écran sur lequel vous affichez votre site Web. Maintenant, c'est un tour de passe-passe de style IA de niveau supérieur !

Pour utiliser Vh et Vw, il vous suffit de définir la taille de police la plus grande et la plus petite que vous souhaitez pour vous assurer que la police est facile à lire dans tous les cas et vous obtenez un site Web avec une typographie vraiment fluide. Ta-da ! Heureux visiteurs du site Web. De plus, vous ressemblez à un génie de l'optimisation de sites Web à l'épreuve du temps.

Donc, si vous êtes sur le point de créer un nouveau site Web, approfondissez le code et découvrez comment la taille de la police est définie. La typographie sautante garantira que votre site est réactif.

Mais, si vous voulez vous préparer pour l'avenir, optez pour les unités de taille de police Vh et Vw. Lorsque votre site Web utilise la typographie fluide, il aura toujours l'air soigné et sera lisible.

Ceci est un article invité de JarinkaBalcova, spécialiste du marketing expérimenté et passionné de WordPress chez Ait-Themes.club . Ait Themes est une société de développement Web avec plus de 9 ans d'expérience sur le marché et 85 000 clients satisfaits dans le monde. Le créneau principal sont les thèmes WordPress multilingues. Spécialisé également dans les répertoires et les listes de thèmes WordPress et de plugins avancés.