Typographie web : comment choisir les bonnes polices pour votre site

La typographie représente plus de 90 % du contenu visuel d’un site web. Pourtant, beaucoup de PME suisses choisissent leurs polices par défaut ou par goût personnel, sans réflexion stratégique. Un mauvais choix typographique peut ruiner un design autrement réussi, dégrader la lisibilité et projeter une image peu professionnelle. Voici comment faire les bons choix.

Pourquoi la typographie compte autant

Sur un site web, le texte est le premier vecteur d’information. Avant même de lire un mot, le visiteur perçoit la police utilisée et en tire des conclusions inconscientes sur la crédibilité, le professionnalisme et le positionnement de votre entreprise. Une étude du MIT a démontré que la typographie influence directement la confiance que le lecteur accorde au contenu — indépendamment du message lui-même.

Pour une PME en Suisse romande, cela signifie que le choix de vos polices est un choix de positionnement. Une fiduciaire à Lausanne ne communiquera pas la même confiance avec une police fantaisie qu’avec une sans-serif élégante et structurée.

Les familles de polices et leurs usages

Avant de choisir, il faut comprendre les grandes catégories.

Serif (avec empattements). Les polices comme Georgia, Playfair Display ou Lora possèdent de petits traits aux extrémités des lettres. Elles évoquent la tradition, la fiabilité et le sérieux. Elles fonctionnent bien pour les cabinets d’avocats, les fiduciaires, l’immobilier ou le secteur du luxe.

Sans-serif (sans empattements). Inter, Open Sans, Switzer — ces polices aux lignes épurées dominent le web moderne. Elles sont synonymes de modernité, de clarté et d’accessibilité. Elles conviennent à la majorité des PME, particulièrement dans la tech, les services et le commerce.

Monospace. À usage technique (code, données), ces polices comme JetBrains Mono sont rarement utilisées comme police principale mais peuvent apporter une touche distinctive à un site tech.

Display. Les polices d’affichage sont conçues pour les titres et les éléments visuels forts. Elles ne doivent jamais être utilisées pour le corps de texte — leur lisibilité se dégrade rapidement en petite taille.

La lisibilité avant tout

Quel que soit votre choix esthétique, la lisibilité n’est pas négociable. Voici les critères techniques à vérifier.

Taille minimale. Le corps de texte ne devrait jamais descendre en dessous de 16 px sur écran. Pour les publics plus âgés — courants dans certains secteurs suisses comme la santé ou l’immobilier — 18 px est préférable.

Hauteur de ligne. Un interligne de 1.5 à 1.7 fois la taille de police assure un confort de lecture optimal. Trop serré, le texte devient un bloc compact décourageant. Trop espacé, l’oeil perd le fil entre les lignes.

Longueur de ligne. La largeur idéale d’une ligne de texte se situe entre 60 et 80 caractères. Au-delà, l’oeil fatigue en cherchant le début de la ligne suivante. En deçà, la lecture devient saccadée.

Contraste. Le texte doit respecter un ratio de contraste minimum de 4.5:1 avec son fond selon les normes WCAG. Un texte gris clair sur fond blanc, même s’il est “tendance”, est un frein concret à la lecture et à l’accessibilité.

Les polices variables : le meilleur des deux mondes

Les polices variables (variable fonts) sont une avancée technique majeure pour le web. Au lieu de charger un fichier par graisse (Regular, Bold, SemiBold…), un seul fichier contient toutes les variations possibles.

Les avantages sont doubles. Côté performance, un seul fichier de police variable (40-80 Ko en WOFF2) remplace quatre à six fichiers classiques (total de 150-300 Ko). Moins de requêtes HTTP, moins de données à télécharger, un site plus rapide. Côté design, vous disposez d’un contrôle continu sur la graisse (de 100 à 900), la largeur et parfois l’inclinaison. Cela permet des transitions fluides au survol, des hiérarchies typographiques précises et une cohérence parfaite entre tous les textes.

En Suisse romande, où la vitesse de chargement est un facteur SEO et UX déterminant, les polices variables représentent un choix technique judicieux. Chez Tacelo, nous utilisons la police variable Switzer pour tous nos projets internes — elle offre un excellent rendu en français avec une prise en charge complète des caractères accentués.

Google Fonts vs auto-hébergement : le débat suisse

Pendant des années, Google Fonts était la solution par défaut : facile à intégrer, gratuit, avec un vaste catalogue. Mais la situation a changé, particulièrement en Suisse.

Le problème de la vie privée. Quand vous intégrez Google Fonts via leur CDN, chaque visiteur de votre site envoie une requête aux serveurs de Google, qui collecte l’adresse IP. Depuis l’arrêt de la Cour de justice de Munich en 2022 et le renforcement de la nLPD en Suisse, cette pratique est juridiquement problématique sans consentement explicite.

La solution : l’auto-hébergement. Télécharger les fichiers de police et les héberger sur votre propre serveur ou CDN élimine ce problème. C’est aussi meilleur pour la performance : plus de requête vers un serveur tiers, plus de délai DNS supplémentaire, et un contrôle total sur la mise en cache.

La démarche est simple. Téléchargez les polices au format WOFF2 (le plus léger et le mieux supporté), placez-les dans votre dossier de fichiers statiques et déclarez-les avec @font-face dans votre CSS. Si votre site est construit avec un framework moderne comme Astro, le processus est automatisable.

Pour en savoir plus sur la conformité de votre site, consultez notre article sur la nLPD et la protection des données.

Combien de polices utiliser ?

La règle d’or : deux polices maximum. Une pour les titres, une pour le corps de texte. C’est suffisant pour créer une hiérarchie visuelle claire sans surcharger le design ni alourdir le temps de chargement.

Si vous n’utilisez qu’une seule police, jouez sur les graisses et les tailles pour différencier les niveaux de contenu. C’est l’approche adoptée par de nombreux sites suisses modernes — et c’est parfaitement efficace quand la police choisie offre une gamme de graisses suffisante.

Trois polices ou plus sur un même site est presque toujours un signal de design amateur. Cela crée de la confusion visuelle et ralentit le chargement inutilement.

Les préférences typographiques suisses

La Suisse occupe une place unique dans l’histoire de la typographie. Le Swiss Style (ou Style international) né dans les années 1950 à Bâle et Zurich a posé les bases du design graphique moderne. Ses principes — grilles rigoureuses, sans-serif géométriques, clarté avant tout — imprègnent encore profondément les attentes visuelles du public suisse.

Cela se traduit par une préférence marquée pour les polices sans-serif propres et structurées. Helvetica, bien sûr, reste une référence culturelle suisse. Mais sur le web, des alternatives modernes comme Inter, DM Sans ou la suisse (le nom est un clin d’oeil) Suisse Int’l offrent un rendu similaire avec de meilleures performances écran.

Les polices serif ne sont pas exclues, mais elles sont généralement réservées à des contextes spécifiques : luxe, horlogerie, gastronomie haut de gamme ou secteur juridique. Le public suisse associe naturellement les serif à un positionnement premium ou traditionnel.

Guide pratique : choisir vos polices en 5 étapes

1. Définissez votre positionnement. Êtes-vous moderne ou traditionnel ? Accessible ou premium ? La réponse oriente le choix entre serif et sans-serif.

2. Testez la lisibilité en contexte. Affichez vos textes réels (pas du Lorem ipsum) dans la police candidate. Vérifiez les accents français (é, è, ê, ë, ç, à) et les chiffres.

3. Vérifiez le poids des fichiers. Idéalement, vos polices ne devraient pas dépasser 100 Ko au total (tous fichiers confondus) en WOFF2. Privilégiez les polices variables pour optimiser ce ratio.

4. Testez sur mobile. La police qui rend bien sur votre écran 27 pouces peut être illisible sur un smartphone à 375 px de large. Vérifiez systématiquement le rendu mobile.

5. Assurez la cohérence cross-plateforme. Certaines polices s’affichent différemment entre macOS, Windows et Android. Testez sur les principaux systèmes avant de valider votre choix.

Les erreurs typographiques les plus courantes

Pour conclure, voici les pièges dans lesquels tombent régulièrement les PME suisses. Utiliser une police “tendance” illisible en petite taille. Charger cinq graisses alors que deux suffisent. Ignorer le rendu des caractères accentués en français. Utiliser une police sans licence commerciale valide. Ne pas définir de police de secours (fallback) en CSS, ce qui provoque un flash de texte non stylé au chargement.

Chacune de ces erreurs est évitable avec un minimum de réflexion en amont. La typographie est un investissement de design qui, bien fait, sert votre site pendant des années. Mal fait, il vous coûte en crédibilité chaque jour.