Taille, épaisseur et style des polices
Contrôlez la taille du texte avec font-size, son épaisseur avec font-weight et son style avec font-style.
Taille, épaisseur et style des polices est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
font-size
font-size définit la hauteur des glyphes. Il accepte toute unité de longueur. L'utilisation de rem est recommandée pour une typographie évolutive et accessible.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Tailles de police avec mots-clés
CSS fournit également des tailles absolues sous forme de mots-clés (xx-small à xx-large) ainsi que des mots-clés relatifs (smaller, larger), calculés par rapport à la taille de police du parent.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight définit l'épaisseur du texte. Utilisez des valeurs numériques (de 100 à 900 par incréments de 100) ou des mots-clés :
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight et polices variables
Avec les polices variables, toute épaisseur entière (par exemple font-weight: 550) est valide et la police interpole les valeurs entre les axes définis. Cela permet un contrôle typographique très précis.
font-style
font-style contrôle le rendu italique et oblique :
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant active des fonctionnalités typographiques comme les petites capitales :
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
La notation abrégée font
La notation abrégée font regroupe le style, la variante, l'épaisseur, la taille, la hauteur de ligne et la famille :
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Mise à l'échelle adaptative de la taille de police
Utilisez clamp() pour créer une typographie fluide qui évolue progressivement entre une taille minimale et une taille maximale :
<h1>Resize the window — this heading scales fluidly.</h1>
line-height pour une meilleure lisibilité
line-height définit l'espacement vertical entre les lignes. La valeur sans unité (par exemple 1.5) est recommandée : elle s'adapte à la taille de police des descendants.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing et word-spacing
letter-spacing ajoute un espace entre les caractères ; word-spacing ajoute un espace entre les mots. Utilisez des unités em afin que ces espacements s'adaptent à la taille de police.
<h2 class="heading">Spaced Out Heading Text</h2>
Dimensionnement accessible des polices
Ne définissez jamais font-size en px sur l'élément html ou body. Cela remplace la préférence de taille de police définie par l'utilisateur dans le navigateur. Utilisez plutôt des unités rem basées sur la valeur par défaut du navigateur.
Vérification rapide
Quelle valeur numérique de font-weight équivaut au mot-clé bold ?
Récapitulatif
Utilisez rem pour font-size afin de respecter les préférences de l'utilisateur. font-weight accepte les valeurs de 100 à 900 ou des mots-clés. La notation abrégée font regroupe plusieurs propriétés. Utilisez clamp() pour une typographie fluide et une valeur line-height sans unité pour un espacement cohérent.
Questions Fréquemment Posées
La leçon « Taille, épaisseur et style des polices » est-elle gratuite ?
Oui — le texte complet de « Taille, épaisseur et style des polices » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Taille, épaisseur et style des polices » ?
Contrôlez la taille du texte avec font-size, son épaisseur avec font-weight et son style avec font-style. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Taille, épaisseur et style des polices » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Familles de polices et polices sûres pour le web
- Taille, épaisseur et style des polices
- Alignement, décoration et espacement du texte
- Google Fonts et @font-face