Advertisement
  1. Web Design
  2. Web Typography
Webdesign

Un guide pour sélectionner des polices personnalisées pour votre site Web Guide du débutant pour l'appariement des polices

by
Length:ShortLanguages:

French (Français) translation by Gowsy Thillai (you can also view the original English article)

Au début de la conception web, la typographie était quelque peu négligée. Les choix de polices étaient assez limités et la plus grande décision prise était souvent "serif vs sans-serif". Comment les temps ont changé.

Le site Web moderne offre une énorme quantité de polices à choisir. De plus, le design et le CSS ont évolué au point où la typographie est souvent avant et au centre du look d'un site et une clé de son accessibilité.

En bref, nous sommes passés d'avoir presque aucun choix à une palette d'options presque illimitée. Cela signifie que nous devons prendre les bonnes décisions au début du processus de conception. Dans cet esprit, voici quelques bonnes pratiques à prendre en considération lorsque vous choisissez des polices personnalisées pour votre site. Parallèlement à chaque astuce, nous fournirons quelques exemples en utilisant une sélection de belles polices disponibles avec un abonnement à Envato Elements.

1. La lisibilité en premier et à priori

Que nous parlions de types de caractères pour les titres ou le texte du corps, la lisibilité devrait être une priorité absolue. Ceci est particulièrement important lorsqu'il s'agit de périphériques mobiles. Bien que vous puissiez obtenir un titre à la fois attrayant et facile à lire sur un grand écran de bureau, toutes les sources ne sont pas idéales pour un téléphone ou une tablette. Essayez d'éviter les caractères trop larges, sauf si vous êtes certain que les titres seront conservés à une longueur minimale.

Le texte du corps doit être propre, avec assez de ligne et (le cas échéant) l'espacement des caractères pour donner du contenu à respirer. Les lignes ou les caractères qui sont trop proches ensemble entraîneront un contenu difficile à lire.

Dans l'ensemble, les types de caractères peuvent être amusants et élégants, mais s'assurer qu'ils sont lisibles est la clé.

Appareo Medium

Appareo Medium by kimmydesign
Appareo Medium par kimmydesign

Famille de polices Bw Modelica

Bw Modelica Font Family by bwtype
Famille de polices Bw Modelica par bwtype

2. Utilisez les polices qui font charme à votre public

Une des premières choses que vous devriez faire lors de la mise en place d'un site Web est de réfléchir à votre public cible. Les informations démographiques telles que l'âge, le sexe, le niveau d'éducation et le revenu devraient être des considérations essentielles. Les polices définissent le caractère et constituent une partie importante de l'attrait pour les personnes que vous recherchez.

Par exemple, un site Web pour un concessionnaire automobile de luxe va bénéficier d'une police qui reflète la présence luxueuse du produit. Un animateur d'enfants, d'autre part, sera bien conseillé d'opter pour quelque chose d'amusant et informel.

Cormier

Cormier by MehmetRehaTugcu
Cormier par MehmetRehaTugcu

Lunchbox Regular

Lunchbox Regular by kimmydesign
Lunchbox Regular par kimmydesign

3. Créez une distinction entre le contenu

Si une page comporte plusieurs sections de contenu de texte, l'utilisation d'une bonne police d'en-tête peut aider les utilisateurs à distinguer l'un des suivants. Un mode éprouvé et efficace pour l'accomplir est d'utiliser différents styles de police pour le texte de l'en-tête et du corps. Souvent, nous voyons des sites Web qui utilisent une police serif pour les titres et un sans-serif pour le contenu. Bien qu'il soit parfaitement acceptable d'utiliser le même type pour le texte de l'en-tête et du corps, vous voudrez peut-être considérer un poids ou une couleur de police différent pour vous assurer que les titres se démarquent.

Une autre stratégie à considérer est l'utilisation de glyphes ou de polices d'icônes (bien que l'utilisation directe de SVG pour décorer votre page Web ait tendance à donner plus de contrôle). Par exemple, l'utilisation d'une icône de flèche à côté d'un en-tête l'aidera à se démarquer. Cela peut être configuré via un pseudo sélecteur CSS pour l'afficher automatiquement avant une étiquette de titre spécifique.

Avaline Extras

Avaline Extras by kimmydesign
Avaline Extras par kimmydesign

CA Texteron

CA Texteron by capearcona
CA Texteron par capearcona

Metrisch

Metrisch by formikalabs
Metrisch par formikalabs

4. Les polices doivent se compléter

Un aspect de la grande typographie est que, alors que les polices que vous choisissez peuvent être différentes, elles devraient être adaptées d'une façon ou d'une autre. À titre d'exemple, vous ne voudrez probablement pas utiliser deux types de caractères serif opposés pour le titre et le texte du corps. La manière unique dont les serifs sont conçus pourrait provoquer un peu de choc lorsque plusieurs styles sont combinés.

Pourtant, c'est un peu une zone subjective. Nous avons tous des goûts différents et nous communiquons selon nos propres moyens. Lorsque vous choisissez des polices, utilisez votre propre jugement sur ce qui se passe ensemble.

Bw Glenn Slab

Bw Glenn Slab font family by bwtype
Famille de polices Bw Glenn Slab par bwtype

Bw Glenn Sans

Bw Glenn Sans font family by bwtype
 Famille de polices Bw Glenn Sans par bwtype

5. Limitez le nombre de caractères utilisés

Avec tant de choix charmant, vous pourriez vous sentir comme un enfant proverbiale dans un magasin de bonbons lorsque vous choisissez les polices à utiliser. Mais pour avoir le plus d'impact, vous trouverez le meilleur pour limiter vos designs avec pas plus de deux ou trois caractères. Cela aidera à créer un certain équilibre dans votre conception et, en général, facilitera l'utilisation des utilisateurs.

En outre, le chargement de polices personnalisées prend en charge la bande passante et les ressources du serveur-ce qui pourrait avoir un impact réel sur les temps de chargement. Donc, pour garder les choses à la recherche et à l'exécution à un niveau élevé, limitez le nombre de polices utilisées sur votre site.

Catalina Typewriter

Catalina Typewriter by kimmydesign
Catalina Typewriter par kimmydesign

Fibon Neue

Fibon Neue by hederaedesign
Fibon Neue par hederaedesign

Tirez parti du pouvoir de la typographie Web

La variété des polices disponibles, couplées aux méthodes puissantes pour les mettre en œuvre, ont rendu la typographie Web hors de l'ombre et sous les projecteurs. La typographie offre aux concepteurs la liberté d'exprimer leur créativité à travers plus que des graphiques.

Et, avec plus de 1,300 polices disponibles, Envato Elements est une vaste ressource pour les typographes enthousiastes. Pour le prix d'une souscription mensuelle, vous aurez un accès illimité aux polices et beaucoup plus. C'est une excellente façon de profiter de votre créativité.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.