Il n'y a aucun moyen de quantifier toutes les options de polices disponibles pour les concepteurs de sites Web. Presque tous les jours, une nouvelle police de caractères apparaît dans ma boîte de réception ou dans mon flux Twitter. Mais toutes ces polices, quelle que soit leur beauté, ne conviennent pas à la conception d'un site Web.
Lorsqu'il s'agit de choisir la police idéale, vous devez prendre en compte une variété d'éléments, y compris la compatibilité, le temps de chargement et les objectifs de conception. Nous disposons aujourd'hui de sept astuces pour vous aider à sélectionner et utiliser la meilleure police Web pour votre projet de conception.
1. Commencez par les fondamentaux
Travailler avec des polices Web est comme n'importe quel autre projet de typographie. Cela commence par les fondamentaux.
- Serif contre sans serif: Il existe d'autres catégories de types, mais en termes de conception de sites Web, presque chaque projet est basé sur l'une de ces options. (Et les caractères sans empattement sont le choix dominant.)
- Crénage, suivi et conduite: La quantité d'espace entourant le texte peut être tout aussi importante que la police de caractères. Le crénage est l'espace entre les paires de lettres; tandis que le suivi est l'espace entre les caractères dos groupe. L'interligne est la quantité d'espace entre les lignes de texte (hauteur de ligne).
- Lisibilité: Lorsque vous travaillez avec du texte pour le Web, le nombre de caractères par ligne peut être important. Pensez à la taille de l'écran où le texte apparaîtra et concevez-le pour qu'il soit facile à lire.
- Césure: Juste ne le fais pas. Les traits d'union créent un désordre de texte à l'écran.
- Alignement et justification: Cela s'applique généralement aux gros blocs de texte, mais pensez à l'alignement du texte à l'écran (gauche, droite ou centre) et à la question de savoir si les blocs de texte présentent des bords irréguliers ou sont pleinement justifiés.
- Nombre de caractères: Comme pour tout projet, pas plus de trois polices de caractères? sauf si vous avez une très bonne raison.
- Rappelez-vous le contraste: Quel que soit le type de caractère que vous sélectionnez, le contraste entre le texte et l’arrière-plan n’est pas suffisamment contrasté pour qu'il soit lisible. Les éléments qui contribuent au contraste incluent la taille, l'épaisseur du trait, la couleur et l'espace.
2. Considérer la compatibilité
Une des choses qui rend difficile la typographie Web est que les navigateurs changent constamment et obtiennent des mises à jour. Vous voudrez sélectionner une police de caractères compatible avec les interfaces Web modernes utilisées sur les ordinateurs de bureau et les appareils mobiles.
Cela semble facile, non? Il peut être nécessaire de tester plusieurs appareils pour trouver un produit qui fonctionne de manière transparente.
Vous aurez encore plus de chance si vous vous en tenez à une famille de types conçue pour le Web ou en utilisant les options de Google Fonts ou la règle @ font-face. (Vous pouvez en apprendre plus sur ce dernier et son fonctionnement grâce à Six Révisions.)
3. Utiliser un service
À propos de Google Fonts, de nombreux concepteurs ont opté pour un service de polices Web. C’est une bonne idée qui peut résoudre un grand nombre de problèmes techniques éventuels.
Outre Google (probablement l'option la plus populaire), il existe une variété d'autres choix. Bien que Google Fonts soit un service gratuit, les niveaux de tarification pour les autres varient des niveaux d’option gratuits aux kits plus coûteux.
- Adobe Typekit
- Fonts.com
- Webtype
- Fontspring
Chacun de ces services comporte des milliers d'options de types et est relativement facile à utiliser. L’un des avantages de l’une de ces options est qu’elles peuvent fournir une bibliothèque de types très étendue sans avoir à dépenser de l’argent pour un grand nombre de polices individuelles. L'inconvénient est que la plupart des polices ne sont disponibles que pour une utilisation en ligne et non dans des projets imprimés.
4. Soyez attentif au ton et au message
Commencez avec le type. Parfois, la sélection des polices intervient presque après coup; les choses se compliqueront plus facilement si vous déterminez d’abord les options de type. Ensuite, réfléchissez à la manière dont le texte va jouer avec d’autres éléments de conception tels que la couleur et les images.
Le choix d'une police de caractères peut entraîner une surcharge visuelle de votre cerveau avec tous les choix disponibles. Il est plus facile de naviguer dans tout le fouillis de polices si vous avez une idée de ce que vous recherchez dès le départ.
Il est essentiel de veiller à ce que la police de caractère sélectionnée corresponde à la tonalité et à la messagerie du projet sur lequel vous travaillez. Voici quelques questions pour vous aider à le tracer:
- Le projet est-il formel ou informel?
- Le texte doit-il être en gras ou plus clair?
- Est-ce que la police de caractères est grande ou petite?
- Comment va-t-il s'agencer avec la couleur ou les images?
- Est-ce que l'humeur du lettrage correspond aux mots lus?
5. Il n'y a pas de mal à regarder les suggestions
L'une des choses que Google Fonts fait exceptionnellement bien est de permettre à l'utilisateur de regarder les combinaisons de polices et de suggérer des combinaisons de polices. Il n'y a pas de honte à utiliser l'une de ces options. (La bibliothèque Adobe Typekit permet également aux utilisateurs de sélectionner les polices de caractères en fonction de leur utilisation. Consultez les outils situés à droite de l'écran pour obtenir des conseils.)
Le couplage des polices peut être difficile. Ce n'est pas un point fort pour chaque designer. Obtenir de l'aide est OK. Méfiez-vous des combinaisons de polices trop utilisées; la première option que vous voyez peut être celle qui est la plus utilisée.
Rappelez-vous vos principes de base en matière de couplage des polices et recherchez des formes de lettre présentant une humeur, un trait et une hauteur x similaires. Réfléchissez à la forme et à l'inclinaison des lettres et optez pour des polices aux contours similaires. C'est une bonne idée de mélanger les styles et de sélectionner un couple serif et sans serif ou une police de caractères sans serif et nouveauté.
6. Pensez aux temps de chargement
Si une police ne se charge pas rapidement, recherchez une autre option. Les utilisateurs n'ont aucune patience pour les sites Web lents. Quelle que soit la qualité de la police, celle-ci doit être chargée à une vitesse proche de la vitesse de l'éclair pour être efficace.
Lorsque vous sélectionnez une police, testez-la pour la vitesse. (La plupart des types de services vous y aideront, y compris Google.) Ensuite, réfléchissez à d'autres moyens de réduire les temps de chargement au minimum.
- Utilisez un nombre limité de caractères.
- Pour chaque caractère, sélectionnez uniquement les styles que vous prévoyez d'utiliser.
- Choisissez uniquement les langues que vous utiliserez pour une police spécifique.
7. Faites votre choix
Vous n'avez pas besoin d'utiliser Helvetica, Arial ou Droid Sans pour créer une typographie Web. Prenez votre temps et soyez prudent lorsque vous sélectionnez une palette de polices.
Typewolf est une excellente ressource pour éviter les polices populaires. Le site classe le top 10 des options les plus populaires dans une variété de catégories - serif, sans serif, slab serif, monospace, etc. Il propose également des listes amusantes d’alternatives aux polices de caractères populaires telles que celles mentionnées ci-dessus.
Bonus: 10 grandes polices Web
Abril Fatface
Josefin Slab
Lato
Ligue Gothique
Open Sans
PT Sans
Roboto Slab
Impasse
Ubuntu
Vollkorn
Conclusion
La sélection d'une police Web parfaite peut être l'un de ces processus incroyablement enrichissant (lorsque vous trouvez la combinaison parfaite) ou vous donne envie de vous tirer les cheveux en main - lorsque rien ne semble fonctionner. Mais vous pouvez utiliser toutes les options disponibles pour trouver une police de caractères et un système adaptés à vos projets de conception de sites Web.
Comment choisissez-vous une police Web? Existe-t-il un processus différent des étapes décrites ci-dessus? Nous aimerions que vous partagiez également vos conseils dans les commentaires.