Quelle corps de texte pour les titres ?
En fonction de la taille et de la complexité de votre interface vous avez besoin d’une hiérarchie composée de un à six titres. En effet le langage HTML propose six niveaux de titre par défaut. La différence de niveau est représentée par une différence de corps.
Pour une interface évolutive et très dense en contenus prévoyez tout de suite 6 niveaux de titre. Limitez la taille du h1 en anticipation de longs titres. Évitez également que le sixième titre soit de corps plus petit que vos paragraphes.
Dans le cas d’un site internet avec moins de contenu les préconisations sont différentes. Si vous savez que vous allez être limité à deux niveaux de titre par exemple. Alors vous pouvez vous permettre de plus grands écarts pour signifier la hiérarchie.
Quelle corps de texte pour les paragraphes ?
Pour un site vitrine avec peu de texte et une plus grande importance donnée à l’image, vous pouvez tabler sur un corps compris entre 18 et 24px.
Pour une application où il y aura plus de contenus, des tableaux et cetera, vous pouvez vous satisfaire d’un corps de 14 ou 16px.
N’hésitez pas à avoir deux styles de paragraphe pour varier les compositions et mieux hiérarchiser vos informations.
Prévoyez des styles alternatifs
Dans le cadre d’une application SAAS, vous allez sûrement prévoir un design system assez complet. Si vous suivez les recommandations précédentes, vos h1 auront une taille raisonnable pour afficher facilement des titres plus ou moins longs. Cela ne vous empêche pas d’avoir un ou deux styles alternatifs plus grands à appliquer sur des textes choisis.
Pour des textes secondaires ou des mentions légales. vous pouvez prévoir un corps de paragraphe alternatif, de taille plus réduite.
Variez le corps en fonction de la résolution
Enfin, vous pouvez modifier le corps de texte en fonction du terminal. Un corps de texte de 20px sur écran d’ordinateur de bureau, peut très bien passer à 16px sur mobile par exemple.
Choisir un multiple de 4 pour l’interlignage
Que j’utilise une grille horizontale ou non, j’aime avoir une consistance entre mes interlignages. Il existe plusieurs façons de faire. Certains choisissent le nombre d’or ou se contente d’utiliser des nombre paires. Pour ma part je suis partisan de l’utilisation d’un multiple de 4 ou 8 pour les interfaces classiques. Pour des projets plus visuels et peu denses en contenu je me permets plus de liberté.
J’espère que ces quelques indications vous aideront. N’oubliez pas que les bonnes pratiques sont importantes mais qu’il faut tester les recommandations en fonction du contexte. Voir s’affranchir des règles dans certains cas.
