La typographie représente 90 % de la conception Web – le reste n’est que de la décoration.
La typographie – l'art d'organiser le texte – est l'élément le plus important de la conception Web, car le texte est le moyen par lequel la plupart des informations sont communiquées en ligne. Une bonne typographie est invisible ; les lecteurs se concentrent sur le contenu et non sur la police de caractères. Une mauvaise typographie est immédiatement perceptible et nuit à la crédibilité. Selon une étude réalisée en 2025 par Adobe, 73 % des consommateurs déclarent qu'ils n'achèteraient pas sur un site avec une mauvaise typographie.
Chez x13apps, nous traitons la typographie comme la pierre angulaire de chaque conception. Voici les principes qui guident nos choix de polices.
Limitez votre sélection de polices
Utilisez un maximum de 2 à 3 polices de caractères sur n'importe quel site Web. Un pour les titres, un pour le corps du texte et éventuellement un pour les accents ou à des fins spéciales. Utiliser trop de polices crée un chaos visuel. Choisissez des polices qui contrastent entre elles : un empattement pour les titres et un sans empattement pour le corps du texte créent une hiérarchie claire et un intérêt visuel.
Google Fonts propose des centaines de polices gratuites optimisées pour le Web. Les associations populaires incluent Playfair Display avec Source Sans Pro ou Inter avec Merriweather. Pour les projets professionnels, envisagez les polices sous licence de Typekit ou Hoefler&Co.
Donner la priorité à la lisibilité
Le corps du texte doit mesurer au moins 16 px (18 à 20 px est préférable pour une meilleure lisibilité sur les écrans modernes). La hauteur des lignes doit être comprise entre 1,5 et 1,8 fois la taille de la police pour une lecture confortable. La longueur des lignes doit être comprise entre 50 et 75 caractères par ligne : les lignes plus longues fatiguent les yeux et les lignes plus courtes perturbent le flux. Utilisez un espacement adéquat entre les paragraphes pour séparer visuellement les idées.
Visez un rapport de contraste élevé entre le texte et l'arrière-plan : au moins 4,5 : 1 pour le texte normal et 3 : 1 pour le texte volumineux (WCAG AA). Évitez le texte gris clair sur fond blanc, aussi tendance soit-il. Si les utilisateurs ont du mal à lire votre contenu, ils partiront.
Établir une hiérarchie typographique claire
Les utilisateurs scannent avant de lire. Une hiérarchie claire utilisant différentes tailles de police, épaisseurs et couleurs guide l'œil et communique l'importance relative des informations. Les titres doivent être sensiblement plus grands et plus gras que le corps du texte. Utilisez une balance modulaire pour des ratios de dimensionnement cohérents.
Tenez compte des performances et de l’accessibilité
Les polices personnalisées ont un impact sur le temps de chargement des pages. Utilisez font-display: swap pour garantir que le texte reste visible pendant le chargement de la police. Sous-ensemble de polices pour inclure uniquement les caractères dont vous avez besoin. Envisagez des polices variables qui combinent plusieurs épaisseurs dans un seul fichier. Assurez-vous que tout le texte peut être redimensionné à 200 % sans casser la mise en page. Utilisez des unités relatives (rem, em) plutôt que des pixels pour la taille des polices. Chez x13apps, nous sélectionnons et mettons en œuvre une typographie qui améliore à la fois l'esthétique et la lisibilité. Pour en savoir plus, lisez notreguide de psychologie des couleurs.