Typographie 101: Comment choisir les bonnes polices pour votre site Web

Maintenant que nous savons à quel point une bonne typographie est importante pour le succès de votre magasin, il est temps d’entrer dans les détails de la sélection des bonnes polices pour votre magasin. Avec autant de polices disponibles, il peut être difficile de savoir par où commencer. Mais ne vous inquiétez pas, car c’est la typographie 101 et la classe est officiellement en session.

Dans cet article, nous examinerons certains aspects à prendre en compte lors du choix du bon style de police pour votre magasin, ainsi que quelques faux pas typographiques à éviter.

Leçon 1: Lisibilité et lisibilité

La lisibilité et la lisibilité sont deux éléments à prendre en compte lors du choix de la police de caractères de votre boutique. Bien que la lisibilité et la lisibilité semblent très similaires, elles sont en fait assez différentes. Mais ensemble, ils travaillent pour communiquer efficacement le message de votre marque.

Lisibilité

La lisibilité est être capable de distinguer des formes de lettres spécifiques les unes des autres. (Pensez à une forme de lettre comme la structure et la forme spécifiques d’une lettre dans cette police, avec la largeur et l’espacement corrects, et tous les détails tels que des empattements ou des motifs.)

Pour un exemple de bonne ou mauvaise lisibilité, regardons la police de caractères Homestead. Lorsqu’il est utilisé dans un en-tête, vous pouvez facilement voir tous les détails complexes de chaque forme de lettre.

C’est sacrément lisible et attrayant. Cependant, en tant que corps de texte, remarquez à quel point les bords sont flous et comment vous ne pouvez plus voir les rayures et les points de chaque lettre. En d’autres termes, lorsque Homestead a été réduit à une taille plus petite, il est devenu illisible.

Étant donné que la copie du corps a tendance à être plus petite, une option plus lisible serait une police aux lignes plus simples et épurées.

lisibilité2

Comme vous pouvez le voir, en optant pour l’une de ces polices de caractères plus simples, nous avons amélioré la lisibilité à pas de géant.

Pour une lisibilité optimale dans votre boutique en ligne, nous vous recommandons d’utiliser l’une des polices suivantes pour la copie du corps:

  • Arial
  • Verdana
  • PT Sans
  • Times New Roman
  • Texte cramoisi
  • Podkova
Lisibilité

La lisibilité fait référence à la manière dont le texte est organisé de manière à ce que l’œil puisse facilement lire le contenu.

Un certain nombre de choses affectent la lisibilité du texte, notamment:

  • Hauteur de la ligne: L’espacement entre les lignes de texte. S’il n’y a pas assez d’espace entre les lignes, non seulement cela n’aura pas l’air aussi beau, mais les lecteurs perdront plus facilement leur place.
  • L’espacement des lettres: L’espacement entre les lettres d’un mot ou d’un groupe de mots. Un espacement trop ou trop petit peut affecter la lisibilité.
  • Taille du texte: Si la taille du texte est trop petite, il peut devenir assez poilu à lire. (Pensez à un manuel universitaire ancien et dense.) Bien que la taille dépend souvent de ce qui fonctionne avec la conception, une bonne règle est de ne jamais être inférieure à 12 pixels.
  • Couleur: Il est important de penser au contraste des couleurs lorsqu’il s’agit de la lisibilité. Pour en savoir plus sur la couleur, voici quelques exemples:
En relation :  Le guide pour diversifier intelligemment les produits de e-commerce

couleur1couleur2

Le texte rouge vif peut fatiguer le lecteur.

Un faible contraste peut rendre les mots difficiles à voir.

couleur3couleur4

Un contraste élevé peut faire «vibrer» les couleurs.

Un bon contraste aide le lecteur à accéder facilement au contenu.

Leçon 2: Pertinence

Tout comme vous ne porteriez pas une vieille paire de pantalons de survêtement à l’inauguration présidentielle, vous ne voulez pas habiller votre site Web avec une police qui contredit le ton de votre marque ou de votre secteur. Comme mentionné dans notre précédent article sur la typographie, les polices que vous choisissez ont un impact énorme sur la voix et l’humeur générales de votre site Web. Ainsi, lors de la sélection d’une police, une bonne règle de base est de choisir celle qui correspond aux attentes de votre public cible.

Par exemple, lorsque vous visitez un site d’actualités comme Le Texas Tribune, vous vous attendez à voir une police qui commande un sentiment d’autorité. Le Texas Tribune a judicieusement choisi la police Georgia pour créer ce sentiment.

TexasTribune avec la Géorgie

Mais regardez ce qui se passe lorsque je change la police en un script appelé Grand Hotel:

Texas Tribune avec police Grand Hotel

Yikes, non? Alors que Grand Hotel pourrait travailler sur un design plus ludique, il dépeint la mauvaise humeur pour le Texas Tribune. (Pour revenir à notre analogie précédente, ce serait certainement porter des pantalons de survêtement à la Maison Blanche.)

Leçon 3: Association de polices

L’association des polices de caractères n’est pas une science exacte, mais il existe des principes directeurs qui peuvent vous aider à trouver des looks complémentaires. L’une de ces règles est que les opposés s’attirent et doivent être jumelés. Deux polices similaires seront en fait en concurrence les unes avec les autres et stresseront les yeux de vos lecteurs.

Voici un exemple de cette règle en action:

les contraires s'attirent

Sur la gauche, nous avons deux polices de caractères qui sont toutes deux des polices à empattement dalle. Bien qu’il s’agisse de polices techniquement différentes, leurs similitudes inhérentes créent une tension visuelle désagréable à voir.

Sur la droite, nous avons une police avec empattement dalle et une police avec empattement, et ouf, quelle différence. Immédiatement, vous pouvez voir que la tension a été soulagée. En effet, l’association de polices de caractères contrastées permet à chaque police de parler tout en gardant la paix.

Voici d’autres exemples d’opposés qui se complètent:

contrastes

Leçon 5: Typographie faux pas

S’il y a un livre de règles strict et rapide pour la typographie, ces faux pas seraient dans le premier chapitre. Voici quelques choses que vous ne devriez JAMAIS faire en matière de typographie:

En relation :  5 qualités d'une conception de logo efficace
Ne jouez pas avec les proportions

Une bonne police de caractères doit être laissée seule. Bien qu’il soit correct de rendre une police plus grande ou plus petite, elle ne doit jamais être compressée, étirée, biaisée ou manipulée d’une manière qui dérange ses proportions d’origine.

fauxpas1
N’utilisez jamais ces polices

Malheureusement, il existe quelques polices de caractères qui ont été abusées, surutilisées et doivent être excusées. Ils sont si mauvais qu’ils ont l’honneur douteux d’obtenir une réaction viscérale de la plupart des designers (sérieusement – j’ai vu des designers vomir) et des non-designers. Pour votre bien et celui de ceux qui vous entourent, vous voudrez éviter ces polices.

Comic Sans

Comic Sans est une police de caractère de style bande dessinée décontractée créée pour un usage informel. Largement utilisé à mauvais escient, Comic Sans donne désormais un air particulier de non-professionnalisme à tout ce qu’il touche.

Si vous recherchez une police de caractères amusante et enfantine, essayez plutôt ces alternatives:

Papyrus

Le papyrus a été créé pour ressembler à un texte manuscrit sur du papier de papyrus égyptien antique. Comme Comic Sans, il a été victime d’une surutilisation et d’une mauvaise utilisation. L’utilisation de cette police dégage désormais une ambiance peu sophistiquée et inauthentique qu’aucune entreprise ne voudrait jamais sur son site.

Si vous envisagiez Papyrus, voici quelques alternatives qui vous rendront beaucoup plus heureux:

L’école est finie. Il est temps de s’habiller pour réussir!

Bien que le choix d’une police puisse être une tâche intimidante, vous connaissez maintenant quelques directives simples qui peuvent vous aider à faire le bon choix pour votre magasin. Si vous êtes en train de sélectionner votre typographie ou si vous envisagez une refonte à l’avenir, nous vous encourageons vivement à explorer le large choix de polices à votre disposition.

Voici deux ressources fantastiques pour télécharger des polices de caractères:

Mes polices

Mes polices a une grande sélection de polices que vous pouvez acheter pour votre magasin. C’est en fait une ressource préférée pour les polices de caractères de haute qualité.

Polices Google

Polices Google est une ressource numéro un pour les polices commerciales gratuites et prêtes pour le Web. Toutes les polices disponibles ici peuvent être téléchargées et utilisées gratuitement.


Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.