Il existe depuis longtemps une théorie selon laquelle les polices serif sont destinées aux projets imprimés et les sans serifs à la conception de sites Web. Mais avec plus d'écrans haute définition et de superbes options de types disponibles, cette règle n'est plus vraiment une règle.
Que vous préfériez les empattements ou les empattements (ou une combinaison des deux), le choix des polices de caractères pour les projets de conception numérique doit avoir pour objectifs principaux la lisibilité et la lisibilité. Simple, vous devez choisir des polices nettes et faciles à lire à l'écran. Cela est en partie lié à l’utilisation, telle que la taille et l’emplacement du texte, puis au style de police que vous choisissez.
L'affaire Sans Serif
Vous êtes probablement nombreux à ne pas être satisfait de la prémisse ici. Vous êtes certain que les sans empattements sont les meilleurs pour la conception de sites Web. Et c'est peut-être vrai il y a quelques années.
Il existe encore quelques endroits et endroits où les empattements sont généralement préférés:
- Pour les écrans basse résolution
- Pour les nouveaux lecteurs, tels que les enfants
- Avec beaucoup de couleurs ou des motifs peu contrastés
- Texte exceptionnellement petit ou étroit
Entrez les affichages HD
L’un des plus grands détracteurs de mythes en matière de création de sites Web est le suivant: vous devez utiliser des polices de caractères sans empattement. est l'émergence des écrans haute définition. Plus de points par pouce d’écran est corrélé à des détails plus riches pour tout, y compris la typographie.
Pense-y de cette façon. Les livres sur de nombreuses liseuses électroniques et tablettes sont définis dans des polices serif. Et ils sont parfaitement faciles à comprendre. En effet, la résolution de l'écran est suffisamment nette pour gérer les lignes et les traits de la police de caractères.
Déjà en 2012, Jakob Nielsen du groupe Nielsen Norman, qui met l'accent sur l'expérience utilisateur, la recherche et la formation, a indiqué que de meilleurs écrans modifient le paysage des directives de typographie pour la conception de sites Web. Voici la conclusion de cette étude:
«L’ancienne directive en matière d’utilisation de la typographie en ligne était simple: respectez les polices sans empattement. Parce que les écrans d’ordinateur étaient trop moche pour rendre correctement les empreintes, essayer des empreintes de type corps à la taille du corps du texte produisait des lettres floues.
«Malheureusement, la nouvelle directive n’est pas aussi claire que l’ancienne. Les recherches sur la lisibilité ne permettent pas de déterminer si les polices empattées sont vraiment meilleures que les polices sans empattement.
«Presque tous les principaux journaux imprimés, magazines et livres utilisent le serif. Les gens sont donc plus habitués à lire des textes longs dans ce style. Cependant, compte tenu des données de la recherche, la différence de vitesse de lecture entre serif et sans serif est apparemment minime. Par conséquent, il n’existe aucune directive forte en matière de convivialité en faveur de l’utilisation de l’un ou l’autre, vous pouvez donc choisir en fonction d’autres considérations, telles que l’image de marque ou l’ambiance communiquée par un style typographique particulier.
Mais nous commençons tout juste à voir de plus en plus de designers adhérer à cette idée.
Lisibilité
La lisibilité est la capacité d'être lu facilement. Un certain nombre de facteurs contribuent à la lisibilité, notamment l’intérêt (ou non) du contenu et son apparence réelle lorsque rassemblés sous forme de bloc de texte. C’est ce qui compte vraiment pour nous en matière de typographie.
En règle générale, vous pouvez regarder de près quand il s'agit d’esthétique et de lisibilité. Pouvez-vous dire ce que le site Web essaie de communiquer en un coup d'œil? Si oui, c'est lisible.
Il existe un certain nombre d'outils de lisibilité que vous pouvez utiliser pour déterminer le degré de lisibilité de votre texte. Bien qu'il n'y ait pas de science exacte derrière la lisibilité, ces outils constituent une bonne base pour vous aider à démarrer.
- L'outil de test de lisibilité: insérez une URL et testez la lisibilité du texte.
- Score de lisibilité: Entrez du texte et obtenez un score basé sur sa lisibilité.
- Lisibilité: transforme n'importe quel site Web en une vue de lecture propre.
Lisibilité
La lisibilité fait référence à la qualité du lettrage et s’il est suffisamment clair et distinct pour être lu. Une bonne typographie doit être facile à lire sans effort. La sélection de la police de caractères est directement liée à la lisibilité. (Pensez à l'écriture manuscrite et comment on l'appelle lisible ou non; c'est exactement la même chose avec le lettrage numérique.)
Pour ce qui est de la lisibilité, chaque lettre doit se distinguer clairement des autres. Les facteurs contributifs incluent tout, de la forme réelle du lettrage à l'épaisseur fine en passant par le bas, l'espacement en passant par l'utilisation d'empattements ou d'autres ornements.
En règle générale, les polices les plus lisibles ont des caractères plus ronds et distincts; hauteurs x plus grandes; un espacement adéquat et constant des lettres; et une nature simple.
Conseils de sélection de police
Êtes-vous convaincu d'essayer une police de caractères sans empattement pour votre prochain projet de conception de site Web? Voici quelques conseils pour choisir la meilleure option sans serif.
- Sélectionnez des formes de lettre distinctes: Éloignez-vous du moniteur et regardez le type de caractère sélectionné. Pouvez-vous composer des lettres individuelles avec facilité? Le choix d'une police de caractères avec des formes de lettre distinctes facilite la lecture, quelle que soit la taille de l'écran, notamment les petits ou les très grands écrans.
- Optez pour les poids moyens: Polices de caractères avec des largeurs de trait régulières. Des polices trop épaisses ou trop minces - vous vous souvenez de la controverse entourant iOS 7 d'Apple? - peut être difficile à lire. Pour le corps du texte, restez quelque part au milieu avec une épaisseur de trait moyenne et universelle. Alterner les traits épais et fins peut également causer certains problèmes.
- Recherchez des caractères de qualité: Le téléchargement de toute ancienne police pour le Web peut ne pas donner la netteté dont vous avez besoin pour vos projets. S'en tenir à une police de caractères d'un fournisseur réputé. Et regardez-le attentivement sur l'écran. Pouvez-vous le gonfler jusqu'à 200 ou 500 fois la taille réelle et toujours obtenir un bon rendu? Avec des outils tels qu'Adobe Typekit et Google Fonts, il existe un grand nombre de polices de caractères disponibles sur le Web qui auront fière allure et contribueront à créer une impression distincte pour votre projet.Bien que vous ne puissiez pas toujours faire correspondre exactement les polices de caractères pour les projets imprimés et numériques, recherchez un style identique pour souligner la cohérence de votre image de marque.
- Les polices ornées doivent être utilisées avec parcimonie: Les polices de caractères ornées peuvent être un excellent ajout aux projets, mais utilisez-les intentionnellement et avec un but. (Ils manquent souvent de lisibilité ou de lisibilité.)
- Recherchez des options de type distinctes: Choisissez une police de caractères moins ennuyeuse. Choisissez une police de caractères appartenant à une famille solide, dotée de nombreux grammages et options telles que les options gras, italique ou condensé.
- Définir la bonne humeur: Quel que soit le style de police choisi, assurez-vous qu'il correspond à l'ambiance de votre projet. Il y a beaucoup de facteurs. En savoir plus sur eux dans un précédent article de Design Shack.
- Mélanger et assortir: Utilisez une combinaison de caractères serif et sans serif dans le même dessin, avec un style pour l'en-tête et l'autre pour le corps. Mais essayez de faire le contraire de ce à quoi vous pourriez vous attendre. Utilisez le sans serif pour les textes plus gros tels que les titres, et utilisez le serif pour le corps du texte.
Conclusion
Que pensez-vous de l'utilisation de polices de caractères sans empattement sur le Web? Êtes-vous prêt à essayer? Les exemples cités dans cet article montrent qu’une bonne typographie Web ne doit pas nécessairement être sans empattement.
Assurez-vous de cliquer sur les exemples et les liens pour vraiment comprendre comment les concepteurs utilisent les polices serif de différentes manières et avec un grand succès.