J'ai audite plus de cinquante landing pages SaaS BtoB cette annee. Les bonnes pages partagent un nombre etonnamment reduit de choix typographiques. Pas les memes polices : les memes principes. Voici lesquels.
La typographie d'une landing page SaaS n'est pas un sujet decoratif. Elle conditionne la vitesse de comprehension, la perception de serieux, la facilite de comparaison entre les offres et, souvent, la confiance avant le clic. Une page peut avoir un produit solide, une bonne promesse et un design propre ; si le texte est trop petit, trop dense ou mal hierarchise, l'utilisateur travaille au lieu de comprendre.
Ce guide s'adresse surtout aux equipes SaaS BtoB, aux fondateurs, aux responsables marketing et aux designers qui veulent sortir du debat subjectif "j'aime / je n'aime pas". L'objectif : obtenir une typographie lisible, stable, premium sans etre tape-a-l'oeil, et suffisamment systematique pour etre maintenue dans le temps.
Hierarchie a trois niveaux maximum
La meilleure landing SaaS que j'ai vue cette annee utilisait exactement trois tailles de texte : h1 (titre hero), h2 (sections), body. Pas de h3, pas de small, pas de caption. Trois tailles. Resultat : un scroll fluide, une lecture predictible, zero friction cognitive.
La pire utilisait sept tailles different : h1, h2, h3, h4, body, body-small, caption, plus deux variantes de poids. Resultat : l'oeil ne sait jamais ou se poser, le scroll devient saccade, le taux de rebond depasse les soixante pourcent.
Regle pratique : trois tailles, et zero si vous pouvez. La majorite des sections n'ont pas besoin d'un sous-titre. Un titre, un paragraphe, un bouton. Le rythme nait du blanc, pas de la variation typographique.
Une hierarchie courte force aussi a mieux ecrire. Si vous avez besoin de quatre niveaux de titres pour expliquer votre produit, le probleme n'est probablement pas la typographie : c'est la structure de votre message. Une landing SaaS efficace avance par blocs simples : probleme, promesse, preuves, fonctionnement, cas d'usage, prix ou prise de contact.
Dans la pratique, je recommande de definir trois roles plutot que trois balises :
- Display : le grand titre hero, parfois reutilise pour une accroche de rupture plus bas dans la page.
- Section title : les titres de blocs, lisibles au scroll, sans effet spectaculaire.
- Body : tous les paragraphes, listes, descriptions de features et micro-explications.
Les labels, badges, tags et petites mentions peuvent exister, mais ils ne doivent pas devenir un quatrieme systeme visuel concurrent. Ils peuvent reprendre la taille body avec une couleur secondaire, ou utiliser une legere graisse en plus, sans creer une nouvelle echelle.
Ce principe rejoint une idee centrale en UX : la page doit aider l'utilisateur a anticiper ce qui vient. Les travaux de recherche publies par Nielsen Norman Group rappellent regulierement que les internautes scannent les pages avant de les lire. Une hierarchie typographique previsible rend ce scan plus rapide et plus fiable.
Une seule famille, deux poids
Les meilleures landing utilisent une seule famille (Inter, Geist, Manrope, Söhne pour les budgets) en deux poids : Regular (400 ou 500) pour le body, Semibold (600 ou 700) pour les titres. Pas de Light. Pas de Black. Pas d'italique.
La diversite vient des contrastes (couleur, taille, espacement), pas des graisses. Une page avec quatre graisses paraissait sophistiquee en 2018 ; en 2026, elle paraît brouillonne.
Une seule famille donne une impression de produit mieux tenu. C'est particulierement important pour un SaaS BtoB, ou l'utilisateur cherche des signaux de stabilite : l'outil sera-t-il fiable, maintenu, comprehensible par son equipe ? Une typographie trop expressive peut etre interessante pour une campagne de marque, mais elle devient vite bruyante sur une page de conversion.
Deux poids suffisent dans la plupart des cas :
- 400 ou 500 pour les paragraphes, les listes, les descriptions de cartes et les textes secondaires.
- 600 ou 700 pour les titres, les chiffres importants et certains libelles d'interface.
Le piege frequent consiste a utiliser le Light pour donner une impression "premium". Sur un grand ecran retina, en maquette Figma, cela peut sembler elegant. En conditions reelles, avec compression, antialiasing different selon les navigateurs et luminosite moyenne, le Light perd souvent en lisibilite. A l'inverse, le Black attire tellement l'oeil qu'il ecrase le reste de la page.
Si votre identite de marque exige une police plus distinctive, gardez-la pour quelques moments precis : un mot dans le hero, une signature, un visuel editorial. Pour le reste, privilegiez une famille robuste. La coherence typographique doit dialoguer avec le branding global ; si votre charte est encore floue, l'article sur la construction d'une charte de marque coherente donne un cadre utile avant de figer les choix de police.
Body 17 a 19 pixels
Trop de landing SaaS utilisent encore 14 ou 15 pixels en body. C'est un heritage de l'epoque ecran 1024. En 2026, les ecrans desktop usuels sont 1920 ou 2560, et les utilisateurs scrollent au mobile. Le body doit etre confortable : 17 a 19 pixels desktop, 15 a 16 mobile.
Tester sur un MacBook 13 pouces : si vous devez plisser les yeux, c'est trop petit. Tester sur un iPhone : si la phrase se coupe au milieu d'un mot, c'est trop large. Le compromis se trouve souvent autour de 18 / 16.
Le bon corps de texte depend aussi de la police. Un 18 pixels en Inter ne donne pas exactement la meme presence qu'un 18 pixels en IBM Plex Sans, en Manrope ou en system font. La hauteur d'x, les contreformes et la largeur moyenne des caracteres changent la perception. C'est pour cela qu'il faut tester en contexte, avec vos vrais textes, et pas seulement avec une phrase de maquette.
Une erreur courante consiste a valider la taille du body dans une section courte, par exemple trois lignes sous le hero. Or la vraie lisibilite se juge dans les zones plus denses : explication produit, comparaison, FAQ, details de pricing. Si ces blocs semblent gris, fatigants ou trop compacts, la taille est probablement trop petite ou le line-height trop serre.
En mobile, le sujet n'est pas seulement la taille du texte. C'est aussi la largeur de ligne. Un paragraphe qui occupe toute la largeur de l'ecran sans marge laterale donne une impression de compression. A l'inverse, des marges trop grandes produisent des lignes minuscules et cassent le rythme. Le test le plus simple : lire la page a voix haute sur mobile. Si votre souffle bute sans cesse sur les retours a la ligne, retravaillez la largeur du bloc.
Line-height 1.5 a 1.65 sur le body
Le line-height etrangle ou aere la lecture autant que la taille. Sur du body 18, un line-height de 1.5 (donc 27 pixels) est le minimum. 1.6 a 1.65 (28-30 pixels) sur les paragraphes longs ameliore reellement le confort. Sur les titres, 1.1 a 1.2 suffit.
Le line-height doit etre pense avec la densite commerciale de la page. Une landing SaaS qui explique un produit complexe a besoin d'air. Une page tres courte, orientee demo ou waitlist, peut se permettre un rythme plus compact. Mais dans les deux cas, evitez l'effet "mur de texte" : il signale inconsciemment que la comprehension va demander un effort.
Sur les titres, un line-height trop grand casse l'impact. Sur deux lignes, un h1 doit former un bloc compact, presque comme un objet graphique. Sur les paragraphes, c'est l'inverse : l'oeil doit retrouver facilement la ligne suivante. Cette difference explique pourquoi les valeurs de line-height doivent etre separees entre titres et textes courants.
Une bonne methode consiste a regler d'abord le body, puis a construire les titres autour de lui. Beaucoup d'equipes font l'inverse : elles dessinent un hero spectaculaire, puis tentent d'adapter tout le reste. Le resultat est souvent une page magnifique au-dessus de la ligne de flottaison, mais mediocre des que l'utilisateur cherche de l'information.
Un letter-spacing legerement negatif sur les gros titres
Les polices grotesque modernes (Inter, Geist, Manrope) sont concues pour le body. Sur un h1 de 60 a 80 pixels, leur tracking par defaut paraît espace. Un letter-spacing de -0.02em a -0.04em ramene la densite a un niveau éditorial. C'est un detail mais l'oeil le percoit immediatement.
Attention cependant a ne pas appliquer ce reglage partout. Un letter-spacing negatif sur du body peut degrader la lisibilite, surtout sur mobile et sur les navigateurs ou le rendu de police est moins fin. Il doit rester un ajustement de display, reserve aux grands titres et parfois aux chiffres tres visibles.
Le bon test : regardez votre h1 a deux distances. D'abord comme un designer, proche de l'ecran. Ensuite comme un visiteur, en reculant legerement ou en affichant la page sur un ecran externe. Si les lettres semblent flotter, reduisez un peu l'espacement. Si elles commencent a se toucher ou a perdre leur forme, vous etes alle trop loin.
Une couleur de texte qui n'est pas noir pur
Sur fond blanc, le noir pur (#000000) créé un contraste agressif. Un gris tres fonce (#1a1a1a a #2a2a2a) garde l'autorite tout en adoucissant la lecture. Inverse aussi : sur fond noir, eviter le blanc pur ; utiliser #f0f0f0 a #ededed.
C'est un detail que beaucoup de design systems oublient. Les meilleurs (Stripe, Vercel, Linear) ne tombent jamais dans le noir pur.
La couleur typographique doit aussi rester accessible. Les Web Content Accessibility Guidelines WCAG 2.2 donnent un cadre de reference pour le contraste entre texte et arriere-plan. Meme sans transformer chaque choix en exercice mathematique, il faut verifier les textes principaux, les boutons, les liens et les mentions secondaires.
Le vrai danger vient souvent des gris intermediaires. Un texte principal en gris tres fonce est lisible ; une description de feature en gris trop clair devient fragile, surtout sur un ecran moyen, en plein jour ou pour un utilisateur fatigue. Les textes secondaires peuvent etre moins contrastes que les titres, mais ils ne doivent pas devenir decoratifs.
La couleur de texte ne se decide pas seule. Elle doit fonctionner avec la palette globale, les fonds de sections, les etats de bouton et les illustrations. Si votre landing utilise beaucoup d'aplats ou de gradients, relisez aussi les principes de palettes de couleurs qui convertissent : la typographie et la couleur forment un meme systeme de priorite visuelle.
Responsive : une echelle fluide, pas trois maquettes deconnectees
La typographie d'une landing SaaS doit rester coherente entre desktop, tablette et mobile. Trop de pages sont dessinees comme trois objets separes : un hero spectaculaire en desktop, une version tablette approximative, puis un mobile ou les titres deviennent enormes et les paragraphes respirent mal. L'utilisateur, lui, ne voit pas vos breakpoints. Il voit une experience continue.
Le bon point de depart est une echelle typographique fluide. Le h1 peut diminuer progressivement, le body rester stable, les espacements verticaux s'adapter sans casser la logique de lecture. Les fonctions CSS modernes permettent de mieux controler ces transitions, et MDN Web Docs documente precisement les proprietes utiles comme les unites relatives, les media queries et les fonctions de dimensionnement.
En pratique, surveillez trois points :
- Les titres sur deux ou trois lignes : un h1 qui devient un empilement de mots perd sa force. Reformulez si necessaire.
- Les cartes de features : si chaque carte a une hauteur differente a cause du texte, la grille semble instable.
- Les boutons et microcopies : un CTA doit rester lisible sans prendre toute la largeur visuelle de la section.
Le responsive n'est pas seulement une question technique. C'est une question editoriale. Un titre qui fonctionne en desktop peut etre trop long sur mobile. Une phrase de reassurance peut etre utile sur grand ecran et redondante sur petit ecran. Avant de compresser la typographie, demandez-vous si le texte peut etre coupe, fusionne ou deplace.
Performance des polices : le luxe invisible
Une belle police qui ralentit l'affichage affaiblit la page. Sur une landing SaaS, la premiere impression se joue avant meme que l'utilisateur lise le texte : si le contenu saute, si les polices changent tardivement ou si le hero se recompose au chargement, la page semble moins fiable.
Les recommandations de Google web.dev insistent sur l'importance de la performance percue et des Core Web Vitals. Les polices web peuvent contribuer a des decalages visuels si elles sont mal chargees, surtout lorsque la police de secours n'a pas les memes proportions que la police finale.
Quelques decisions simples ameliorent beaucoup la situation :
- Limiter le nombre de fichiers : une famille, deux poids, pas plus si possible.
- Utiliser les formats modernes : les fichiers de police optimises reduisent le poids charge.
- Prevoir une bonne police de fallback : elle doit etre proche en largeur et en hauteur pour eviter les sauts visibles.
- Eviter les variantes inutiles : italique, light, extra-bold et jeux etendus ne doivent etre charges que s'ils sont vraiment utilises.
Les polices variables peuvent etre une bonne solution, mais pas automatiquement. Elles permettent de couvrir plusieurs graisses avec un seul fichier, mais ce fichier peut etre lourd selon les axes embarques. Il faut comparer en conditions reelles. Une implementation Webflow, Framer ou code custom n'aura pas les memes contraintes ; si le choix de l'outil est encore ouvert, le comparatif Figma, Webflow et Framer en 2026 aide a evaluer les implications de production.
Microtypographie : les details qui donnent confiance
La microtypographie regroupe les petits choix qui ne se remarquent pas individuellement, mais qui donnent a l'ensemble une impression de precision. Dans une landing SaaS, ces details sont souvent la difference entre "template propre" et "produit credible".
Premier sujet : les longueurs de ligne. Un paragraphe trop large ralentit la lecture ; un paragraphe trop etroit fatigue par ses retours a la ligne. Sur desktop, les blocs de texte doivent rarement occuper toute la largeur du container. Gardez les paragraphes dans une colonne lisible, meme si les visuels ou les cartes s'etendent davantage.
Deuxieme sujet : les listes. Les SaaS adorent les bullet points, mais beaucoup de pages les traitent comme du remplissage. Une bonne liste doit etre parallele : meme structure grammaticale, meme niveau de precision, meme longueur approximative. Si un item fait deux mots et le suivant trois lignes, la page perd son rythme.
Troisieme sujet : les chiffres. Un chiffre de pricing, un delai, un nombre d'integrations ou une promesse de gain doit etre typographiquement stable. Evitez de melanger chiffres geants, badges, couleurs criardes et astérisques. Sur une page pricing, la clarte vaut plus que l'effet. C'est exactement ce que montre le case study sur une page pricing SaaS, ou la structuration visuelle aide l'utilisateur a comparer sans effort.
Enfin, surveillez la ponctuation et les retours a la ligne. Un titre hero peut perdre beaucoup d'impact si un mot court se retrouve seul sur la derniere ligne. Une veuve typographique dans un CTA ou une carte de feature donne une impression de finition moyenne. Ce n'est pas du perfectionnisme : c'est du soin percu.
Typographie et conversion : clarifier avant de persuader
La typographie ne convertit pas seule. Elle ne compense pas une mauvaise offre, un positionnement flou ou un formulaire trop long. En revanche, elle peut rendre une proposition plus facile a comprendre et donc plus facile a evaluer. Sur une landing SaaS, c'est deja beaucoup.
Avant d'ajouter des effets, posez trois questions :
- La promesse principale est-elle identifiable en quelques secondes ?
- Les sections se distinguent-elles clairement au scroll ?
- Les preuves, integrations, cas clients et CTA sont-ils faciles a reperer ?
Si la reponse est non, n'ajoutez pas une nouvelle police. Reprenez l'ordre, les titres, les espacements et les contrastes. La typographie est un outil d'architecture de l'information. Elle doit soutenir le parcours de decision : comprendre, verifier, se projeter, agir.
C'est aussi pour cela qu'un audit typographique gagne a etre integre dans un audit UX plus large. Les questions de lisibilite, de comprehension et de priorite visuelle rejoignent directement celles traitees dans les 12 questions essentielles avant une refonte UX. Une landing qui lit bien mais raconte la mauvaise histoire ne convertira pas mieux.
Ce qui ne fonctionne pas en 2026
Le serif geant en hero, en pastiche de Mailchimp 2015. Cela peut fonctionner pour une newsletter éditoriale, pas pour un SaaS BtoB technique. Le sans-serif tres condense type bauhaus-2016. Trop daté. La superposition de trois familles. Sauf design tres maîtrise (Stripe sait le faire, peu d'autres). Le tracking positif large sur les titres. Style annee 1995, sauf si volontairement vintage.
Ajoutons les fausses bonnes idees actuelles : les titres trop compresses pour "faire startup IA", les gradients appliques au texte principal, les mots en outline dans les sections importantes, les animations lettre par lettre sur des messages de conversion. Ces traitements peuvent produire une jolie capture Dribbble, mais ils compliquent souvent la lecture.
Le probleme n'est pas l'originalite. Une landing SaaS peut avoir une vraie personnalite. Le probleme est de placer l'expression avant la comprehension. Si l'utilisateur doit decoder la mise en forme avant de comprendre la valeur du produit, la page travaille contre elle-meme.
Checklist pratique avant mise en ligne
Avant de publier une landing SaaS, passez cette checklist. Elle prend peu de temps et evite la plupart des erreurs typographiques visibles apres coup.
- Une seule famille principale est utilisee sur toute la page, hors cas de marque tres justifie.
- Deux poids maximum structurent l'essentiel de la page.
- Le body est confortable sur ordinateur portable, ecran externe et mobile.
- Les titres restent lisibles lorsqu'ils passent sur deux lignes.
- Le contraste texte/fond est verifie pour les titres, paragraphes, liens et boutons.
- Les textes secondaires ne sont pas trop clairs ou trop petits.
- Les polices chargees correspondent vraiment aux variantes utilisees.
- La page reste claire sans images, sans gradients et sans animations.
Si vous travaillez dans Figma, documentez ces decisions comme des styles reutilisables plutot que comme des exceptions locales. Les ressources de Figma Learn rappellent l'interet des styles et composants pour maintenir la coherence d'un systeme. Une landing n'est pas un poster : elle evoluera avec les campagnes, les offres, les tests et les retours commerciaux.
Le test final
Imprimez votre landing en noir et blanc, sans aucune image. Si la hierarchie reste claire, si l'oeil sait ou se poser, si la promesse principale ressort, c'est gagne. Si la page devient une bouillie grise, la typographie ne fait pas son travail. Ce test prend dix minutes et signale plus de problemes qu'un audit complet.
Vous pouvez aussi faire une variante numerique du meme test : masquez les visuels, remplacez les couleurs par des gris, puis scrollez rapidement. Les titres doivent former une colonne vertebrale. Les paragraphes doivent soutenir cette colonne sans rivaliser avec elle. Les boutons doivent rester identifiables sans hurler.
Le meilleur signe d'une bonne typographie SaaS est paradoxal : personne ne la commente. Les visiteurs comprennent, comparent, cliquent, demandent une demo ou poursuivent leur lecture. La typographie disparait derriere la clarte. C'est exactement son role.
Questions fréquentes
Quelle est la meilleure police pour une landing page SaaS ?
Il n'existe pas de meilleure police universelle. Une bonne landing SaaS utilise surtout une famille lisible, stable et cohérente avec la marque, souvent une sans-serif moderne comme Inter, Geist ou Manrope. Le choix compte moins que la hiérarchie, les tailles, les espacements et la qualité d'implémentation.
Combien de tailles de texte faut-il prévoir ?
Trois niveaux suffisent dans la majorité des cas : un grand titre hero, des titres de section et un style de paragraphe. Des exceptions sont possibles, mais chaque nouveau niveau doit répondre à un besoin réel de compréhension, pas à une envie décorative.
Quelle taille utiliser pour le texte courant ?
Pour une landing SaaS moderne, un body autour de 17 à 19 pixels sur desktop et 15 à 16 pixels sur mobile fonctionne souvent bien. Il faut toutefois tester avec la police choisie, les vrais contenus et plusieurs tailles d'écran avant de valider.
La typographie peut-elle améliorer les conversions ?
La typographie ne remplace pas une bonne offre, mais elle améliore la compréhension, la lisibilité et la confiance perçue. En rendant la promesse, les preuves et les appels à l'action plus faciles à scanner, elle peut soutenir la performance globale de la landing page.