Typographie web française et la police Marianne du DSFR
En France, le corps de texte web se situe generalement entre 16 et 18px, avec un interligne de 1,5 pour une lecture confortable. Le Systeme de Design de l'Etat français (DSFR) utilise la police Marianne , creee en 2020 par Mathieu Reguer pour la Direction de l'Information Legale et Administrative (DILA) , comme police principale de tous les services publics numeriques. Si vous utilisez Marianne ou une police similaire a grande hauteur d'x, la taille percue peut etre plus grande que la valeur en px, et les valeurs generees doivent etre validees visuellement avec la police cible. La Tierce majeure (1.250) est le ratio le plus populaire dans les projets de design français, car il cree une hierarchie claire sans ecarts trop dramatiques entre les niveaux de titre.
Les configurations Tailwind CSS personnalisees acceptent directement les valeurs generees dans le fichier tailwind.config.js, sous la cle fontSize. Pour les projets utilisant le DSFR, les tailles sont predefinies par le systeme , cet outil est plus utile pour des projets prives qui construisent leur propre systeme de design.
Ratios d'echelle courants
| Ratio | Nom | Usage recommande |
|---|---|---|
| 1.125 | Seconde majeure | Interfaces denses, tableaux de bord |
| 1.250 | Tierce majeure | Applications, systemes de design |
| 1.333 | Quarte juste | Sites web generalistes, blogs |
| 1.618 | Nombre d'or | Editorial, pages marketing |
Limites des echelles typographiques mathematiques
Une echelle mathematique assure des proportions coherentes , elle ne garantit pas l'harmonie visuelle dans toutes les polices. Les polices a grande hauteur d'x (Inter, Roboto) paraissent plus grandes a la meme valeur en px que les polices a petite hauteur d'x (Garamond). Testez toujours l'echelle generee avec la police reelle cible, a differents niveaux de zoom. Les valeurs sont un point de depart; un ajustement optique reste souvent necessaire.
rem vs px dans la communaute dev française
La communaute frontend française utilise largement rem plutot que px pour les tailles de police : rem respecte la taille de base configuree par l'utilisateur dans son navigateur, ce qui est une exigence d'accessibilite (WCAG 1.4.4 , Redimensionnement du texte). Utilisez clamp(min, prefere, max) pour une mise a l'echelle fluide : font-size: clamp(1rem, 2.5vw, 1.5rem).