Hauteur de ligne et espacement des lettres
Contrôlez la lisibilité avec les utilitaires leading-* pour la hauteur de ligne et tracking-* pour l’espacement des lettres.
Hauteur de ligne et espacement des lettres est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Line Height Matters
Line height is the space between lines. Too tight feels cramped, too loose feels scattered. Getting it right makes long text noticeably easier to read.
Tailwind's leading-* Utilities
Set it with the leading-* utilities: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2.0). The name comes from old print type.
<p class="leading-tight">Tight: good for headings</p>
<p class="leading-normal">Normal: default for most text</p>
<p class="leading-relaxed">Relaxed: comfortable for body text</p>
<p class="leading-loose">Loose: for spacious editorial layouts</p>Leading for Headings vs Body
Use leading-tight for headings, since big text already has room, and leading-relaxed for body, which needs more breathing space. leading-normal is a safe default.
<h1 class="text-4xl font-bold leading-tight text-gray-900">
A Two-Line Heading That
Stays Tightly Together
</h1>
<p class="text-base leading-relaxed text-gray-600 mt-4">
Body paragraph text benefits from more line spacing.
It makes long passages easier to follow line by line.
</p>Fixed Leading Values
Tailwind also has fixed leading: leading-3 to leading-10 set exact pixel heights. Reach for these in tables or dense UI where you need precise spacing.
<p class="leading-3">Very tight (12px)</p>
<p class="leading-5">Compact (20px)</p>
<p class="leading-7">Comfortable (28px)</p>
<p class="leading-10">Spacious (40px)</p>Introduction to Letter Spacing
Letter spacing, or tracking, is the gap between characters. Tight tracking feels modern on big headings; wide tracking suits short labels like badges and tags.
Tailwind's tracking-* Utilities
Control it with tracking-*: from tracking-tighter and tracking-tight, through normal, to tracking-wide and tracking-widest. Negative pulls in, positive spreads out.
<p class="tracking-tighter">Tighter: editorial large headings</p>
<p class="tracking-normal">Normal: default body text</p>
<p class="tracking-wide">Wide: comfortable subheadings</p>
<p class="tracking-widest">Widest: UI labels and badges</p>Tracking for Display Headings
Big display headings almost always want tracking-tight or tracking-tighter. At large sizes the default spacing feels loose, and tightening it looks polished.
<!-- Without tracking adjustment -->
<h1 class="text-6xl font-bold">Feels Loose</h1>
<!-- Professional: tighter tracking at large sizes -->
<h1 class="text-6xl font-bold tracking-tight">Feels Cohesive</h1>Tracking for UI Labels
For uppercase UI labels, try text-xs font-semibold uppercase tracking-wider text-gray-500. The extra spacing offsets how cramped uppercase letters can feel.
<!-- Dashboard section label -->
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500">
Recent Activity
</span>
<!-- Badge -->
<span class="bg-green-100 text-green-700 text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full">
Active
</span>Combining Leading and Tracking
Leading and tracking shine together. A pull quote might use leading-relaxed tracking-wide for an open feel; a metric label uses tracking-widest leading-none.
<!-- Pull quote style -->
<blockquote class="text-2xl italic font-light leading-relaxed tracking-wide text-gray-600">
'Design is intelligence made visible.'
</blockquote>
<!-- Dashboard label style -->
<p class="text-xs font-bold uppercase tracking-widest leading-none text-gray-500">
Revenue MTD
</p>Word Spacing Utilities
Tailwind even has word spacing: word-spacing-tight, normal, and wide adjust the gap between words. You will need it rarely, mostly for justified or display text.
<p class="word-spacing-wide text-gray-700">
Extra space between each word in this sentence.
</p>Practical: Blog Article Styles
A polished blog article: text-4xl font-bold leading-tight for the title, text-xl font-light for the subtitle, text-lg leading-relaxed for body, max-w-prose to wrap.
<article class="max-w-prose mx-auto px-4">
<h1 class="text-4xl font-bold leading-tight tracking-tight text-gray-900 mb-2">
Article Title
</h1>
<p class="text-xl font-light leading-snug text-gray-500 mb-8">
A compelling subtitle for the article.
</p>
<p class="text-lg leading-relaxed text-gray-700">
The body of the article content goes here.
</p>
</article>Quick Check
Quick check! See how spacing settled in. 📏
Lesson Recap
Nice! leading-* sets line height, tracking-* sets letter spacing, and headings like tight tracking while body likes relaxed leading. Next up: alignment and decoration.
Questions Fréquemment Posées
La leçon « Hauteur de ligne et espacement des lettres » est-elle gratuite ?
Oui — le texte complet de « Hauteur de ligne et espacement des lettres » 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 Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Hauteur de ligne et espacement des lettres » ?
Contrôlez la lisibilité avec les utilitaires leading-* pour la hauteur de ligne et tracking-* pour l’espacement des lettres. Tu pratiques Tailwind 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 Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind 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 3 sur 4.
Combien de temps prend la leçon « Hauteur de ligne et espacement des lettres » ?
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 Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind 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
- Taille et graisse de police
- Couleur et opacité du texte
- Hauteur de ligne et espacement des lettres
- Alignement et décoration du texte