Typographie des landing pages SaaS : guide pratique 2026

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.

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 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.

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.

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.

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.

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.

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.

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.