Vous avez besoin que votre site soit superbe, et la typographie est un facteur clé dans la conception. Où pouvez-vous trouver des polices gratuites en ligne en 2020 qui respectent un niveau de qualité élevé?

Je crois qu’une interface utilisateur ne devrait que ce qui est nécessaire tout en rendant ces éléments nécessaires attrayants. Nous voulons trouver l’équilibre optimal entre minimalisme et attrait visuel.

Gardez les choses simples, mais rendez le simple superbe.

Mais à quoi ressemble exactement simple ?

Enlevez l’encombrement, et la plupart de ce qui reste est la copie de l’interface utilisateur et le contenu du texte. Ce n’est pas excitant, mais soyons honnêtes: c’est l’aspect le plus important de toute application ou site Web. L’information est la raison pour laquelle les utilisateurs utilisent notre application ou notre site Web.

Ainsi, avec la bonne police couplée aux bons styles de police (voir Police vs police: le guide ultime), nous pouvons créer des designs assez simples et attrayants à la fois. Cela met l’accent sur les aspects importants de la conception, utilise moins de ressources et induit la charge cognitive la moins indésirable.

La typographie peut être très puissante.

Mais quels sont les meilleurs sites de polices gratuits?

Où ne pas chercher de polices gratuites

Dribbble, Behance, Gumroad, etc. abritent une tonne de joyaux cachés, mais cela implique de passer au crible de nombreuses ressources numériques, dont certaines sont des projets secondaires incomplets et des versions « lite”. Cela étant dit, assurez-vous de mettre en signet des ressources impressionnantes si vous en rencontrez. Même Instagram pourrait vous surprendre, et Twitter ne devrait pas non plus être négligé.

Cela mis à part, jetons un coup d’œil aux meilleurs sites Web de polices gratuits.

Google Fonts

Le numéro un sur cette liste est évidemment Google Fonts, qui va au-delà de ce que la plupart des alternatives offrent. Tout d’abord, Google Fonts offre un CDN (réseau de diffusion de contenu) rapide et pratique, ce qui facilite grandement l’intégration de polices Web dans des sites Web sans les héberger.

Les polices Google peuvent être sous-définies par script et poids, et nous pouvons également contrôler leur chargement sur le Web en définissant la propriété CSS font-display à partir de la chaîne de requête du code intégré, ce qui améliore les temps de chargement du site Web. (L’article CSS-Tricks sur « Google Fonts and font-display » explique comment.)

Attention, les polices d’auto-hébergement sont meilleures pour la confidentialité (car elles sont sans cuisson) et la vitesse (car elles offrent aux développeurs plus de contrôle). De toute façon, Google Fonts a un répertoire gigantesque.

Marché créatif

Je sais ce que vous pensez: « Le marché créatif n’est pas libre, Daniel! »

Ahhh, mais qu’en est-il de la section des marchandises gratuites? Ce qui est intéressant avec les produits gratuits, c’est qu’il s’agit en fait de polices premium temporairement gratuites. Bien qu’il ne soit pas garanti d’inclure des polices, il est actualisé avec six nouveaux actifs de conception chaque semaine (plus trois autres lorsque vous vous inscrivez et trois autres si vous dépensez un montant X en actifs).

J’ai vérifié la section des produits gratuits sur Creative Market chaque semaine pendant des années, et j’ai construit un grand référentiel de polices de haute qualité qui ne coûtent rien. Les paquets de polices exécutent une offre similaire.

Font Squirrel

Font Squirrel est comme Unsplash mais pour les polices, bien que compte tenu de la durée de son existence (très longue!), peut-être dire que Unsplash est comme la police Squirrel mais pour les images de stock est plus précis! L’un des sites Web de polices gratuites vétérans aux côtés des polices Dafont et Urban, bien que « squirrel” soit meilleur.

Bien que la plupart des sites vétérans semblent un peu dépassés, Font Squirrel a gardé son site Web quelque peu moderne par rapport aux autres. Il dispose également de quelques outils très utiles:

• Générateur de Webfont (convertit les polices TrueType / OpenType en polices web)
• Identificateur de police (pour trouver la police de nom à partir d’une image / capture d’écran téléchargée)

FontSpace

FontSpace est l’un des les sites Web les plus agréables, bien qu’il n’offre que des polices gratuites pour un usage personnel, tandis que Font Squirrel confirme que toutes leurs polices sont gratuites pour un usage commercial. FontSpace peut ne pas toujours convenir.

Par fonts

Ce qui distingue Befonts, c’est son accent sur les polices d’affichage.

Bien que certaines polices n’offrent que des versions lite / demo et ne viennent souvent qu’au format TTF / OTF (ce qui signifie qu’elles sont moins adaptées au Web), Befonts est l’un des rares sites Web à ne pas adopter l’approche « nous avons tout” (ce qui peut parfois être écrasant). En outre, vous pouvez toujours convertir les polices TTF et OTF en polices Web.

Font Shop

Font Shop ne se concentre pas complètement sur les polices gratuites comme Font Squirrel et FontSpace, mais c’est toujours une alternative plutôt décente si les options un à quatre n’avaient pas ce que vous recherchiez. Je trouve que c’est la moins conviviale des options, mais les polices sont relativement de haute qualité.

Mentions honorables

Les sites Web de polices gratuits suivants semblent un peu dépassés, et à vrai dire certaines des polices le font également, mais elles sont sans doute parmi les plus grandes bases de données de polices gratuites disponibles aujourd’hui:

• Dafont
• Polices urbaines
• Fontsly

De quel format de police ai-je besoin ?

Les formats de polices OpenType (OTF) et TrueType (TTF) sont la norme depuis très longtemps, et ils sont encore largement utilisés dans la conception graphique aujourd’hui. Mais cela étant dit, les formats WOFF ont une meilleure compression sur le Web (en particulier WOFF2, qui est désormais pris en charge dans 94,49% des navigateurs Web selon caniuse.com ). En fait, le nouveau code d’intégration des polices Google n’offre plus que le format WOFF2.

Donc, en bref:

• WOFF2 pour les intégrations web
• TTF/ OTF pour tout le reste

De quel style de police ai-je besoin?

De nos jours, cela n’a pas vraiment d’importance car les normes ont été un peu jetées par la fenêtre. À titre d’exemple, les polices Serif peuvent maintenant avoir une apparence moderne (pensez à Medium).

Au lieu de cela, nous devrions nous concentrer davantage sur la clarté:

• Lisibilité (comme il est facile de distinguer les caractères)
• Lisibilité (comme il est facile de lire les phrases dans leur ensemble)

Une partie de cela se résume à la police elle-même, il faut donc être attentif au moment de décider quelles polices utiliser, mais d’autres fois, cela se résume à la façon dont la police est le style (en termes de taille, de poids, etc.).

En cas de doute, le WCAG 2.0/2.1 (Directives d’accessibilité du contenu Web) contient tout ce que vous devez savoir sur la typographie et ses nombreux attributs, tels que l’espacement des lignes, la largeur des lignes, la hauteur des lignes, le dimensionnement des polices, etc.

Conclusion

Les polices sont super utiles, et elles sont souvent tout ce qu’il faut pour obtenir la bonne quantité d’attrait visuel et émotionnel sans s’encombrer de plus en plus. Votre conception a de toute façon besoin de texte, alors pourquoi ne pas en faire l’aspect le plus remarquable?