Aujourd’hui nous nous attaquons à un sujet que j’aime beaucoup, car il peut créer une polémique dans le monde de la création de site internet : l’utilisation des typographies sur un site. Quelle polémique ? Celle qui oppose l’aspect graphique à l’utilisabilité.
Typographies et identité
Une typographie peut avoir autant d’importance qu’un logo dans une charte. Un fois choisie, son utilisation pourra être quasi quotidienne, d’où l’importance de bien la choisir. Pour celles et ceux qui souhaitent travailler leur charte graphique avec des typographies gratuites et libres de droit, et en plus de ça orienté web, je vous propose deux grands classiques :
Google Font
Qui en plus permet un appel optimisé de ses typographies sur un site internet
Fontsquirrel
Moins connu et avec des typographies que l’on ne trouve pas ailleurs, ce site est l’un des meilleur allié de l’intégrateur.
La polémique sur les typographies
Pour expliquer les choses correctement, il faut d’abord bien comprendre qu’une typographie est une ressource au même titre qu’une image. Elle a un poids, un temps de chargement, une source. Il faut aussi comprendre que les variantes d’une typographie, sont des ressources. Si vous chargez Roboto en graisse 400, 600 et 800, vous chargez un total de 3 typographies.
A l’heure actuelle où l’aspect graphique est très prisé, on se retrouve souvent avec des designs de site internet ou d’application possédant plus de 3, 4 voire 5 typographies. Or, dans les recommandations de qualité web, l’idéal est de ne pas charger plus de trois typographies. Lorsque l’on cherche un aspect graphique de haute qualité, il devient donc très difficile de respecter cette limite.
Comment associer Design moderne et limitation des typographies ?
Même dans une quête de design moderne et avant-gardiste, il n’est pas impossible de concilier cette limite et ses objectifs graphiques :
Privilégier la communication entre intégrateur et webdesigner : Lorsque l’on crée un nouveau site internet, c’est la première chose à mettre en place. Une bonne communication entre les développeurs et les webdesigner vous évitera un grand nombre de retours, et de ratés. Votre intégrateur aura ses propres solutions à apporter concernant le choix des typographies, en plus de celles proposées ici.
Utiliser les styles du navigateur au lieu de charger les typographies correspondantes : la propriété font-style en CSS permet d’indiquer si une typographie doit être en oblique, en gras.. mais elle utilisera les propriété du navigateur de l’internaute. Les résultats ne seront donc pas aussi précis que sur une maquette, mais le résultat sera là, et vous permettra de travailler avec plus de typographies.
Utiliser des typographies de lecture pré installées sur les ordinateur, pour ne pas avoir à les charger : on pense à Colibri, Verdanna, Tahoma, et toutes ces typographies installées universellement sur les ordinateurs des internautes. Celle-ci ne seront pas chargées et vous permettront d’utiliser d’autres typographies à d’autres endroits.
Vectoriser les typographies de décoration : il se peut que certaines typographies aient un objectif purement décoratif. Comme un mot en fond qui vient accompagner un bloc de texte. Si ces éléments de décoration utilisent une typographie de façon exclusive, vous pouvez les vectoriser et les charger en tant qu’image, ce qui allègera grandement le chargement des ressources du site internet.
En s’essayant à ces solutions, vous pourrez augmenter la marge de manœuvre de votre webdesigner.
