Sélectionner une page
Design Graphique

Comment choisir la bonne typographie pour votre web design ?

Publié le 11 mars 2021
typrographie web design
choisir la bonne typographie

En 2021, alors que nous parcourons d’innombrables flux de réseaux sociaux et que nous parcourons les e-mails lors de nos déplacements quotidiens, nous ne pensons probablement pas souvent à l’importance de choisir la bonne typographie pour le web design de son site internet.

Pourquoi choisir la bonne typographie pour la conception Web est vraiment important ?

Ce qui pourrait être encore moins sur notre radar, c’est qu’il y a une certaine science derrière la façon dont la présentation des mots peut réellement avoir un effet sur ce que nous ressentons. Nous approfondirons cela un peu plus tard.

Notre guide simple étape par étape, nous l’espérons, vous aidera à trouver les meilleures polices pour tous vos projets de conception web design futurs personnels et professionnel.

Étape 1: Fonctionnalité et émotion

Synonyme de la façon dont l’hémisphère gauche de notre cerveau est responsable de la structure logique et stratégique de nos vies, et que la droite favorise la gestion des côtés créatifs et émotifs de nous tous, nous devrions également penser à choisir la bonne typographie en tenant compte de ce qui suit. Et oui, attendez-vous à plus d’analogies au fur et à mesure que nous vous guiderons à chaque étape.

Il est également utile de mentionner que nous avons noté certains des principes clés de la hiérarchie visuelle en web design, ce qui est un excellent point de départ avant de décider quelle est la bonne typographie à choisir en 2021 et au-delà.

Avec le grand nombre de polices disponibles en ligne, il est facile de tomber dans un trou noir de la navigation de polices pendant des heures.

Afin de simplifier le processus, il est bon de vous poser quelques questions, avant que votre instinct ne commence à prendre le volant :

typographie agence web
choisir la bonne typographie

Votre typographie est-elle fonctionnelle?

Il est toujours utile de noter à quel point votre utilisation de la typographie sera vraiment pratique pour votre web design. En vous demandant « Est-ce que c’est lisible? » Cela semble être un sentiment évident, mais les meilleurs designers ont encore du mal à trouver une bonne typographie unique et personnalisée, ce qui donne la clarté que les choix de polices classiques ont apporté aux gens pendant des décennies et quelque chose de nouveau. 

Par exemple, John Boardley salue Helvetica comme: «  Le pantalon de survêtement des polices de caractères  », il y a donc toujours un argument clair selon lequel les polices classiques sont toujours très demandées par les utilisateurs qui souhaitent leur familiarité et leur facilité d’utilisation.

Kevin Larson, un psychologue de l’équipe Microsoft, a mené une étude sur la manière dont la typographie et la façon dont elle est présentée a un effet sur les lecteurs et leur engagement avec le texte. Il a présenté deux versions différentes d’un article écrit par le New York Times à deux groupes distincts de 10 personnes.

  • Le groupe 1 a reçu une page d’écriture claire et bien formatée, avec une police agréable à l’œil et obtenant certainement des points brownie pour sa présentation.
  • Le groupe 2 a reçu une page d’écriture mal formatée, ce qui a provoqué des froncements de sourcils, de la frustration et a mis beaucoup plus de temps au groupe pour digérer l’information.

Pendant ce temps, les participants qui lisaient le contenu de la bonne mise en page de lecture, avaient l’impression que la lecture prenait moins de temps et se sentaient mieux.

Traiter la présentation des mots avec soin et réfléchir à des éléments tels que la mise en forme et l’espacement peuvent vraiment faire toute la différence pour vos clients en web design. En 2021, avec notre attention occupée chaque jour par les écrans et les informations, il est d’autant plus important de vraiment faire ressortir le texte et d’attirer les clients.

Quels sentiments souhaitez-vous évoquer ?

Dans les mots de la graphiste chevronnée Paula Scher, «Les mots ont un sens, le type a un esprit». Créer une «émotion» ou un «sentiment» avec la typographie est un excellent moyen de créer une expérience utilisateur unique pour votre client. Utiliser des polices pour raconter une histoire est un moyen très efficace de communiquer vos idées et sublimer votre web design aux yeux de votre public, en particulier à une époque où la photographie tendance à grande échelle occupe souvent le devant de la scène.

Quelques exemples de la façon dont les concepteurs Web ont mis en œuvre des polices qui captivent une réponse émotionnelle, sont Creative Doc, qui présente un en-tête de type-face impressionnant, dramatique et remplissant la page. Utiliser la taille et l’audace pour dominer une page d’accueil peut également encourager les clients à interagir davantage avec le site et la force de certaines typographies est démontré certaines fois des l’étape des wireframes. En effet en l’absence de tout élément graphique le seul élément qui se détache vraiment c’est la typographie. 

Avec une mise en page de conception demandant au spectateur, tout simplement – «regardez-moi» a été capturé par Creative Doc d’une manière si brillante. ,

Intégrer votre identité de marque avec la typographie est quelque chose qui peut être fait avec beaucoup de succès. C’est quelque chose sur lequel nous aimons aussi travailler, pour améliorer l’identité de marque de nos clients. Ou lors du choix de la typographie d’un logo.

choisir la bonne typographie web design
choisir la bonne typographie

Étape 2: Polices – Acheter ou ne pas acheter ?

Vous avez donc établi ce que vous voulez «dire» à vos clients, et il est maintenant temps de penser à insérer ces polices dans votre web design. Bien qu’il soit tentant de faire des éclaboussures et d’acheter les dernières conceptions de polices personnalisées sur le marché en ligne, ce n’est peut-être pas la meilleure solution pour tout le monde.

Dans cette étape, nous avons mis en évidence certains des avantages et des inconvénients des outils de typographie personnalisés gratuits et payants en ligne. Certaines applications sont également disponibles pour vous aider dans votre recherche.

Google Fonts, Font Squirrel (gratuit)

Avantages:

  • Complètement libre
  • Idéal pour les start-ups
  • Peut être utilisé intégré à partir du navigateur lui-même, pas besoin d’être l’hôte principal

Les inconvénients:

  • Variété limitée
  • Pas aussi personnalisé que la bonne typographie personnalisée
  • Utilisé sur des centaines de projets de conception Web (pas unique)
  • Liberté créative limitée / manque de design personnel
  • Peut sembler «  trop familier  » aux utilisateurs

Adobe Typekit (gratuit avec abonnement Creative Cloud)

Avantages:

  • Grande variété de polices
  • Sensation premium
  • Typographie de haute qualité
  • Plus personnalisé pour les créatifs indépendants et les grandes entreprises

Les inconvénients:

  • Cher sans abonnement Creative Cloud
  • Vous devez télécharger avec du code, ce qui peut avoir un effet négatif sur la vitesse de chargement du site Web, si l’hôte n’est pas assez rapide.

Des applications telles que dafont, What the Font de Typecast sont également d’excellentes sources en ligne pour la bonne typographie …

Étape 3 – Essai et erreur

Il est important de voir l’arbre qui cache la forêt lorsqu’il s’agit de sélectionner et d’incorporer des polices dans votre web design. Il est essentiel de prendre le temps de tester la fonctionnalité des polices sélectionnées et leur fonctionnement sur votre site. 

C’est un processus un peu fastidieux, mais cela vous fera gagner beaucoup de temps lors de la mise à jour de votre Web design ! C’est la valeur ajouté qu’apporte un concepteur web à votre projet. Une fois que vous êtes en mesure d’identifier et peut-être prendre note de la bonne typographie qui a bien fonctionné avec votre conception Web, et d’autres qui n’ont pas tout à fait frappé la cible cela nous amène à l’étape 4.

exemple typographie web design
choisir la bonne typographie

Étape 4: Personnalisez-la

Dans cet esprit, que souhaitez-vous mettre en valeur avec la bonne typographie que vous avez choisie ?

Quels que soient les outils, les polices payantes, non payées ou souscrites (que l’on peut trouver sur des sites tels que dafont.com), il est toujours bon de se rappeler qu’aucune police ne convient à chaque site. Bien que les meilleurs designers et créatifs du domaine s’appuient fortement sur les caractères bonne typographiques: Helvetica, Trajan, Garamond, Futura et Bodoni pour n’en nommer que quelques-uns, l’individualité est la clé.

Une bonne typographie qui fonctionne très bien pour un site peut s’avérer inefficace pour un autre. Par exemple, si nous regardons le site We Ain’t Plastic , qui adopte une sensation minimaliste et arbore, c’est un résultat efficace de l’utilisation de polices simplistes pour un portefeuille, que l’on peut trouver dans des endroits tels que Google Fonts . 

Quelque chose comme ce design est parfait pour un portfolio affichant parfaitement un profil professionnel et académique, mais ne serait peut-être pas aussi approprié pour un site, qui est fortement consacré au partage de médias tels que la photographie et le film – cela semblerait probablement dénudé en comparaison.

Jetant un coup d’œil sur des sites Web très visuels tels que Pittori di Cinema , avec sa typographie de titre typographique rustique et clairement personnalisée le corps principal du site rappelle cependant la police Crimson, qui est une police très polyvalente trouvée dans des milliers de sites Web. 

Jouer avec les différentes façons dont nous pouvons présenter les informations consiste en réalité à sélectionner les éléments clés que vous souhaitez personnaliser davantage que d’autres. Nous le voyons souvent sur les sites Web, non seulement avec la bonne typographie, mais aussi dans la façon dont nous positionnons les éléments eux-mêmes.

Le choix d’une police fantastique peut être un élément fondamental de la mise en page de votre conception Web et peut également laisser une impression durable aux clients, plus il est immersif, mieux c’est.

Étape 5: Rester flexible

Que vous ayez intégré une police gratuite à votre site Web ou que vous ayez acheté un ensemble de polices Web à implémenter dans votre nouveau projet de conception Web, vous voudrez vous assurer que vous utilisez ces polices Web d’une manière qui permet une plus grande flexibilité dans l’avenir.

Quelques éléments clés à retenir du processus d’intégration au test de la bonne typographie et de la police de votre site Web:

  • Ne jetez pas toutes vos polices dans le même panier pour ainsi dire, jouez avec des polices personnalisées mettant en évidence des éléments tels que les titres afin d’attirer les clients
  • Restez simple, si vous avez choisi une police unique et accrocheuse, pensez à l’endroit où vous souhaitez diriger les clients sur votre site, par exemple un blog, des coordonnées ou une page de demandes de renseignements.
  • N’ayez pas peur de mettre à jour votre choix de bonne typographie au fil du temps, inspirez-vous de grandes marques telles que Pinterest, Spotify, Airbnb et Burberry pour ne citer que quelques marques qui ont mis à jour leur typographie ces dernières années. Si votre conception Web est fortement axée sur le côté visuel et graphique des choses, notre travail en design graphique pourrait également stimuler votre imagination lorsqu’il s’agit de sélectionner une police avec des images.

Je suppose que vous pourriez dire que c’est simple comme Bonjour , non?! Eh bien, nous le pensons certainement.

En tenant compte de ces cinq étapes simples pour choisir la bonne typographie pour votre conception Web, vous serez sur la bonne voie pour présenter une écriture qui attirera, captivera et inspirera vos clients sur tous vos projets de web design l’avenir.

Pour tout renseignement sur nos services d’agence digitale à Montpellier. Contactez-nous via le chat de notre site web du lundi au vendredi de 9h00 à 18h00

Demander un devis Solutions Développement I Solutions Design Graphique I Solutions Marketing Digital I Blog

Dans la même catégorie

26 Nov 2021

Qu’est-ce qu’un logo géométrique ? Votre guide pour la conception de logo géométrique

Design Graphique
21 Nov 2021

Qu’est ce que les couleurs HEX et comment elles fonctionnent en web design ?

Design Graphique
14 Nov 2021

Qu’est-ce que le CMJN ?

Design Graphique
11 Nov 2021

Un guide étape par étape de l’architecture de l’information en web design

Design Graphique