Sélectionner une page

En matière de conception de sites Web, il y a de nombreux aspects à prendre en considération. La typographie en fait partie et constitue l'un des principaux éléments constitutifs d'une bonne conception.

C'est peut-être le facteur le plus important qui vous aide à connecter le contenu à la conception et à communiquer votre message principal aux clients cibles. Une famille de polices bien choisie permet une expérience de lecture fluide, améliore l'UX et l'accessibilité de votre site Web.

Compte tenu de l'importance de la typographie, dans cet article, nous vous fournirons quelques directives fondamentales qui vous aideront à choisir les meilleures polices pour votre projet de site Web.

Pourquoi vous devriez vous soucier des polices

Tout d'abord, avoir les bonnes polices pour votre contenu est crucial pour l'UX globale de votre site Web. Selon une étude du MIT sur la façon dont les polices et les mises en page affectent les sentiments des utilisateurs, une police combinée à une mise en page bien conçue permet aux lecteurs de se concentrer sur le site, avec un meilleur sens de la clarté.

Au fur et à mesure que vous développez votre stratégie de marque, les polices joueront un rôle essentiel pour attirer l'attention des utilisateurs et créer l'identité de votre marque.

Reconnaissance de la marque – Une police distinctive crée une image de marque pertinente pour vos clients. Il vous aide à vous différencier en incitant vos clients cibles à associer cette police à votre entreprise.

Mettre l'humeur – Prenons l'exemple d'Armani. La police bien connue dans son logo suscite le luxe et l'élégance. Sans même regarder les vêtements, vous pouvez déjà avoir une idée de ce qu'est la marque. La police unique que la marque utilise dans le logo crée l'ambiance pour les consommateurs avant même l'achat du produit.

De nombreuses marques de luxe utilisent la même police. Des images larges et dynamiques associées à des polices parfaitement géométriques suscitent l'élégance et le luxe et la couture. Contemporain, classique et distinctif à la fois.

typographie armani

Source de l'image: Armani

Hiérarchie visuelle – Une bonne hiérarchie de site Web capte l'attention au bon moment sur votre site et les polices aident à déterminer votre hiérarchie en fonction de leur taille, de leur style, de leur couleur et de leur emplacement. Nos yeux remarquent d'abord l'élément dominant d'un design, et la police la plus audacieuse sur votre site vous aidera à transmettre le message le plus important.

typographie vogue

Source de l'image: Vogue

Meilleure lisibilité – Lorsque vous choisissez vos polices, vous devez vous assurer qu'elles améliorent la lisibilité et l'authenticité de votre contenu.

mercedes-benz maybach

Source de l'image: Mercedes-Benz

Trouvez votre inspiration

Avant de choisir vos polices, c'est toujours une bonne idée de vous inspirer en premier. Il existe des bibliothèques de polices qui fournissent des polices gratuites, telles que Google Fonts, Font Squirrel et Font Library.

Les bibliothèques de polices peuvent être très utiles. Bien que, dans la plupart des cas, ils soient limités en termes de sélection de police et de styles. Les bibliothèques de polices payantes comme Adobe Fonts peuvent vous offrir des options de niveau supérieur et des polices haut de gamme.

polices adobe

Source de l'image: polices Adobe

En ce qui concerne l'inspiration derrière vos polices, il est toujours judicieux de suivre les dernières tendances typographiques:

Audacieux et fort – Des polices qui laissent une impression durable sur les utilisateurs. Ils sont parfaits si vous souhaitez mettre en valeur la personnalité de votre marque dès que quelqu'un clique sur votre site. Ces polices sont généralement idéales pour les titres, mais pas pour le corps du contenu du site.

énorme inc

Source de l'image: Huge Inc

Minimal Sans Serif – Des polices simples qui peuvent être vraiment efficaces si elles sont utilisées correctement. Ils suscitent des sentiments de calme et de sang-froid dans leur conception. Vous pouvez les utiliser pour le contenu principal du corps.

libratone minimal sans serif

Source de l'image: Libratone

Nostalgique et vintage – Une police vintage peut rendre votre marque élégante, ce qui est toujours un bon objectif à viser. Vous pouvez combiner ces polices dans le contenu du corps et de l'en-tête. Après tout, la typographie et les polices vintage existent depuis très longtemps et sont souvent un choix à la mode.

récolte de la mer

Source de l'image: Sea Harvest

Évolution des scripts – L'écriture est éternelle! En ce qui concerne les polices de script, tout choix qui correspond à votre style de marque est parfait. Veillez toutefois à limiter l'utilisation de ces polices. Vous n'avez pas besoin de plus de quelques éléments de police de script sur vos pages. Ces polices sont idéales pour les matériaux de marque et les fonds d'écran, pas pour le contenu du site. En tant que tels, ils font souvent partie d'une image raster ou vectorielle.

script progressif

Source de l'image: Booster créatif

Polices de contour – L'aspect moderne de ces polices rendra votre marque attrayante et mature. Ils fonctionnent bien pour les logos et les matériaux de marque. Si vous devez les utiliser pour le contenu, essayez de limiter leur utilisation à pas plus de quelques mots.

arenq "width =" 800 "height =" 450 "srcset =" https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/arenq.png 800w, https: // devrix- devrix.netdna-ssl.com/wp-content/uploads/2020/01/arenq-768x432.png 768w "tailles =" (largeur max: 800px) 100vw, 800px "/>

<p id=Source de l'image: DaFont

Serif à contraste élevé – Ces polices peuvent faire apparaître votre marque forte, brute et à la mode, tout en même temps. Vous les reconnaîtrez par la différence dans les traits, où le supérieur est plus fin que le bas. En raison de la lisibilité limitée, ces polices sont idéales pour les titres ou les logos.

Aviva "width =" 1600 "height =" 691 "srcset =" https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/Aviva.jpg 1600w, https: // devrix- devrix.netdna-ssl.com/wp-content/uploads/2020/01/Aviva-768x332.jpg 768w, https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/Aviva -1536x663.jpg 1536w "tailles =" (largeur max: 1600px) 100vw, 1600px "/>

<p id=Source de l'image: Aviva

Insolite – Polices qui agissent comme la pause parfaite des polices de caractères élégantes et lourdes qui saturent le Web. Ils sont excellents si vous souhaitez mettre en valeur votre marque comme étant amusante et continue.

bamo "width =" 1147 "height =" 558 "srcset =" https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/bamo.jpg 1147w, https: // devrix- devrix.netdna-ssl.com/wp-content/uploads/2020/01/bamo-768x374.jpg 768w "tailles =" (largeur max: 1147px) 100vw, 1147px "/>

<p id=Source de l'image: Behance

Désordonné – Les polices d'apparence désordonnée sont excellentes pour les sites Web de style de vie axés sur l'art, organiques et sains. Mais en raison de leur complexité, ils ne sont pas recommandés pour les titres ou le contenu du corps.

police aloja

Source de l'image: Behance

Lettrage à la main unique – Les polices sur mesure ont quelque chose de spécial, et de plus en plus de marques les utilisent aujourd'hui. Ces polices peuvent ajouter une tonne de personnalité et d'unicité à votre marque.

police de lettrage à la main

Source de l'image: MyFonts

En plus des tendances, n'oubliez pas de prendre des notes de quelque chose que vous avez aimé sur un autre site Web. À cette fin, vous pouvez utiliser une extension Chrome telle que Fontface Ninja pour inspecter, essayer et acheter la police que vous aimez sur un site Web particulier.

fontninja "width =" 1600 "height =" 668 "srcset =" https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/fontninja.png 1600w, https: // devrix- devrix.netdna-ssl.com/wp-content/uploads/2020/01/fontninja-380x160.png 380w, https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/fontninja -768x321.png 768w, https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/fontninja-1536x641.png 1536w "tailles =" (largeur max: 1600px) 100vw, 1600px "/></p>
<p>En outre, si vous souhaitez examiner l'utilisation d'une tendance actuelle des polices Web sur Internet, il existe un autre outil utile appelé FontReach. Tapez simplement la police pour laquelle vous souhaitez obtenir les données d'utilisation, et l'outil recherchera le premier million de sites dans le monde pour cette police de caractères particulière.</p>
<p><img class=

merrieweather scanné

Suivez votre identité de marque

Toute incohérence dans votre marque et les éléments de votre site Web, y compris les polices, peut dérouter vos clients. L'alignement de la typographie sur l'identité de votre marque peut vous aider à communiquer les valeurs de votre entreprise dans la conception de votre site Web.

Tout d'abord, comprenez le caractère de la police

Il existe une multitude de polices parmi lesquelles choisir. Chacun d'eux a ses propres traits de personnalité uniques, tout comme l'identité de votre marque. Vous pouvez commencer par regarder le cinq types de polices les plus courants et leurs caractéristiques.

Serif – Ces polices incluent de petites marques appelées empattements en haut et en bas de chaque lettre. C'est un style qui remonte à l'Empire romain, et l'exemple le plus célèbre se présente sous la forme du Times New Roman, très utilisé dans les magazines et les sites d'information.

Les autres polices serif gratuites qui fonctionnent bien sont:

  • Merriweather
  • PT Serif
  • Affichage Playfair
  • Lora
  • Libre Baskerville
  • Dalle Zilla
  • Vollkorn
  • Texte Noticia
New York Times

Source de l'image: New York Times

Sans Serif – Un type de police n'inclus pas (c'est ce que signifie sans) marquages ​​comme le serif. Ces polices évoquent une sensation minimaliste et propre. Il s'agit d'une famille de polices soignée, moderne et séduisante, largement utilisée dans les secteurs de la technologie, de l'automobile, du B2C, du B2B et d'autres secteurs où l'aspect contemporain est meilleur. L'exemple le plus connu est probablement Helvetica.

Les autres excellentes polices sans-serif gratuites sont:

  • Roboto
  • Open Sans
  • Source Sans Pro
  • Fira Sans
  • Noto Sans
  • Work Sans
  • Arimo
helvetica neue utilisation

Source de l'image: DripPop

Moderne – Les polices modernes telles que Futura, Century Gothic ou ITC Avant Grande créent une ambiance progressive et élégante. Ils sont bons pour la marque de luxe, la mode, les jeux et d'autres industries créatives.

Site Web de VR police moderne

Source de l'image: SandboxVR

Scénario – Ils sont bénéfiques si vous devez communiquer l'élégance, la créativité et la passion. Mais n’en faites pas trop. Les scripts ont un meilleur effet lorsqu'ils sont utilisés uniquement dans les logos, les titres et quelques autres mots CTA au maximum.

police scriptée maptia

Source de l'image: Maptia

Décoratif – Il s'agit du type de police le plus divers. Il implique des formes et des proportions uniques qui donnent un look élégant. Les polices décoratives peuvent varier les unes des autres, mais elles évoquent toutes des sentiments positifs et amicaux. Dans la même veine que les polices de script, elles sont plus efficaces lorsqu'elles sont utilisées à petites doses.

police d'affichage Disney

Source de l'image: Disney

Choisissez des polices qui correspondent à l'objectif de la marque

Vous pouvez facilement saturer votre conception de typographie, surtout si vous ne savez pas ce que vous faites. C’est pourquoi il est important de se concentrer sur le but de votre marque lors du choix des polices de votre site Web. Vous devez évaluer le bon style de police que vous recherchez, ce qui vous aidera à transmettre votre message principal.

Comment choisir les meilleures polices pour votre site Web - Infographie

Lors de l'évaluation de l'objectif de votre marque, demandez à (votre équipe) les éléments suivants:

  • Quelle est la nature de notre marque? – Chaque police fait ressortir une émotion différente, c'est pourquoi vous devez choisir la police qui communique le sentiment qui représente le mieux votre marque.
  • Notre entreprise est-elle un projet à long terme ou à court terme? – Vous avez besoin d'une police adaptée à votre projet. Par exemple, si vous avez besoin d'une police pour un projet artistique, la typographie décorative est un bon choix. Ou, si vous possédez un site Web d'institution financière, vous devez communiquer la sécurité et la fiabilité par le biais de votre choix de police.
  • Sommes-nous conventionnels ou devons-nous nous démarquer? – Une approche classique via des polices telles que Times New Roman ou Garamond démontre la crédibilité et la conventionnalité. Ou, si vous voulez faire une déclaration, les polices d'affichage qui incluent des éléments uniques sont votre meilleur pari.
  • Sommes-nous visuels ou textuels? – Décidez comment vous souhaitez communiquer des informations sur votre site. Vous souhaitez rediriger visuellement les utilisateurs vers les informations les plus importantes, ou vous fier à votre choix de polices pour une meilleure hiérarchie de contenu? Choisissez vos polices de caractères en conséquence.

Vérifiez la langue

Si vous travaillez à l'international, vous souhaiterez que votre site Web atteigne des personnes sur tous les continents. Ainsi, même si vous fournissez du contenu dans une seule langue, de nombreux utilisateurs utiliseront la fonction de traduction de Chrome pour en savoir plus sur votre entreprise.

L'option de traduction automatique peut modifier votre mise en page entière, où les caractères modifiés de manière inégale ressortent du reste. C'est pourquoi vous avez besoin d'une police qui prend en charge plusieurs langues, ce qui garantit que la conception de votre site Web restera cohérente.

police allemande audi

Source de l'image: Audi

En fait, pour résoudre ce problème, Google a développé la famille de polices Noto, qui prend en charge toutes les langues écrites dans le monde.

Noto "width =" 1600 "height =" 829 "srcset =" https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/Noto.png 1600w, https: // devrix- devrix.netdna-ssl.com/wp-content/uploads/2020/01/Noto-768x398.png 768w, https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/Noto -1536x796.png 1536w "tailles =" (largeur max: 1600px) 100vw, 1600px "/></p>
<p>Vérifiez si les polices de votre choix comprennent des caractères «latin étendu» (Ă, Ď, Ĵ, Œ) utilisés dans de nombreux pays européens. Il existe de nombreuses familles de polices qui incluent une prise en charge multilingue, telles que Alegreya, Nunito, Roboto ou Quattrocento. Ils comprennent une vaste gamme de caractères, et certains d'entre eux prennent également en charge les lettres cyrilliques.</p>
<p>Dans tous les cas, assurez-vous de ne pas inclure de tels caractères et ensembles si votre contenu n'en a pas besoin en premier lieu. D'après notre expérience, ne pas utiliser de caractères latins étendus peut réduire considérablement la taille de police finale et augmenter la vitesse du site en conséquence.</p>
<p><img class=

Merriweather et Lato – Un mélange de polices net et professionnel. C'est une combinaison polyvalente, la police Merriweather aidant votre marque à paraître plus attrayante, tandis que Lato respire la fiabilité.

lato merriweather

Amatic SC et Josefin Sans – C'est une combinaison idéale si vous possédez une marque artistique. Fonctionne mieux sur un fond blanc ou clair. Gardez à l'esprit que vous ne devriez pas aller trop loin avec cette combinaison. Cela rendra votre site difficile à lire.

amatic "width =" 820 "height =" 554 "srcset =" https://devrix-devrix.netdna-ssl.com/wp-content/uploads/2020/01/amatic.png 820w, https: // devrix- devrix.netdna-ssl.com/wp-content/uploads/2020/01/amatic-768x519.png 768w "tailles =" (largeur max: 820px) 100vw, 820px "/></p>
<p><strong>PT Sans et PT Serif</strong> – Les deux polices sont lisibles et vous pouvez les utiliser pour du texte abrégé et des articles de blog, ainsi que pour les pages de destination.</p>
<p><img class=

Lorsque vous comptez sur des combinaisons et des combinaisons de polices, tenez compte de votre entreprise et du secteur dans lequel vous vous trouvez. Gardez vos combinaisons de polices simples et pertinentes pour votre public cible.

Conseils bonus

Voici quelques conseils supplémentaires qui vous aideront à choisir et à utiliser des polices plus efficaces sur votre site Web.

  • Choisissez des polices complémentaires: Vous devez vous assurer que chaque police aura une ambiance complémentaire avec l'autre police de caractères et le reste de vos créations. Comme avec les gens, les opposés peuvent également attirer en ce qui concerne les polices. Donc, si l'une de vos polices a une personnalité distinctive, vous pouvez la combiner avec une police plus neutre pour un meilleur équilibre.
  • Maintenir une hiérarchie: Les meilleurs exemples de hiérarchie de polices sont les journaux et les magazines. Ils associent les polices pour divers composants textuels tels que les titres, les copies, les sous-titres et les légendes d'images. La taille de la police, le poids et l'espacement aident également la hiérarchie qui permet aux utilisateurs de naviguer beaucoup plus facilement.
  • Pensez au contexte: Votre conception et le contexte du site doivent déterminer votre choix de polices. Tout doit être lisible quelle que soit la taille de la police. Le contexte de votre conception doit correspondre aux caractéristiques de la personnalité de votre marque. Cela devrait également s'appliquer aux polices de caractères, en tant que partie de leur caractère.
  • Établir un contraste: Vous pouvez obtenir un meilleur contraste de police grâce à leur poids, leur espacement, leur taille, leur style, leur couleur, etc. Le contraste peut mettre en évidence le rôle distinctif de chaque police et la faire ressortir des autres éléments de votre page.
  • Ne pas coupler des polices trop similaires: Même si vous avez eu les meilleures intentions, les utilisateurs pourraient ne pas penser la même chose et ils trouveront l'appariement conflictuel. Pour tester si vos polices sont trop similaires, placez-les côte à côte sur votre page et plissez les yeux lorsque vous les regardez. S'ils se ressemblent, vous devez réfléchir aux différences entre les polices et savoir si vous devez utiliser une autre police pour les associer.
  • N'utilisez pas trop de polices: En règle générale, vous ne devez pas utiliser plus de deux ou trois familles de polices sur votre site Web. Vous devez réfléchir à vos choix. Chaque police doit avoir un rôle défini sur votre site, et avec pas plus de trois polices différentes, tout sera beaucoup plus harmonieux et ordonné sur votre site Web.

Emballer

Les polices sont comme l'air que nous respirons – les gens ne les remarquent pas tant que quelque chose ne va pas. Le choix des polices pour votre site Web peut avoir un impact significatif sur l'ensemble de votre stratégie de marque.

Lorsque vous essayez de déterminer les polices qui fonctionnent sur votre site Web, pensez toujours à la personnalité de votre marque et à l'objectif de conception. Une fois que vous savez quelle est votre direction générale, vous pouvez choisir les meilleures combinaisons de polices pour votre site Web. N'oubliez pas, il existe d'innombrables combinaisons et options, alors choisissez toujours celles qui iront de pair avec le ton de votre marque.