Comment ajuster la taille de votre police avec CSS

Le CSS taille de police La propriété « taille de police » définit la taille du texte affiché sur votre site web. Bien la choisir est essentiel, car elle influe sur la lisibilité, l'accessibilité et, au final, le taux de conversion de votre boutique.

Qu'est-ce que la propriété `font-size` en CSS ?

Le taille de police La propriété contrôle la taille du contenu textuel d'un élément. Par défaut, la plupart des navigateurs affichent le texte à une largeur de 12,54 cm. 16pxmais vous pouvez ajuster cela globalement ou élément par élément.

Exemple :

p {

  font-size: 16px;

}

Vous pouvez définir la taille en utilisant unités absolues (comme des pixels) ou unités relatives (comme em or remChoisir la bonne option déterminera la réactivité et l'accessibilité de votre texte.

Unités CSS pour la taille de police

Il existe plusieurs façons de définir la taille du texte en CSS. Passons en revue les plus courantes et leurs cas d'utilisation.

1. px (Pixels)

Unité absolue.

• Reste toujours fixe, quelle que soit la taille de l'écran ou les paramètres utilisateur.
• Idéal pour les logos ou les éléments d'interface utilisateur qui doivent rester cohérents.

Limitation: Ne s'adapte pas aux paramètres de zoom du navigateur ou à la taille de police de base de l'utilisateur.

h1 {

  font-size: 32px;

}

2. em (Par rapport au parent)

Unité relative.

• 1em correspond à la taille de police de l'élément parent.
• Utile pour redimensionner le texte proportionnellement au sein d'un composant.

Remarque : Peut « se cumuler » en cas d'imbrication : un élément de 1.2 em à l'intérieur d'un élément parent de 1.2 em donne une taille 1.44 fois supérieure à la taille de base.

p {

  font-size: 1.2em;

}

3. rem (relatif à la racine)

Par rapport à la racine (html) élément.

• 1rem = la taille de police de l'élément racine (généralement 16px).
• Recommandé aux: cohérence à l'échelle du site.
• Accessibilité et conception adaptative plus faciles à maintenir.

h1 {

  font-size: 2.5rem; /* equals 40px if base font-size = 16px */

}

4. % (Par rapport au parent)

Actes similaires à em, définit la taille de la police en pourcentage de l'élément parent.

p {

  font-size: 100%; /* equals parent’s font size */

}

5. vw / clamp() (Typographie fluide)

La typographie réactive moderne utilise souvent unités de fenêtre ou la serrer() fonction permettant d'adapter la taille du texte à celle de l'écran.

h1 {

  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);

}

Ça signifie:

• Taille minimale de la police = 1.5 rem
• Échelles basées sur la largeur de la fenêtre d'affichage (2.5 kW + 1 rem)
• Taille maximale de la police = 3rem

Idéal pour des titres qui restent équilibrés sur ordinateur et mobile.

Meilleures pratiques en matière d'accessibilité et de lisibilité

Une bonne typographie améliore non seulement le design, mais aussi l'expérience utilisateur et l'accessibilité.

• Taille de la base: Utilisez au moins 16px (1rem) pour le corps du texte.
• Unités évolutives : Utilisez le rem or em pour que les utilisateurs puissent zoomer facilement.
• Hauteur de la ligne: complet » hauteur de ligne : 1.4–1.6 pour une lecture confortable.
• Contraste: Assurez-vous que le contraste des couleurs réponde aux exigences. WCAG normes (au moins 4.5:1 pour un texte normal).
• Évitez les textes très petits Sur les appareils mobiles, toute taille inférieure à 14 px peut réduire la lisibilité.

Exemple de bonnes pratiques :

body {

  font-size: 1rem; /* 16px base */

  line-height: 1.5;

}

Veuillez noter que l'accessibilité a également un impact direct sur le référencement naturel. Google privilégie les pages adaptées aux mobiles et faciles à lire.

Taille de police adaptative dans Shopify et GemPages

Utilisation des paramètres du thème Shopify

Si vous utilisez un thème Shopify, vous pouvez souvent ajuster la taille des polices directement depuis les paramètres. Boutique en ligne > Personnaliser > Paramètres thème > Typographie.

De nombreux thèmes incluent des curseurs ou des listes déroulantes pour contrôler globalement la taille du texte (par exemple, le corps du texte, les titres, le texte des boutons).

Utilisation de l'éditeur GemPages

Si vous avez besoin d'un contrôle plus précis, comme la modification de la taille de la police uniquement pour les pages créées avec GemPages, vous pouvez ajouter du CSS personnalisé dans le panneau des paramètres > Onglet Avancé > section CSS.

Exemple : Ajuster la taille de la police racine avec les requêtes média

:root {

  font-size: 100%; /* base 16px */

}

@media (max-width: 600px) {

  :root {

    font-size: 93.75%; /* ~15px for smaller screens */

  }

}

Cela permet de réduire légèrement la taille de votre police sur mobile, préservant ainsi l'équilibre visuel sans perturber la mise en page.

Erreurs courantes et solutions rapides

FAQ sur la taille des polices CSS

1. Quelle est la meilleure unité de taille de police à utiliser en CSS ?

Utilisez le rem Dans la plupart des cas, il s'adapte à partir de l'élément racine, ce qui le rend réactif et accessible.

2. Quelle est la taille idéale de la police de caractères pour le corps du texte des sites web ?

Entre 16px (1rem) pour le corps du texte. Vous pouvez l'augmenter pour une meilleure lisibilité, notamment sur mobile.

3. Comment puis-je modifier la taille de la police dans Shopify ?

Allez dans Customiser le thème > Paramètres de typographieSi votre thème ne propose pas cette fonctionnalité, utilisez du CSS personnalisé ou l'élément Typographie de GemPages.

4. Un texte plus petit est-il mauvais pour le référencement ?

Indirectement, oui. Une mauvaise lisibilité augmente le taux de rebond, ce qui peut affecter les indicateurs d'engagement et donc le référencement naturel.