Typographie fluide

Lorsque le terme réactivité est apparu pour la première fois dans le vocabulaire des marketeurs et des designers web, nous l'utilisions pour décrire l'avenir de la conception des emails et des sites web. Les designers web en particulier étaient confrontés à un grand défi : créer des sites web qui non seulement s'adaptaient aux écrans des utilisateurs mobiles, tablettes et ordinateurs de bureau, mais offraient également 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 manière dont Google évalue votre site et détermine 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, lorsque quelqu'un disait 'réactif sur tous les appareils', cela signifiait probablement 3 appareils :

• Ordinateur de bureau
• Tablette
• Smartphone

Bien que ce soient les 3 types d'appareils les plus couramment décrits, nous devons être conscients que nos visiteurs peuvent consulter notre site sur une grande variété de tailles d'écran, allant des grands Apple Mac aux ordinateurs portables légers avec des écrans plus petits. La technologie continue d'avancer et nous devons être prêts pour de nouveaux types d'appareils passionnants tels que les technologies portables et la réalité virtuelle.

Concentrons-nous sur un élément du design responsive - 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.

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

Mais qu'en est-il des tablettes de 7’’ ou 12’’ ? La taille de la police restera-t-elle la même ? Ici, nous abordons 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 divers modèles de la même marque de téléphones, tablettes ou ordinateurs portables, sans oublier les grands écrans de télévision.

Vous serez d'accord avec moi pour dire que définir la taille de la police pour chacun de ces appareils serait impossible.

En fait, ce serait fou si quelqu'un essayait même de le faire. C'est pourquoi certaines personnes ingénieuses ont inventé la typographie fluide, afin que les polices puissent se redimensionner d'elles-mêmes. Comment ? En définissant une taille de police relative basée sur la taille réelle de l'écran.

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

La plupart des navigateurs ont une valeur par défaut de taille de police de 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 utiliser cela pour changer votre taille de police de manière relative, par exemple 0.75rem (12px) ou une taille plus grande comme 1.25rem (20px), etc.

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

Les unités REM et EM sont souvent utilisées dans la typographie dynamique. Vous pouvez créer de jolis sites web responsifs avec elles, 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 signifie hauteur de la fenêtre et Vw signifie largeur de la fenêtre. Donc, au lieu de regarder la taille de la police racine dans le navigateur comme vous le feriez avec 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 de la magie de style IA de niveau supérieur !  

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

Donc, si vous êtes sur le point de créer un nouveau site web, examinez de plus près le code et découvrez comment la taille de la police est définie. Une typographie adaptable 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 une typographie fluide, il aura toujours un aspect soigné et sera lisible.

Ceci est un article invité de Jarinka Balcova, marketeur expérimenté et passionné de WordPress chez Ait-Themes.club. Ait Themes est une entreprise de développement web avec plus de 9 ans d'expérience sur le marché et 85 000 clients satisfaits dans le monde entier. Leur principal créneau est les thèmes WordPress multilingues. Ils se spécialisent également dans les thèmes WordPress pour annuaires et listes ainsi que dans les plugins avancés.