Amélioration du Texte avec les Utilitaires de Typographie
Tailwind CSS propose un ensemble robuste d’utilitaires pour la gestion de la typographie, permettant de contrôler facilement les tailles de police, les graisses de police et les hauteurs de ligne. Ces utilitaires garantissent un style de texte cohérent et une lisibilité optimale sur différents appareils et tailles d’écran.
Taille de police
Les utilitaires de taille de police dans Tailwind CSS permettent d’ajuster la taille du texte. Ces utilitaires suivent une convention de nommage qui facilite la compréhension et l’application des différentes tailles.
| Font Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
Épaisseur de police
Les utilitaires d'épaisseur de police contrôlent la finesse ou la graisse du texte. Tailwind CSS propose plusieurs utilitaires couvrant une large gamme d'épaisseurs, de très fin à très épais.
| Font Weight | Description |
|---|---|
font-thin | Épaisseur de police très fine. |
font-light | Épaisseur de police légère. |
font-normal | Épaisseur de police normale. |
font-medium | Épaisseur de police moyenne. |
font-semibold | Épaisseur de police semi-grasse. |
font-bold | Épaisseur de police grasse. |
font-extrabold | Épaisseur de police extra-grasse. |
font-black | Épaisseur de police très épaisse. |
index.html
Hauteur de ligne
Les utilitaires de hauteur de ligne contrôlent l'espacement vertical entre les lignes de texte. Une hauteur de ligne appropriée améliore la lisibilité et l'apparence visuelle des blocs de texte.
| Line Height | Description |
|---|---|
leading-none | Aucune hauteur de ligne. |
leading-tight | Hauteur de ligne serrée. |
leading-snug | Hauteur de ligne compacte. |
leading-normal | Hauteur de ligne normale. |
leading-relaxed | Hauteur de ligne espacée. |
leading-loose | Hauteur de ligne très espacée. |
leading-3, leading-4, leading-5, etc. | Hauteur de ligne numérique spécifique. |
index.html
Remarque
Pour obtenir des informations spécifiques sur la taille de police, la graisse de police ou l'interligne, veuillez cliquer sur les liens suivants :
1. Quelle classe utiliser pour définir la taille de police sur extra large ?
2. Quelle classe utilitaire utiliser pour rendre le texte en gras ?
3. Quelle classe permet de définir une hauteur de ligne détendue ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you give examples of how to use these typography utilities in Tailwind CSS?
What are the best practices for combining font size, weight, and line height?
Are there any tips for making text more readable with Tailwind CSS?
Awesome!
Completion rate improved to 3.57Amélioration du Texte avec les Utilitaires de Typographie
Glissez pour afficher le menu
Tailwind CSS propose un ensemble robuste d’utilitaires pour la gestion de la typographie, permettant de contrôler facilement les tailles de police, les graisses de police et les hauteurs de ligne. Ces utilitaires garantissent un style de texte cohérent et une lisibilité optimale sur différents appareils et tailles d’écran.
Taille de police
Les utilitaires de taille de police dans Tailwind CSS permettent d’ajuster la taille du texte. Ces utilitaires suivent une convention de nommage qui facilite la compréhension et l’application des différentes tailles.
| Font Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
Épaisseur de police
Les utilitaires d'épaisseur de police contrôlent la finesse ou la graisse du texte. Tailwind CSS propose plusieurs utilitaires couvrant une large gamme d'épaisseurs, de très fin à très épais.
| Font Weight | Description |
|---|---|
font-thin | Épaisseur de police très fine. |
font-light | Épaisseur de police légère. |
font-normal | Épaisseur de police normale. |
font-medium | Épaisseur de police moyenne. |
font-semibold | Épaisseur de police semi-grasse. |
font-bold | Épaisseur de police grasse. |
font-extrabold | Épaisseur de police extra-grasse. |
font-black | Épaisseur de police très épaisse. |
index.html
Hauteur de ligne
Les utilitaires de hauteur de ligne contrôlent l'espacement vertical entre les lignes de texte. Une hauteur de ligne appropriée améliore la lisibilité et l'apparence visuelle des blocs de texte.
| Line Height | Description |
|---|---|
leading-none | Aucune hauteur de ligne. |
leading-tight | Hauteur de ligne serrée. |
leading-snug | Hauteur de ligne compacte. |
leading-normal | Hauteur de ligne normale. |
leading-relaxed | Hauteur de ligne espacée. |
leading-loose | Hauteur de ligne très espacée. |
leading-3, leading-4, leading-5, etc. | Hauteur de ligne numérique spécifique. |
index.html
Remarque
Pour obtenir des informations spécifiques sur la taille de police, la graisse de police ou l'interligne, veuillez cliquer sur les liens suivants :
1. Quelle classe utiliser pour définir la taille de police sur extra large ?
2. Quelle classe utilitaire utiliser pour rendre le texte en gras ?
3. Quelle classe permet de définir une hauteur de ligne détendue ?
Merci pour vos commentaires !
