Comment choisir les fonts d'un site SaaS sans tomber dans Inter par défaut
La typographie pose 50 % du caractère visuel. Voici comment choisir 1 ou 2 familles qui font ressortir votre marque sans casser la lisibilité.
- Type
- Guide
- Lecture
- 9 min
- Étapes
- 6
- Mis à jour
- mai 2026
Les 6 étapes
- 01
Choisir 1 ou 2 familles, jamais 3
Règle d'or : maximum 2 familles typographiques sur un site SaaS. Une pour les titres (display), une pour le corps (body). Trois familles ou plus, vous créez du chaos visuel et alourdissez la page. Si votre identité demande plus de variation, exploitez les graisses (regular, medium, semibold, bold) et les styles (italic, oblique) d'une seule famille. Une famille bien exploitée avec 4 graisses produit plus de hiérarchie qu'un mélange de 3 familles. Ce principe vient du design éditorial classique et reste valide en web.
TipSi vous hésitez entre 2 et 3 familles, choisissez 2. Vous économisez en cohérence et en performance (chaque famille = 50-200 KB de plus à charger).
- 02
Distinguer display et body
La display est pour les titres (H1, H2, gros chiffres). Elle peut être expressive : serif éditorial, grotesk personnalisée, géométrique. Sa lisibilité à petite taille importe peu — elle n'est jamais utilisée à moins de 24px. La body est pour les paragraphes, labels, boutons. Elle doit être ultra-lisible à 14-18px sur fond clair et sombre. Les bonnes body fonts ont une hauteur d'x généreuse, des contre-formes ouvertes, des chiffres à la même hauteur (lining figures). Mélanger les rôles (mettre du serif éditorial en body) crée de la fatigue visuelle après 30 secondes de lecture.
TipTestez la body font sur un paragraphe de 200 mots à 16px. Si vous décrochez à mi-paragraphe, la font ne convient pas. La lisibilité prime sur le caractère.
- 03
Choisir la display qui signe
La display fait la signature visuelle. Inter en display = SaaS générique 2020. Pour sortir du lot en 2026 : Geist Mono (technique, Vercel-like), Söhne (premium, NYT-like), Tobias (display moderne, Stripe-like), Migra (éditorial), GT America (utilitaire), Reckless (display contrasté), Editorial New (éditorial premium). Pour un budget zéro : Space Grotesk, Bricolage Grotesque, Instrument Serif, Fraunces, Geist (gratuit), Manrope. Le test : ouvrez votre site à côté de 5 concurrents, votre display doit être immédiatement distinguable. Si tout le monde a Inter en display, vous êtes invisible.
TipÉvitez les fonts trop tendances (Editorial New est partout en 2025). Choisissez une font solide et sous-utilisée. La rareté crée la mémorabilité.
- 04
Choisir la body qui se fait oublier
Inverse de la display : la body doit se faire oublier. Elle sert le contenu, pas l'inverse. Recommandations 2026 : Inter (toujours valide en body), Geist (l'alternative moderne), IBM Plex Sans (utilitaire, gratuit), Söhne (premium), GT America (large variété de graisses), Aktiv Grotesk (classique). Pour le code et les chiffres techniques : Geist Mono, JetBrains Mono, IBM Plex Mono. La body doit avoir au moins 4 graisses utilisables : regular (paragraphes), medium (labels), semibold (sous-titres), bold (emphases). Si la famille manque une graisse, le design en souffre.
TipActivez les features OpenType de votre body font : ligatures, fractions, tabular numbers. Une font techniquement riche améliore la lisibilité même si on ne voit pas pourquoi.
- 05
Tester le pairing display + body
Le pairing entre display et body fait ou casse le design. Règles empiriques : si display = serif, body = sans-serif (ou inverse). Si display = grotesk géométrique, body = grotesk humaniste. Évitez deux fonts du même style trop proches (deux sans-serif géométriques modernes) — elles "se ressemblent sans être identiques", c'est le pire. Bons pairings : Tobias (display) + Inter (body), Migra (display) + Söhne (body), Fraunces (display) + Geist (body), Instrument Serif (display) + Inter (body). Mockup-testez sur un hero + un paragraphe avant de valider.
TipSi le pairing ne marche pas, l'erreur est souvent dans les graisses ou la taille relative. Display 2-3x plus grande que body, graisse display lourde (semibold+), body regular.
- 06
Optimiser la performance de chargement
Chaque font famille charge 50-300 KB selon le nombre de graisses et le format. Règles : utilisez WOFF2 (compression supérieure), subset Latin uniquement (sauf besoin), limitez à 4 graisses max par famille, préchargez les fonts critiques (`<link rel="preload">`), définissez `font-display: swap` pour éviter le FOIT. Pour les fonts hébergées (Google Fonts, Adobe Fonts), self-hostez si possible — vous gagnez en performance et en confidentialité (RGPD). Le LCP est souvent dégradé par les fonts en cascade : préchargez la font du H1 pour réduire le LCP de 200-500 ms.
TipSi votre LCP est > 2.5s, vérifiez les fonts en premier. Une font non préchargée qui retarde le hero text est le coupable n°1 du LCP raté.
Pourquoi tout le monde utilise Inter
Inter est devenue la font SaaS par défaut entre 2018 et 2024 pour de bonnes raisons : excellente lisibilité, large variété de graisses, gratuite, optimisée web, utilisée par Linear, Vercel, Notion. Le problème : son ubiquité crée un effet d'uniformité. Quand 70 % des landings SaaS utilisent Inter en display ET body, votre site devient invisible visuellement.
La solution n'est pas de bannir Inter — elle reste excellente en body. La solution est de la combiner avec une display distinctive. Inter en body + Tobias en display = SaaS lisible et signé. Inter partout = SaaS générique. Le SaaS premium 2026 garde Inter en body et investit dans une display qui signe la marque.
Fonts gratuites vs fonts payantes
Le marché s'est ouvert : il existe aujourd'hui d'excellentes fonts gratuites (Inter, Geist, Manrope, Space Grotesk, Fraunces, Bricolage Grotesque, Instrument Serif). Pour 90 % des projets SaaS, le gratuit suffit. Les fonts payantes (50 à 5000 €/licence) apportent : un caractère plus distinctif, une qualité d'hinting supérieure pour les petites tailles, un support OpenType plus riche, et une exclusivité relative (moins d'usage sur le web).
Quand investir dans le payant : si votre branding mise sur l'identité typographique forte (médias, marques premium, agences). Sinon, les fonts gratuites font le job. Évitez les bibliothèques fonts shady (DaFont, etc.) — qualité variable et risques de licence.
Tendances 2026 et fonts à surveiller
Tendances actuelles : retour des serifs en display (Tobias, Reckless, Fraunces, Migra), grotesks expressives (Söhne, GT America), monospace humanisé (Geist Mono, JetBrains Mono). Recul des géométriques génériques (Poppins, Montserrat) qui sentent le 2018. Émergence des fonts variables (un fichier, toutes les graisses) qui simplifient la performance.
Fonts à surveiller en 2026 : Inter Display (variante optique d'Inter pour les titres), Newsreader (serif éditorial gratuit), Pretendard (sans-serif moderne, gratuit), Geist (Vercel, gratuit), Söhne (premium incontournable). Évitez le syndrome "je copie Linear" : Linear utilise Inter Display + Inter, c'est leur signature. La vôtre doit être différente.
Pièges à éviter
- Utiliser 3 familles ou plus — chaque famille en plus dilue l'identité et alourdit la perf.
- Display ET body en Inter — vous obtenez un SaaS générique 2020 indistinguable.
- Body en serif éditorial — fatigue visuelle après 30 secondes de lecture.
- Pas de préchargement de font critique — LCP dégradé de 200-500 ms.
- Fonts Google chargées via CDN Google — problème RGPD + perf inférieure au self-host.
- Pairing display + body trop proches — créent un effet "presque pareil mais pas vraiment", inconfortable.
- Choisir une font tendance (Editorial New en 2025) qui sera datée dans 18 mois.
Questions fréquentes
Appliquer ce guide avec Eufya
Si ce guide vous a aidé : 3 crédits gratuits à l'inscription. Le pipeline Eufya applique ces principes automatiquement, Hero Lab + section plan + quality gates.