Typographie et polices sur Wix Studio : le guide complet

Introduction

La typographie est l'un des éléments les plus sous-estimés du design web. Une mauvaise combinaison de polices peut rendre un site professionnel amateur. Une bonne typographie, à l'inverse, structure l'information, guide l'œil et renforce l'identité de marque sans que le visiteur s'en rende compte consciemment.

Wix Studio offre un contrôle typographique précis grâce au système de thèmes de texte. Ce guide vous explique comment l'utiliser correctement.

Sommaire

1. Comprendre le système de thèmes de texte

2. Choisir ses polices dans Wix Studio

3. Créer une hiérarchie typographique cohérente

4. Les bonnes combinaisons de polices

5. Configurer la typographie responsive

6. Erreurs fréquentes à éviter

7. FAQ

1. Comprendre le système de thèmes de texte

Wix Studio utilise un système de thèmes de texte — des styles prédéfinis que vous pouvez appliquer à tous vos textes. L'avantage : si vous modifiez un style, tous les éléments qui utilisent ce style se mettent à jour automatiquement sur l'ensemble du site.

Les styles de texte par défaut :

• Heading 1 : titre de page principal (H1)

• Heading 2 : titre de section (H2)

• Heading 3 : sous-titre (H3)

• Heading 4, 5, 6 : niveaux supplémentaires

• Paragraph 1 : texte courant principal

• Paragraph 2 : texte courant secondaire (plus petit)

Comment accéder aux thèmes de texte : Éditeur → barre latérale gauche → icône "Site Design" (palette) → "Thème de texte".

2. Choisir ses polices dans Wix Studio

Wix Studio donne accès à plus de 100 polices natives et à l'ensemble de la bibliothèque Google Fonts (plus de 1 400 polices gratuites).

Comment changer une police :

1. Ouvrez les Thèmes de texte

2. Cliquez sur un style (ex. Heading 1)

3. Dans le menu Police, cliquez sur le nom de la police actuelle

4. Tapez le nom de la police souhaitée ou parcourez la liste

5. Cliquez sur "Appliquer à tout le site" pour propager le changement

Les polices à éviter :

• Les polices trop décoratives pour le corps de texte (illisibles à petite taille)

• Les polices trop rares qui ne se chargent pas sur tous les appareils

• Utiliser plus de 2 familles de polices différentes sur un même site

3. Créer une hiérarchie typographique cohérente

La hiérarchie typographique, c'est l'ensemble des règles visuelles qui indiquent au lecteur ce qui est important, ce qui est secondaire, ce qui est détail.

Les paramètres à définir pour chaque style :

Taille : différenciez clairement les niveaux. Un H1 trop proche du H2 en taille crée de la confusion.

Exemple de hiérarchie équilibrée :

• H1 : 48 à 64px

• H2 : 32 à 40px

• H3 : 24 à 28px

• Paragraphe : 16 à 18px

Graisse (font-weight) : utilisez le gras pour les titres, le normal pour le corps de texte. Évitez d'utiliser le gras dans le corps de texte pour "mettre en valeur" — ça perd de son impact si tout est en gras.

Interlettre (letter-spacing) : légèrement positif sur les titres en capitales (0.05em à 0.1em), neutre sur le corps de texte.

Hauteur de ligne (line-height) : 1.4 à 1.6 pour le corps de texte, 1.1 à 1.3 pour les titres.

4. Les bonnes combinaisons de polices

La règle classique : une police serif pour les titres, une sans-serif pour le corps (ou l'inverse). Les deux polices doivent avoir des personnalités complémentaires, pas identiques ni trop contrastées.

Combinaisons qui fonctionnent bien :

• Playfair Display (titres) + Source Sans Pro (corps) → élégant, professionnel

• Montserrat (titres) + Open Sans (corps) → moderne, lisible

• Cormorant Garamond (titres) + Lato (corps) → raffiné, éditorial

• DM Serif Display (titres) + DM Sans (corps) → contemporain, cohérent

Pour une identité monotype (une seule famille) : choisissez une famille avec plusieurs graisses (Light, Regular, Medium, Bold, ExtraBold) — Nunito, Raleway ou Inter fonctionnent très bien dans cet usage.

5. Configurer la typographie responsive

La taille des textes doit s'adapter aux différents breakpoints — ce qui est lisible sur desktop peut être trop grand ou trop petit sur mobile.

Comment ajuster par breakpoint :

1. Dans l'éditeur, passez en vue mobile (icône téléphone en haut)

2. Sélectionnez un titre sur la page

3. Dans le panneau de droite, ajustez la taille de police

4. Cette modification ne s'applique qu'au breakpoint mobile

Règle pratique :

• H1 desktop 56px → H1 mobile 32 à 36px

• H2 desktop 36px → H2 mobile 24 à 28px

• Paragraphe : souvent identique, 16px convient sur tous les écrans

6. Erreurs fréquentes à éviter

Trop de polices différentes. Deux familles maximum. Trois si vraiment justifié (logo, titres, corps). Au-delà, c'est du bruit visuel.

Corps de texte trop petit. 14px est illisible sur mobile pour beaucoup de visiteurs. Minimum 16px pour le corps de texte.

Manque de contraste. Texte gris clair sur fond blanc : joli en maquette, inaccessible en réalité. Vérifiez votre ratio de contraste avec l'outil WebAIM Contrast Checker.

Ne pas utiliser les thèmes de texte. Si vous changez la taille ou la police de chaque élément manuellement, vous perdez toute cohérence et vous multipliez le travail de maintenance.

Conclusion

La typographie est invisible quand elle est réussie — et criante quand elle ne l'est pas. Prenez le temps de configurer vos thèmes de texte une fois, correctement, et votre site gagnera en cohérence et en professionnalisme sur toutes les pages.