Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Textverbesserung mit Typografie-Utilities | Kernkonzepte und Grundlegende Gestaltung
Tailwind CSS für Webentwicklung

bookTextverbesserung mit Typografie-Utilities

Tailwind CSS bietet eine umfassende Sammlung von Utilities zur Verwaltung der Typografie, mit denen sich Schriftgrößen, Schriftgewichte und Zeilenhöhen einfach steuern lassen. Diese Utilities sorgen dafür, dass Ihr Text konsistent gestaltet und auf verschiedenen Geräten sowie Bildschirmgrößen gut lesbar bleibt.

Schriftgröße

Mit den Schriftgrößen-Utilities in Tailwind CSS können Sie die Größe Ihres Textes anpassen. Diese Utilities folgen einer Namenskonvention, die das Verständnis und die Anwendung verschiedener Größen erleichtert.

Font SizeDescription
text-xsExtra small text.
text-smSmall text.
text-baseBase text (default size).
text-lgLarge text.
text-xlExtra large text.
text-2xl, text-3xl, text-4xl, text-5xl, text-6xlIncreasingly larger text sizes.
index.html

index.html

copy

Schriftstärke

Schriftstärke-Utilities steuern die Dicke oder Fettheit des Textes. Tailwind CSS bietet verschiedene Utilities, um ein breites Spektrum an Schriftstärken von dünn bis schwarz abzudecken.

Font WeightBeschreibung
font-thinDünne Schriftstärke.
font-lightLeichte Schriftstärke.
font-normalNormale Schriftstärke.
font-mediumMittlere Schriftstärke.
font-semiboldHalbfette Schriftstärke.
font-boldFette Schriftstärke.
font-extraboldExtra fette Schriftstärke.
font-blackSehr fette Schriftstärke.
index.html

index.html

copy

Zeilenhöhe

Zeilenhöhe-Utilities steuern den vertikalen Abstand zwischen Textzeilen. Eine angemessene Zeilenhöhe verbessert die Lesbarkeit und das gesamte visuelle Erscheinungsbild von Textblöcken.

Line HeightBeschreibung
leading-noneKeine Zeilenhöhe.
leading-tightEnge Zeilenhöhe.
leading-snugKompakte Zeilenhöhe.
leading-normalNormale Zeilenhöhe.
leading-relaxedEntspannte Zeilenhöhe.
leading-looseLockere Zeilenhöhe.
leading-3, leading-4, leading-5, etc.Spezifische numerische Zeilenhöhe.
index.html

index.html

copy

Hinweis

Für spezifische Informationen zu Schriftgröße, Schriftgewicht oder Zeilenhöhe klicken Sie bitte auf die folgenden Links:

1. Welche Klasse wird verwendet, um die Schriftgröße auf extra groß zu setzen?

2. Welche Utility-Klasse wird verwendet, um Text fett darzustellen?

3. Welche Klasse setzt den Zeilenabstand auf entspannt?

question mark

Welche Klasse wird verwendet, um die Schriftgröße auf extra groß zu setzen?

Select the correct answer

question mark

Welche Utility-Klasse wird verwendet, um Text fett darzustellen?

Select the correct answer

question mark

Welche Klasse setzt den Zeilenabstand auf entspannt?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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.57

bookTextverbesserung mit Typografie-Utilities

Swipe um das Menü anzuzeigen

Tailwind CSS bietet eine umfassende Sammlung von Utilities zur Verwaltung der Typografie, mit denen sich Schriftgrößen, Schriftgewichte und Zeilenhöhen einfach steuern lassen. Diese Utilities sorgen dafür, dass Ihr Text konsistent gestaltet und auf verschiedenen Geräten sowie Bildschirmgrößen gut lesbar bleibt.

Schriftgröße

Mit den Schriftgrößen-Utilities in Tailwind CSS können Sie die Größe Ihres Textes anpassen. Diese Utilities folgen einer Namenskonvention, die das Verständnis und die Anwendung verschiedener Größen erleichtert.

Font SizeDescription
text-xsExtra small text.
text-smSmall text.
text-baseBase text (default size).
text-lgLarge text.
text-xlExtra large text.
text-2xl, text-3xl, text-4xl, text-5xl, text-6xlIncreasingly larger text sizes.
index.html

index.html

copy

Schriftstärke

Schriftstärke-Utilities steuern die Dicke oder Fettheit des Textes. Tailwind CSS bietet verschiedene Utilities, um ein breites Spektrum an Schriftstärken von dünn bis schwarz abzudecken.

Font WeightBeschreibung
font-thinDünne Schriftstärke.
font-lightLeichte Schriftstärke.
font-normalNormale Schriftstärke.
font-mediumMittlere Schriftstärke.
font-semiboldHalbfette Schriftstärke.
font-boldFette Schriftstärke.
font-extraboldExtra fette Schriftstärke.
font-blackSehr fette Schriftstärke.
index.html

index.html

copy

Zeilenhöhe

Zeilenhöhe-Utilities steuern den vertikalen Abstand zwischen Textzeilen. Eine angemessene Zeilenhöhe verbessert die Lesbarkeit und das gesamte visuelle Erscheinungsbild von Textblöcken.

Line HeightBeschreibung
leading-noneKeine Zeilenhöhe.
leading-tightEnge Zeilenhöhe.
leading-snugKompakte Zeilenhöhe.
leading-normalNormale Zeilenhöhe.
leading-relaxedEntspannte Zeilenhöhe.
leading-looseLockere Zeilenhöhe.
leading-3, leading-4, leading-5, etc.Spezifische numerische Zeilenhöhe.
index.html

index.html

copy

Hinweis

Für spezifische Informationen zu Schriftgröße, Schriftgewicht oder Zeilenhöhe klicken Sie bitte auf die folgenden Links:

1. Welche Klasse wird verwendet, um die Schriftgröße auf extra groß zu setzen?

2. Welche Utility-Klasse wird verwendet, um Text fett darzustellen?

3. Welche Klasse setzt den Zeilenabstand auf entspannt?

question mark

Welche Klasse wird verwendet, um die Schriftgröße auf extra groß zu setzen?

Select the correct answer

question mark

Welche Utility-Klasse wird verwendet, um Text fett darzustellen?

Select the correct answer

question mark

Welche Klasse setzt den Zeilenabstand auf entspannt?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7
some-alt