Comment choisir les polices de caractères pour votre site web

Si vous choisissez bien vos polices de caractères, vous ajouterez de la personnalité et une hiérarchie visuelle à votre site web, ce qui vous permettra de toucher votre audience cible et de définir la personnalité de votre marque. Choisir une police, c’est bien plus qu’un simple choix de design. Cette décision vous permettra de rendre votre site plus accrocheur et plus fonctionnel. 

Pour trouver les polices qui conviendront à votre site web, vous devez connaître quelques principes fondamentaux. Vous pourrez ainsi prendre des décisions éclairées et créer un site web magnifique et convivial.

Types de polices

Utiliser la bonne police peut faire toute la différence et donner le ton souhaité lorsqu’un visiteur arrive sur votre site web. Il existe plusieurs familles de polices de caractères. Voici les trois principaux styles de police que vous devez connaître.

1. Serif

Avez-vous déjà remarqué ces petites lignes aux extrémités des caractères de certaines polices ? En anglais, ces empattements s’appellent « serif », d’où le nom de cette famille de polices. Ces empattements apportent une touche de personnalité et d’élégance.

Par exemple, un « A » majuscule aura une petite extension aux deux extrémités dans une police serif. Voici quelques-unes des principales caractéristiques des polices serif :

• Légitimité : les polices serif conviennent le mieux aux sites web qui doivent dégager professionnalisme, expertise et autorité.

• Personnalité sérieuse : ces familles de polices sont idéales pour les cabinets d’avocats, les établissements de santé, les consultants, les courtiers, les services aux entreprises, etc. 

• Optimisées pour le contenu : ces polices sont également parfaites pour les sites web riches en contenu, comme les blogs.

• Style classique : les polices serif donneront à votre site web un aspect plus classique et plus élégant.

2. Sans serif

Les caractères des polices sans serif ne comportent pas d’empattements, c’est-à-dire qu’ils n’ont pas de traits supplémentaires aux extrémités. Par exemple, nous utilisons une police sans serif pour notre blog. Les polices sans serif présentent quelques attributs communs.

• Style moderne : les polices sans serif sont idéales pour les sites qui cherchent à être conviviaux et accessibles ou qui veulent donner une impression de modernité, d’innovation et de franchise.

• Créatives et ouvertes : ces familles de polices sont parfaites pour les galeries d’art, les services techniques, les prestataires de soins, les services à domicile, les organismes éducatifs et les blogueurs. 

• Accessibles : les polices sans serif donneront à votre site web une touche décontractée, les visiteurs se sentiront les bienvenus et en confiance et la navigation sera plus simple.

3. Polices scriptes

Les polices scriptes constituent une excellente option pour personnaliser votre site avec une écriture manuscrite. 

Les polices scriptes ne sont pas le meilleur choix pour les longs paragraphes, mais elles apportent aux titres une touche de raffinement. Voici quelques applications courantes pour les polices scriptes :

• Mise en avant : les polices scriptes ajoutent une touche particulière et attirent l’attention sur le texte important. 

• Style élégant : ces polices peuvent mettre en valeur certains éléments de sites web sur les voyages, les mariages, l’hôtellerie, le bien-être holistique et la cuisine.

• Fantaisistes et délicates : les polices scriptes ajoutent une touche de rêve à n’importe quel site en puisant directement dans les émotions des visiteurs.

Découvrir comment ajouter une police scripte à l’aide d’un code simple

Personnaliser vos polices

Pour choisir les bonnes polices de caractères, il ne suffit pas de trouver la bonne famille de polices. Vous devez également réfléchir à l’épaisseur et à la taille de la police ainsi qu’à l’espacement des lettres et aux styles. 

Tous ces éléments aident les utilisateurs à comprendre votre message en créant une hiérarchie et un ordre visuels. Si le texte est plus grand ou plus épais ou d’une couleur ou d’un style différent, par exemple, il est plus susceptible d’attirer l’attention et se situe donc plus haut dans la hiérarchie visuelle d’une page. 

Découvrir comment personnaliser les polices sur Squarespace

Épaisseurs de police

L’épaisseur (ou graisse) de la police va de 100 (police mince) à 900 (police extra grasse). En règle générale, l’épaisseur de la police des titres se situe entre 500 et 900 et celle des paragraphes est généralement de 400.

Taille de police

La taille de la police a un impact sur le texte qui attire l’attention sur une page web et sur la lisibilité de votre texte.

Essayez d’utiliser une taille de police comprise entre 14 et 19 pixels. Vous offrirez ainsi une expérience de lecture optimale. Réglez également la taille de police de Paragraphe 2 sur 1 rem. Toutes les autres tailles de police sont extrapolées à partir de cette taille de base. « Rem » est une unité spéciale qui permet d’adapter automatiquement la taille de votre texte sur différents écrans.

Squarespace met à l’échelle les tailles de police automatiquement en veillant à ce que les éléments importants tels que les titres ressortent.  La correspondance des tailles est également gérée de manière native, mais tenez-en compte lorsque vous personnalisez votre site.

Espacement des lettres

Modifier l’espace entre les lettres peut améliorer la lisibilité, en particulier pour les titres ou les grands blocs de texte. Pour les titres et les boutons, vous pouvez même essayer d’utiliser un espacement entre les lettres légèrement négatif (jusqu’à -0,06). N’oubliez pas de penser en priorité à la lisibilité et à la balayabilité, dont nous parlerons plus en détail un peu plus loin.

Styles de police

Utilisez l’italique, le gras ou le soulignement avec parcimonie pour mettre en valeur certains mots ou expressions. Par exemple, vous pouvez souligner le mot « nouveau » pour un nouveau cours en ligne que vous proposez ou pour mettre en avant un projet important que vous venez d’ajouter sur votre page d’accueil. Veillez à ne pas utiliser ces styles trop souvent, car votre texte pourrait perdre en clarté et en lisibilité.

Considérations relatives à l’accessibilité

Vous devez vous assurer que vos polices sont faciles à lire pour tout le monde. Gardez en tête ces quelques considérations relatives à l’accessibilité.

• Contraste : assurez-vous que la couleur du texte et la couleur d’arrière-plan sont suffisamment différentes. Si le contraste est trop faible, le texte sera difficile à lire. 

• Lisibilité : vos polices doivent être faciles à lire, quelle que soit la taille de l’écran. Des polices plus simples et de bonne taille permettent aux visiteurs de lire votre contenu.

En résumé :

• Gardez la taille de police de base entre 14 et 19 px.

• Conservez le paramètre Paragraphe 2 sur 1 rem.

• Pour les titres utilisez une épaisseur de police comprise entre 500 et 900, idéalement 600.

• Pour l’épaisseur de la police du corps du texte, commencez par 400, un espacement des lettres de 0 et une hauteur de ligne entre 1,4 et 1,9.

Ces paramètres optimisent la lisibilité de vos pages, ce qui est essentiel pour développer votre audience, car les visiteurs sont plus susceptibles d’interagir avec un contenu de qualité lorsqu’il est facile à lire.

Choix des polices : les facteurs à prendre en compte

Maintenant que vous connaissez la différence entre polices serif et sans serif et que vous comprenez mieux l’épaisseur, la taille et le style des polices, vous devez connaître les facteurs à prendre en compte pour choisir les polices.

Identité de marque

Vos polices doivent refléter la personnalité et les valeurs de votre marque. Votre marque est-elle enjouée et moderne ou classique et raffinée ? Vous pouvez vous aider des polices pour le transmettre aux visiteurs.

Par exemple, le site d’une salle d’entraînement HIIT moderne dotée d’une personnalité et d’un ton forts peut utiliser des polices sans serif épaisses. De son côté, un masseur-kinésithérapeute choisira peut-être une police serif ou sans serif plus légère afin de transmettre une ambiance aérée et paisible, à l’image de son activité.

Lisibilité

En fin de compte, les polices les plus adaptées pour votre site web sont celles qui sont agréables à regarder. Si les visiteurs doivent plisser les yeux pour lire votre contenu ou si la police est trop élaborée, ils risquent de ne pas rester longtemps sur votre site.

Maintenez l’intérêt des visiteurs en leur facilitant la lecture et la reconnaissance des lettres et des mots. Au lieu d’opter pour une police qui vous mettra en avant, privilégiez des polices très lisibles, en particulier pour le corps du texte. 

Si vous hésitez entre deux polices, essayez-les sur un exemple de page que vous êtes en train de créer et choisissez celle qui est la plus facile à lire. 

Combinaison de polices

Combinez des polices afin de créer un design visuellement attrayant et cohérent. Par exemple, une police sans serif en gras associée à une police serif peut être élégante et moderne.

Lorsque vous associez plusieurs polices sur une page, veillez toujours à la cohérence, à l’équilibre et à la lisibilité du haut vers le bas. 

Squarespace propose des associations de polices qui constituent un excellent point de départ pour vous aider à choisir une combinaison qui correspond à l’identité et aux objectifs de votre marque. Ces associations sélectionnées par des professionnels ne manqueront pas de donner à votre site un aspect soigné et professionnel. 

Balayabilité

Il est rare que les visiteurs lisent l’ensemble du texte d’une page. Ils balayent l’écran à la recherche d’informations clés. S’ils les trouvent, ils reviendront alors peut-être en arrière et liront le texte de manière plus assidue. 

Utilisez une police qui permet aux visiteurs de parcourir facilement votre page pour trouver ce dont ils ont besoin. Utilisez des titres, des sous-titres et des listes à puces clairs pour améliorer la balayabilité de votre page. 

Taille sur différents appareils

Votre police de caractères est peut-être superbe sur un ordinateur, mais est-ce également le cas sur des appareils mobiles ? Vos polices doivent être mises à l’échelle de manière appropriée et rester lisibles sur les petits écrans. Pensez à prévisualiser votre site web sur une tablette et sur des appareils mobiles, mais aussi sur de grands écrans, comme les moniteurs d’ordinateur.

Découvrir d’autres conseils pour choisir les fonctionnalités de design de votre site

Trouver la police de caractères idéale

Squarespace propose une large gamme de polices afin de vous aider à créer le look parfait pour votre site web. Le menu Styles du site vous donne accès à une multitude de polices magnifiques. Expérimentez et découvrez celles qui vous permettront de concrétiser votre vision pour votre site web. 

Pour vous aider à commencer, nous avons sélectionné quelques polices populaires qui apporteront une touche moderne et attrayante à votre site web.

Sans serif

• Nunito Sans

• Manrope

• Dela Gothic One

• Work Sans

• Inter

• DM Sans

• Poppins 

• Fairwater Sans

Serif

• Young Serif

• Baskerville Display PT

• Fino

• Dapifer

• Linotype Didot

• Sirenne Eighteen MVB

• Playfair Display

• Ohno Fatface

Vous pouvez explorer les polices scriptes et les « joyaux cachés » en cliquant sur du texte d’un site web Squarespace, puis en sélectionnant Famille et Parcourir toutes les polices. 

Polices scriptes

• Imperial Script

• Scriptorama Markdown JF

• Luxurious Script

• Livermore Script ATF Rough No. 1

• Sketchnote Text

Des joyaux cachés

• Outfit 

• Arboria

• DM Sans 

• Ambroise Std Francois 

• Alverata

• Arno Pro Display

• Cabin condensed

• Lexia Advertising

• Worthington Arcade

• Worker

• Space Grotesk

• Runda

• Sora

• Objective Mk2

Afin de choisir les bonnes polices pour votre site web, vous devez trouver l’équilibre parfait qui vous permettra à la fois d’exprimer la personnalité de votre marque et de garantir une excellente expérience pour vos visiteurs. 

Explorez les différentes combinaisons pour trouver celles qui correspondent parfaitement à votre site web. Si vous trouvez les bonnes polices, non seulement votre site web sera magnifique, mais il laissera également une impression durable.