Concevoir pour le français : textes plus longs, accents et typographie à prévoir dès la maquette

Il arrive qu’une interface soit pensée en anglais, validée avec des textes courts, puis traduite en français quelques semaines avant la mise en ligne. C’est à ce moment que l’on découvre des boutons qui débordent, des titres sur quatre lignes et des accents coupés. Ce n’est pas une fatalité : quelques choix de conception, faits tôt, évitent la plupart de ces problèmes.

Le français prend souvent plus de place

D’une langue à l’autre, la longueur des textes varie, et le français s’écrit en général avec plus de mots que l’anglais pour dire la même chose. Nous n’avons pas de coefficient universel à vous proposer, car il dépend du type de texte : un libellé de bouton, un message d’erreur ou un paragraphe ne se comportent pas pareil.

La bonne pratique consiste à ne jamais valider une maquette avec du texte provisoire. Remplacez le faux texte par de vrais libellés en français, y compris les plus longs, par exemple « Ajouter au panier », « Poursuivre vers le paiement » ou « Recevoir mes informations ». Si le composant tient avec ces textes, il tiendra avec les autres.

Des composants qui acceptent de grandir

Concrètement, cela se traduit par des choix précis dans le système de design :

• des boutons dont la largeur s’adapte au contenu plutôt qu’une largeur fixe ;
• des menus et des onglets capables de passer à la ligne ou de défiler proprement ;
• des cartes dont la hauteur absorbe un titre plus long sans casser la grille ;
• des espaces intérieurs généreux, pour que le texte ne touche pas les bords.

Un composant bien construit se teste en le mettant sous contrainte. Dans vos outils de maquette, dupliquez-le avec le texte français le plus long de votre site, puis réduisez la largeur à celle d’un petit téléphone. Ce test prend dix minutes et épargne des allers-retours avec les développeurs.

Accents, capitales et glyphes

En français correct, les majuscules portent leurs accents : on écrit « À propos » et « École », pas « A propos » ni « Ecole ». Or certaines polices, ou certains styles de titres en capitales, gèrent mal les accents sur les majuscules : ils se heurtent à la ligne du dessus ou sont coupés par un interligne trop serré. Vérifiez aussi que votre police contient les caractères propres au français, comme œ, Œ, ç et les voyelles accentuées.

Le choix d’une police pour un site francophone devrait donc inclure ce petit contrôle : saisir une phrase pleine d’accents, en minuscules et en capitales, et regarder le résultat à plusieurs tailles. Cette vérification est simple et évite de découvrir le problème en production.

Les détails de typographie que les lecteurs remarquent

La typographie française a ses usages. Une espace précède les deux-points, le point-virgule, le point d’interrogation et le point d’exclamation. Les guillemets français s’écrivent avec des espaces à l’intérieur. Pour que ces signes ne se retrouvent pas seuls au début d’une nouvelle ligne, on utilise des espaces insécables.

Sur le web, cela suppose d’y penser dans le contenu et dans les modèles. Déclarez aussi la langue de la page dans le code, car la césure automatique et certaines règles de mise en forme en dépendent. Les formats de date, de nombre et de devise méritent la même attention : la virgule décimale, l’espace pour séparer les milliers, le symbole de l’euro placé après le montant. Ils diffèrent d’ailleurs un peu entre la France, la Suisse et le Québec, et il vaut mieux demander à un relecteur local.

Un ton de marque qui vouvoie juste

Au-delà de la mise en page, le design inclut la voix de la marque. En contexte professionnel francophone, le vouvoiement est la norme, sauf choix éditorial assumé pour une cible jeune et informelle. L’important est de faire un choix et de s’y tenir : un bouton en « tu » au milieu d’un site en « vous » se remarque immédiatement.

Si vous préparez une version française de votre site ou de votre application, nous vous recommandons de rédiger d’abord les textes clés, puis de dessiner autour d’eux, plutôt que l’inverse. Chez Trigon, nous travaillons ainsi sur nos projets de design d’interface : le contenu réel guide la maquette, et le résultat est plus robuste le jour de la mise en ligne.