Quand on crée son site Internet, on passe beaucoup de temps à choisir ses couleurs, ses photos, la mise en page de ses sections. Mais il y a un élément qu’on néglige souvent alors qu’il a un impact absolument déterminant sur l’expérience de lecture et l’identité visuelle de ton site : la typographie.

Les typographies que tu choisis vont conditionner la lisibilité de tes contenus, l’atmosphère générale de ton site, et même la perception qu’auront les visiteurs de ton professionnalisme. Une typographie mal choisie peut rendre ton site fatigant à lire, même si ton contenu est excellent. À l’inverse, une typographie bien choisie va rendre la lecture fluide, agréable, et renforcer ton identité visuelle sans que le visiteur s’en rende vraiment compte.

Aujourd’hui, je vais te donner toutes les clés pour choisir tes typographies web de façon réfléchie et cohérente. Pas besoin d’être graphiste ou d’avoir des connaissances techniques poussées. Juste quelques principes simples qui vont t’aider à créer un site lisible, agréable, et qui te ressemble vraiment.

Avant de rentrer dans le vif du sujet, je veux que tu comprennes vraiment pourquoi la typographie mérite qu’on s’y attarde.

La fonction première d’une typographie sur un site web, c’est de permettre à tes visiteurs de lire ton contenu confortablement. Ça peut sembler évident, mais c’est loin d’être toujours le cas dans la réalité.

Une typographie illisible va fatiguer les yeux de tes visiteurs, les obliger à plisser les yeux pour déchiffrer tes textes, leur donner envie de partir avant même d’avoir lu le premier paragraphe. À l’inverse, une typographie bien choisie va rendre la lecture fluide et naturelle, sans que le visiteur ait besoin de faire le moindre effort.

La lisibilité dépend de plusieurs facteurs : la forme des lettres, l’espacement entre les caractères, la taille du texte, le contraste avec l’arrière-plan, la longueur des lignes. Tous ces éléments interagissent pour créer une expérience de lecture agréable ou désagréable.

Au-delà de la lisibilité pure, la typographie contribue énormément à l’identité visuelle de ton site et à l’atmosphère que tu veux créer. Chaque typographie porte en elle des connotations, une personnalité, une ambiance particulière.

Une typographie serif classique (avec empattements) va donner une impression d’élégance, de tradition, de sérieux. Une typographie sans-serif moderne va créer une atmosphère plus épurée, contemporaine, accessible. Une typographie script (qui imite l’écriture manuscrite) va évoquer la créativité, l’authenticité, la douceur. Une typographie display (décorative) va attirer l’attention, créer de l’impact, mais doit être utilisée avec parcimonie.

La typographie fait partie intégrante de ton identité visuelle, au même titre que tes couleurs, tes photos, ou ton logo. Elle doit être cohérente avec l’ensemble de ton univers graphique et renforcer ton positionnement.

Si tu as déjà défini une charte graphique avec des couleurs spécifiques, des visuels dans un certain style, des formes particulières, tes typographies doivent s’inscrire dans cette cohérence globale. Elles ne doivent pas entrer en conflit avec les autres éléments visuels, mais au contraire les compléter harmonieusement.

Cette cohérence crée une impression de professionnalisme et de soin dans les détails. Un visiteur ne saura peut-être pas consciemment identifier que tes typographies sont bien choisies, mais il sentira que ton site est harmonieux, qu’il y a une vraie réflexion derrière, et ça renforcera sa confiance en toi.

Pour bien choisir tes typographies, il faut d’abord comprendre les grandes familles qui existent et leurs caractéristiques respectives. Je vais te présenter les quatre grandes catégories que tu vas rencontrer le plus souvent.

Les typographies serif sont reconnaissables à leurs petits prolongements aux extrémités des lettres, qu’on appelle des empattements. Ces empattements donnent une impression de stabilité, de tradition, d’élégance classique.

Exemples de typographies serif : Times New Roman, Georgia, Merriweather, Playfair Display, Lora, Crimson Text.

Quand les utiliser : Les serif fonctionnent très bien pour les sites qui cherchent à transmettre une impression de sérieux, d’expertise, de tradition, ou d’élégance intemporelle. Elles sont particulièrement adaptées pour les professions libérales (avocats, notaires, consultants), les sites culturels, les blogs littéraires, les marques haut de gamme.

Où les utiliser : Les serif sont excellentes pour les textes longs (articles de blog, pages de contenu dense) car les empattements facilitent la lecture en guidant l’œil d’une lettre à l’autre. On peut aussi les utiliser pour les titres si on veut créer un contraste avec un corps de texte en sans-serif.

Points d’attention : Certaines typographies serif très classiques (comme Times New Roman) peuvent donner une impression vieillotte si elles ne sont pas bien utilisées. Préfère des serif modernes et épurées comme Georgia ou Merriweather si tu veux un rendu plus contemporain.

Les typographies sans-serif n’ont pas d’empattements. Leurs lettres ont des formes plus géométriques, plus épurées, plus modernes. Elles donnent une impression de simplicité, de clarté, d’accessibilité.

Exemples de typographies sans-serif : Arial, Helvetica, Open Sans, Roboto, Lato, Montserrat, Raleway, Poppins.

Quand les utiliser : Les sans-serif fonctionnent très bien pour les sites qui cherchent à transmettre une impression de modernité, de simplicité, d’accessibilité, de dynamisme. Elles sont particulièrement adaptées pour les sites de services, les sites tech, les startups, les coachs, les thérapeutes, les artisans créateurs.

Où les utiliser : Les sans-serif sont excellentes pour les textes courts (menus, boutons, légendes), les titres impactants, et aussi pour les textes longs sur écran (beaucoup de sites préfèrent les sans-serif pour le corps de texte car elles sont très lisibles à l’écran).

Points d’attention : Certaines sans-serif très neutres (comme Arial ou Helvetica) peuvent manquer de personnalité si elles ne sont pas bien utilisées. Préfère des sans-serif avec un peu plus de caractère comme Montserrat ou Raleway si tu veux un rendu moins générique.

Les typographies script imitent l’écriture manuscrite, avec des lettres qui se lient parfois entre elles comme quand on écrit à la main. Elles donnent une impression de chaleur humaine, d’authenticité, de créativité, de douceur.

Exemples de typographies script : Pacifico, Dancing Script, Great Vibes, Sacramento, Allura.

Quand les utiliser : Les script fonctionnent très bien pour les sites qui cherchent à transmettre une impression de créativité, d’authenticité, de douceur, de féminité (attention toutefois aux stéréotypes). Elles sont particulièrement adaptées pour les wedding planners, les graphistes, les artisans créateurs, les sites de bien-être, les blogueuses lifestyle.

Où les utiliser : Les script sont parfaites pour les titres, les citations mises en valeur, les signatures, les éléments décoratifs. En revanche, elles ne doivent jamais être utilisées pour les textes longs car elles sont beaucoup trop difficiles à lire en continu.

Points d’attention : Les script sont très jolies mais peuvent vite faire amateur ou kitsch si elles sont mal utilisées. Utilise-les avec parcimonie, uniquement pour des éléments courts et mis en valeur. Et surtout, vérifie qu’elles restent lisibles même en petite taille.

Les typographies display sont des typographies très travaillées graphiquement, souvent avec des formes originales, des effets visuels marqués, une forte personnalité. Elles attirent immédiatement l’attention et créent un impact visuel fort.

Exemples de typographies display : Impact, Bebas Neue, Anton, Archivo Black, Righteous.

Quand les utiliser : Les display fonctionnent très bien pour créer un impact visuel fort sur des éléments spécifiques comme le logo, le titre principal de la page d’accueil, ou des sections très importantes. Elles sont particulièrement adaptées pour les sites qui veulent une identité visuelle affirmée et marquante.

Où les utiliser : Les display doivent être utilisées uniquement pour les titres très courts et les éléments qui doivent vraiment attirer l’attention. Elles ne conviennent absolument pas pour les textes courants ou même pour les titres de sections classiques.

Points d’attention : Les display sont souvent difficiles à manier et peuvent rapidement faire trop chargé ou brouillon si on en abuse. Utilise-les vraiment avec grande parcimonie, et uniquement si tu as une vraie raison de vouloir créer un impact visuel fort. Pour la plupart des sites d’indépendants, les display ne sont pas nécessaires.

Maintenant que tu connais les grandes familles de typographies, je vais te donner la règle la plus importante à respecter pour créer un site harmonieux : utilise maximum deux typographies différentes sur ton site. Une pour les titres, une pour les textes courants.

Si tu utilises trop de typographies différentes sur ton site, tu vas créer de la confusion visuelle. Le visiteur ne saura plus où regarder, il aura l’impression d’un site brouillon, décousu, amateur. Chaque nouvelle typographie introduit une nouvelle identité visuelle qui entre potentiellement en conflit avec les autres.

Avec deux typographies maximum, tu crées de la cohérence tout en permettant une hiérarchie visuelle claire. Une typographie pour les titres (qui attire l’attention, qui structure), une typographie pour les textes (qui facilite la lecture sur la durée). C’est suffisant pour créer du rythme et de la variété sans tomber dans la cacophonie visuelle.

Il existe plusieurs stratégies efficaces pour combiner deux typographies harmonieusement :

Stratégie 1 : Serif + Sans-Serif (le classique)

C’est la combinaison la plus courante et généralement la plus sûre. Tu utilises une typographie serif pour les titres (qui apporte de l’élégance et de la structure) et une typographie sans-serif pour les textes (qui facilite la lecture à l’écran).

Exemple : Merriweather pour les titres + Open Sans pour les textes.

Cette combinaison fonctionne bien pour presque tous les types de sites, notamment les sites de services professionnels, les blogs, les sites d’accompagnement.

Stratégie 2 : Sans-Serif + Serif (l’inversé)

À l’inverse, tu peux utiliser une typographie sans-serif pour les titres (moderne, impactante) et une typographie serif pour les textes (élégante, confortable pour la lecture longue).

Exemple : Montserrat pour les titres + Lora pour les textes.

Cette combinaison fonctionne bien pour les sites qui veulent un rendu moderne tout en gardant une certaine élégance classique dans les contenus.

Stratégie 3 : Deux Sans-Serif de personnalités différentes

Tu peux aussi combiner deux typographies sans-serif, à condition qu’elles aient des personnalités suffisamment différentes pour créer du contraste. Par exemple, une sans-serif géométrique et moderne pour les titres, et une sans-serif plus arrondie et douce pour les textes.

Exemple : Raleway pour les titres + Lato pour les textes.

Cette combinaison fonctionne bien pour les sites très modernes, épurés, minimalistes.

Stratégie 4 : Script (pour les titres uniquement) + Sans-Serif ou Serif

Si tu veux apporter une touche de douceur ou de créativité, tu peux utiliser une typographie script pour certains titres importants, associée à une typographie serif ou sans-serif pour tout le reste.

Exemple : Dancing Script pour le titre principal de la page d’accueil + Open Sans pour tous les autres textes.

Attention : cette stratégie est plus risquée et demande un bon sens graphique pour ne pas tomber dans le kitsch. Utilise la script vraiment avec parcimonie.

Certaines combinaisons de typographies ne fonctionnent jamais bien :

• Deux typographies trop similaires : si tes deux typos se ressemblent trop, le visiteur ne comprendra pas pourquoi tu en utilises deux. Ça donnera une impression d’incohérence ou d’erreur.
• Deux typographies très décoratives : si tu combines deux typos avec beaucoup de personnalité (par exemple une script et une display), tu vas créer un conflit visuel. Chacune va se battre pour attirer l’attention et le résultat sera illisible.
• Trois typographies ou plus : sauf cas très particulier avec une vraie intention graphique assumée, utiliser trois typographies différentes crée presque toujours du désordre visuel.

Maintenant que tu connais les grandes familles et la règle des deux typographies maximum, voyons concrètement comment choisir tes typos en fonction de critères objectifs.

C’est le critère numéro un, celui qui ne doit jamais être négocié. Ta typographie doit être parfaitement lisible à l’écran, sur tous les supports (ordinateur, tablette, mobile).

Pour vérifier la lisibilité :

• Tape plusieurs paragraphes de texte avec la typographie que tu envisages
• Regarde le résultat sur ton ordinateur, puis sur ton téléphone
• Vérifie que les lettres sont bien distinctes les unes des autres (le « i » et le « l » ne doivent pas se confondre, le « rn » ne doit pas ressembler à un « m »)
• Vérifie que la taille standard (16-18px pour les textes courants) reste confortable à lire
• Demande à quelqu’un d’autre de lire ton texte et de te dire si c’est fatigant

Si tu as le moindre doute sur la lisibilité, change de typographie. Un texte difficile à lire, c’est un visiteur qui part.

Ta typographie doit correspondre à ta personnalité professionnelle et à l’atmosphère que tu veux créer sur ton site.

Pour vérifier la personnalité :

• Demande-toi quels adjectifs définissent ton activité (moderne ? classique ? douce ? dynamique ? sérieuse ? créative ?)
• Regarde si la typographie que tu envisages porte ces mêmes qualités
• Teste plusieurs typographies différentes et compare les impressions qu’elles donnent
• Montre à quelques personnes de ton entourage et demande-leur ce que cette typo leur évoque

Par exemple, si tu es thérapeute et que tu travailles dans l’accompagnement en douceur, une typographie très géométrique et froide ne correspondra pas à ton univers. À l’inverse, si tu es consultante en stratégie, une typographie trop script et décorative ne sera pas crédible.

Ta typographie doit pouvoir s’adapter à différents contextes d’utilisation : titres de différentes tailles, textes courts, textes longs, boutons, menus, citations.

Pour vérifier la polyvalence :

• Vérifie que la typographie existe en plusieurs graisses (light, regular, bold, voire black)
• Vérifie qu’elle propose les variantes italique et gras
• Vérifie qu’elle reste lisible en très petit (10-12px) et en très grand (40-60px)
• Teste-la dans différents contextes (titre, paragraphe, bouton) pour voir si elle fonctionne partout

Les typographies qui n’ont qu’une seule graisse limitent beaucoup tes possibilités de hiérarchisation visuelle. Préfère les typographies qui proposent au minimum regular, italic, bold, et bold italic.

Sur le web, toutes les typographies ne sont pas égales techniquement. Certaines sont optimisées pour l’affichage écran, d’autres moins. Certaines se chargent rapidement, d’autres ralentissent ton site.

Pour vérifier la compatibilité technique :

• Privilégie les typographies disponibles sur Google Fonts (gratuites, optimisées web, faciles à intégrer)
• Vérifie le poids du fichier de la typo (certaines sont très lourdes et ralentissent le site)
• Évite les typographies trop exotiques qui ne s’affichent que sur certains navigateurs

Avec Divi, tu peux facilement intégrer les typographies Google Fonts directement depuis l’interface. C’est simple, fiable, et gratuit.

Ta typographie doit pouvoir vieillir bien. Évite les typographies trop tendance qui seront datées dans deux ans et te donneront envie de tout refaire.

Pour vérifier la durabilité :

• Préfère les typographies classiques ou intemporelles aux typos ultra-tendance
• Regarde des sites créés il y a plusieurs années avec cette typo et vérifie si elle a bien vieilli
• Demande-toi si tu pourras encore supporter cette typo dans cinq ans

Par exemple, les typos très géométriques très à la mode en ce moment risquent de paraître datées dans quelques années. À l’inverse, des typos comme Open Sans, Lato, ou Merriweather sont intemporelles et fonctionneront encore très bien dans dix ans.

Pour te faciliter la vie, voici plusieurs combinaisons de typographies qui fonctionnent bien pour différents types d’activités. Toutes ces typographies sont disponibles gratuitement sur Google Fonts et s’intègrent facilement dans Divi.

Pour les thérapeutes, coachs, accompagnants

Combinaison 1 : Douceur et clarté

• Titres : Lora (serif élégante et douce)
• Textes : Open Sans (sans-serif lisible et accessible)

Cette combinaison crée une atmosphère chaleureuse tout en restant très lisible. Elle convient parfaitement pour les sites d’accompagnement où on veut transmettre à la fois du professionnalisme et de la douceur.

Combinaison 2 : Modernité et accessibilité

• Titres : Montserrat (sans-serif moderne et structurée)
• Textes : Lato (sans-serif arrondie et confortable)

Cette combinaison est plus moderne et dynamique que la précédente, tout en gardant beaucoup de clarté. Elle convient bien pour les coachs qui veulent un rendu contemporain.

Pour les artisans, créateurs, artistes

Combinaison 1 : Élégance artisanale

• Titres : Playfair Display (serif élégante avec caractère)
• Textes : Raleway (sans-serif épurée et moderne)

Cette combinaison crée un contraste intéressant entre tradition (la serif) et modernité (la sans-serif). Elle convient parfaitement pour les artisans qui créent des pièces intemporelles avec des techniques traditionnelles mais une esthétique contemporaine.

Combinaison 2 : Douceur créative

• Titres : Josefin Sans (sans-serif avec personnalité)
• Textes : Lato (sans-serif lisible)

Cette combinaison apporte beaucoup de personnalité tout en restant très lisible. Elle convient bien pour les créateurs qui veulent un site avec du caractère sans tomber dans l’excès décoratif.

Pour les consultants, freelances, professionnels

Combinaison 1 : Sérieux et impact

• Titres : Roboto Condensed (sans-serif structurée et impactante)
• Textes : Merriweather (serif confortable pour la lecture longue)

Cette combinaison transmet beaucoup de sérieux et de professionnalisme. Elle convient parfaitement pour les consultants, les freelances tech, les professionnels qui veulent un site sobre et crédible.

Combinaison 2 : Modernité professionnelle

• Titres : Poppins (sans-serif géométrique et moderne)
• Textes : Roboto (sans-serif neutre et très lisible)

Cette combinaison est très contemporaine et fonctionne particulièrement bien pour les sites de services digitaux, les freelances, les startups.

Pour les sites avec beaucoup de contenu (blogs, sites éditoriaux)

Combinaison 1 : Confort de lecture maximal

• Titres : Merriweather (serif élégante)
• Textes : Georgia (serif classique optimisée écran)

Cette combinaison full-serif est parfaite pour les blogs où les gens vont lire de longs articles. Les deux typos facilitent la lecture continue et créent une atmosphère un peu littéraire.

Combinaison 2 : Clarté éditoriale

• Titres : Source Sans Pro (sans-serif très lisible)
• Textes : Source Serif Pro (serif de la même famille)

Cette combinaison utilise deux typos de la même famille (Source), ce qui crée beaucoup de cohérence tout en permettant de différencier titres et textes. Elle convient très bien pour les sites éditoriaux professionnels.

Choisir tes typographies n’est pas une décision à prendre à la légère en deux minutes. Voici le processus que je te recommande pour faire le meilleur choix possible.

Étape 1 : Fais une première sélection
Sur Google Fonts, explore les différentes typographies disponibles et sélectionne 4 à 6 typos qui te plaisent visuellement et qui correspondent à l’atmosphère que tu veux créer. Ne te limite pas trop à ce stade, laisse-toi guider par ton intuition.

Étape 2 : Teste-les en conditions réelles
Crée une page test sur ton site WordPress avec du vrai contenu : un titre principal, des sous-titres de différents niveaux, plusieurs paragraphes de texte, un bouton, une citation. Applique chacune de tes typos et regarde le rendu réel.

Étape 3 : Vérifie sur différents supports
Regarde ta page test sur ton ordinateur, puis sur ta tablette, puis sur ton téléphone. Vérifie que tout reste parfaitement lisible sur tous les supports. Parfois une typo qui fonctionne très bien sur grand écran devient illisible sur mobile.

Étape 4 : Demande des avis extérieurs
Montre ta page test à 3-4 personnes de ton entourage (idéalement des personnes qui font partie de ta cible) et demande-leur ce qu’elles en pensent. Est-ce que c’est facile à lire ? Est-ce que ça correspond à l’image qu’elles se font de ton activité ? Est-ce que ça leur plaît visuellement ?

Étape 5 : Fais ton choix final
En fonction de tous ces tests, élimine les typos qui ne fonctionnent pas bien et garde les deux qui répondent le mieux à tous les critères : lisibilité, personnalité, polyvalence, compatibilité technique, durabilité.

Étape 6 : Applique et affine
Une fois ton choix fait, applique tes typographies sur tout ton site. Puis continue à affiner les détails : la taille des textes, les espacements, les graisses utilisées. La typographie ne se résume pas au choix de la police, c’est aussi tout le travail de mise en forme qui va avec.

Après quinze ans à créer des sites, j’ai vu revenir les mêmes erreurs typographiques encore et encore. Voici les principales, pour que tu puisses les éviter.

Erreur 1 : Des textes trop petits

Beaucoup de personnes utilisent des tailles de texte bien trop petites, souvent par peur que ça prenne trop de place ou parce qu’elles trouvent que « ça fait plus design ». Résultat : des textes illisibles qui fatiguent les yeux.

La bonne pratique : utilise minimum 16px pour les textes courants, et 18px est encore mieux. Sur mobile, n’hésite pas à monter à 18-20px.

Erreur 2 : Des lignes trop longues

Quand les lignes de texte sont trop longues (plus de 80-90 caractères), l’œil a du mal à suivre et la lecture devient fatigante. Le visiteur perd le fil, saute des lignes, abandonne.

La bonne pratique : limite la largeur de tes blocs de texte à 600-700px maximum. Divi te permet de gérer ça facilement avec les paramètres de largeur des colonnes.

Erreur 3 : Pas assez d’interligne

L’interligne (l’espace entre les lignes de texte) est crucial pour la lisibilité. Trop serré, le texte devient étouffant. Trop large, il perd sa cohésion.

La bonne pratique : utilise un interligne de 1.6 à 1.8 fois la taille de ta police. Par exemple, pour un texte en 18px, règle ton interligne sur 29-32px environ.

Erreur 4 : Trop de variations

Utiliser trop de graisses différentes (light, regular, medium, semibold, bold, extrabold) crée de la confusion visuelle. Le visiteur ne sait plus ce qui est important.

La bonne pratique : limite-toi à 2-3 graisses maximum. Par exemple : regular pour les textes courants, bold pour les titres, et éventuellement light pour les légendes ou éléments secondaires.

Erreur 5 : Des contrastes insuffisants

Un texte gris clair sur fond blanc, c’est joli sur le papier mais illisible sur écran. Beaucoup de personnes sacrifient la lisibilité au profit d’un rendu visuel qu’elles trouvent plus « subtil ».

La bonne pratique : assure-toi que le contraste entre ton texte et ton fond est suffisant. Utilise des outils comme le contrast checker de WebAIM pour vérifier que tu respectes les normes d’accessibilité.

Erreur 6 : Tout en majuscules

Les titres tout en majuscules peuvent avoir un certain impact visuel, mais ils sont beaucoup plus difficiles à lire que les titres en minuscules. Notre cerveau lit les formes des mots, et les majuscules créent des blocs rectangulaires uniformes qui ralentissent la lecture.

La bonne pratique : utilise les majuscules avec parcimonie, uniquement pour des éléments très courts (un bouton, un label) ou pour créer un effet visuel ponctuel. Pour tous tes titres principaux, privilégie les minuscules.

La typographie n’est pas juste une question esthétique ou un détail technique parmi d’autres. C’est un élément fondamental qui conditionne toute l’expérience de lecture de tes visiteurs et qui participe pleinement à ton identité visuelle.

Des typographies bien choisies vont rendre ton contenu agréable à lire, renforcer ta crédibilité professionnelle, et transmettre l’atmosphère que tu veux créer. À l’inverse, des typographies mal choisies peuvent gâcher un contenu excellent et faire fuir tes visiteurs avant même qu’ils aient lu la première ligne.

La bonne nouvelle, c’est que tu n’as pas besoin d’être graphiste pour faire les bons choix. Il te suffit de suivre quelques principes simples : privilégie la lisibilité avant tout, limite-toi à deux typographies maximum, crée du contraste entre tes titres et tes textes, teste en conditions réelles, et fais-toi confiance.

Et si tu veux partir sur une base solide avec des combinaisons qui fonctionnent déjà, je t’ai préparé 10 chartes graphiques complètes dans ma formation, avec les typographies, les couleurs, et tous les éléments visuels cohérents.

Parce qu’un site qui te ressemble, ce n’est pas juste un site avec tes couleurs et tes photos. C’est aussi un site où chaque détail, y compris la typographie, reflète qui tu es et comment tu veux accompagner tes clients.

Ma formation « Créer son site de A à Z avec WordPress & Divi » te donne tous les outils pour créer un site professionnel qui te ressemble vraiment, y compris le fichier des 10 chartes graphiques avec typographies incluses. Tu peux partir d’une base solide et l’adapter à ton univers, sans avoir besoin d’être graphiste.