Tipografi dan Spasi Responsif
Sesuaikan ukuran font dan spasi pada titik henti berbeda untuk mempertahankan desain yang mudah dibaca dan proporsional di semua perangkat.
Tipografi dan Spasi Responsif adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Why Typography Must Scale
A headline that looks elegant at 48px on a desktop monitor is overwhelming on a 375px phone screen. Conversely, body text at 14px that is comfortable on mobile becomes tiny and hard to read on a large 4K display. Responsive typography solves this by defining different font sizes at different viewport widths, ensuring readability across all devices. Tailwind makes this effortless with responsive text size utilities.
<!-- Hero headline: grows with screen size -->
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight">
Build Beautiful UIs
</h1>Responsive Font Sizes
Tailwind's text-* utilities pair naturally with responsive prefixes. A typical heading scale starts at text-2xl on mobile and steps up to text-5xl or beyond on desktop. Body text might go from text-sm on mobile to text-base on desktop. The key is choosing comfortable starting sizes for the smallest devices, then increasing them progressively.
<!-- Typography scale across breakpoints -->
<div class="space-y-6 p-6 max-w-4xl">
<!-- Display heading: large jump from mobile to desktop -->
<h1 class="text-3xl md:text-5xl lg:text-7xl font-black tracking-tight">
Display Heading
</h1>
<!-- Section heading -->
<h2 class="text-xl md:text-2xl lg:text-3xl font-bold">Section Heading</h2>
<!-- Body copy -->
<p class="text-sm md:text-base lg:text-lg text-gray-700 leading-relaxed max-w-prose">
Body copy scales from small on mobile to base on tablet to large on desktop for comfortable reading at every size.
</p>
<!-- Caption / meta -->
<p class="text-xs md:text-sm text-gray-500">Caption text</p>
</div>Responsive Line Height
Line height affects readability differently at different sizes. Large display text needs tighter line height (leading-tight or leading-none) to look cohesive, while body text benefits from generous spacing (leading-relaxed or leading-loose). At large breakpoints, display headings often change their leading: leading-tight md:leading-none avoids awkward stacking of a two-line headline that becomes single-line at desktop widths.
<!-- Leading adapts with font size -->
<h1 class="text-3xl leading-snug md:text-5xl md:leading-tight lg:text-7xl lg:leading-none font-black">
This Long Headline Wraps
</h1>
<p class="text-sm leading-normal md:text-base md:leading-relaxed lg:text-lg lg:leading-loose text-gray-600 max-w-prose mt-4">
Paragraph text uses relaxed line-height for comfortable reading across all screen sizes.
</p>Responsive Letter Spacing
Letter spacing (tracking) also benefits from responsive adjustments. Tightly tracked display text can look cluttered at small sizes, while wider tracking can make compact headings feel airy. The pattern tracking-tight md:tracking-tighter tightens letter spacing further as the font size increases on desktop, which is a professional typographic convention for large display text.
<!-- Letter spacing tightens as font size grows -->
<h1 class="text-3xl tracking-normal md:text-5xl md:tracking-tight lg:text-7xl lg:tracking-tighter font-black">
Brand Name
</h1>
<!-- Uppercase labels: wider tracking for legibility -->
<p class="text-xs md:text-sm font-semibold uppercase tracking-widest text-gray-500">
CATEGORY LABEL
</p>Responsive Text Alignment
Text alignment is one of the most impactful responsive changes. Hero sections and feature descriptions are typically centered on mobile (where the screen is narrow and centering creates visual balance) but left-aligned on desktop (where long lines of centered text become hard to read and feel disconnected). The pattern text-center md:text-left applies this common convention.
<!-- Center on mobile, left-align on desktop -->
<div class="flex flex-col md:flex-row gap-8 items-center p-8">
<div class="md:w-1/2 text-center md:text-left">
<p class="text-sm font-semibold uppercase tracking-widest text-blue-500 mb-2">New Release</p>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Tailwind CSS v4</h2>
<p class="text-gray-600 max-w-prose md:max-w-none">
The next generation of utility-first CSS.
</p>
<button class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg">
Read the Docs
</button>
</div>
<div class="md:w-1/2">
<div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
</div>
</div>Responsive Padding for Sections
Section padding defines the breathing room between UI blocks. Standard practice is compact padding on mobile (py-10 px-4) and generous padding on desktop (lg:py-24 lg:px-8). The inner container gets its own horizontal padding constraint via max-w-7xl mx-auto while the outer section can have a background that stretches full-width. This two-layer padding approach is the foundation of most page layouts.
<!-- Two-layer padding: outer section + inner container -->
<section class="bg-gray-50 py-10 px-4 sm:py-14 sm:px-6 lg:py-20 lg:px-8">
<!-- Inner container constrains content width -->
<div class="max-w-6xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-6 lg:mb-12">
Our Services
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm">Service 1</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Service 2</div>
<div class="bg-white p-6 rounded-xl shadow-sm">Service 3</div>
</div>
</div>
</section>Responsive Space Between Elements
Vertical rhythm — the spacing between headings, paragraphs, and sections — should be proportionally larger on wider screens. Using Tailwind's space-y-* with responsive prefixes: space-y-4 md:space-y-6 lg:space-y-8 increases the gap between stacked children at larger breakpoints. This maintains visual hierarchy as elements spread out on wider screens.
<!-- Vertical spacing scales with screen width -->
<article class="max-w-prose mx-auto px-4 py-8">
<div class="space-y-4 md:space-y-6 lg:space-y-8">
<h1 class="text-2xl md:text-3xl font-bold">Article Title</h1>
<p class="text-gray-700 leading-relaxed">
First paragraph. The space between elements grows as the screen gets wider.
</p>
<h2 class="text-xl md:text-2xl font-semibold">Section Heading</h2>
<p class="text-gray-700 leading-relaxed">
Second section content with proportional vertical spacing.
</p>
</div>
</article>Responsive max-w for Readability
Body text should be constrained to a readable line length on wide screens. Without a max-width, text on a 1920px monitor can span 200+ characters per line — far beyond comfortable reading width. Apply max-w-prose to text containers, which limits to 65 characters (65ch). On mobile it naturally wraps before reaching that limit, so max-w-prose is effectively responsive without any breakpoint prefix.
<!-- max-w-prose for readable text at any viewport -->
<div class="px-4 py-8">
<h1 class="text-3xl font-bold mb-4">Long Form Content</h1>
<!-- Constrained to 65ch for reading comfort -->
<div class="max-w-prose">
<p class="text-gray-700 leading-relaxed mb-4">
This paragraph is constrained to a comfortable reading width of 65 characters
per line regardless of the viewport size. On mobile it wraps naturally.
On desktop monitors it stays narrow and readable.
</p>
<p class="text-gray-700 leading-relaxed">
Long form writing, documentation, and blog posts benefit enormously
from this constraint. Wide text is one of the most common readability
mistakes in web design.
</p>
</div>
</div>Responsive Font Weight and Style
While less common, font weight and style can also be responsive. A company name or tagline might display in normal weight on mobile (lighter download, better small-size rendering) and bold on desktop (where the font renders crisply at large sizes). font-medium md:font-bold achieves this. Responsive italic (md:not-italic) can similarly normalize decorative styles only needed on small screens.
<!-- Responsive font weight and style -->
<div class="space-y-2 p-4">
<p class="font-medium md:font-bold text-xl">Company Name</p>
<p class="text-sm font-light md:font-normal text-gray-600">
Subheading text gets slightly heavier on larger screens
</p>
<!-- Label: thin on mobile, bold on desktop -->
<span class="text-xs font-thin sm:font-medium uppercase tracking-widest text-blue-500">
FEATURED
</span>
</div>Fluid Typography With Clamp
While Tailwind's breakpoint approach covers most needs, CSS clamp() enables truly fluid font sizes that scale continuously between a minimum and maximum without discrete jumps. Using Tailwind's arbitrary value syntax: text-[clamp(1.5rem,5vw,3rem)] sets the font to at least 1.5rem, at most 3rem, scaling fluidly at 5% of the viewport width in between. This avoids the sudden size jumps at breakpoints and can give a more polished, magazine-like feel.
<!-- Fluid heading using CSS clamp -->
<h1
class="font-black tracking-tight leading-none"
style="font-size: clamp(2rem, 6vw, 5rem)"
>
Fluid Heading
</h1>
<!-- Same with Tailwind arbitrary value (JIT) -->
<p
class="text-[clamp(0.875rem,2.5vw,1.125rem)] text-gray-700 leading-relaxed max-w-prose"
>
Fluid body text scales from 14px at mobile widths to 18px at wide screens.
</p>Complete Responsive Article Layout
Here is a complete, production-ready article header that applies all the responsive typography and spacing techniques from this lesson. The headline, subheadline, meta information, and body text all use responsive size, weight, alignment, and spacing — creating a professional reading experience from mobile to desktop without a single line of custom CSS.
<article class="px-4 py-10 sm:px-6 sm:py-14 lg:py-20">
<div class="max-w-3xl mx-auto">
<!-- Label -->
<p class="text-xs sm:text-sm font-semibold uppercase tracking-widest text-blue-500 mb-3">Tutorial</p>
<!-- Headline -->
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight sm:leading-snug mb-4">
Mastering Responsive Typography in Tailwind
</h1>
<!-- Subheadline -->
<p class="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-2xl mb-6">
Learn how font sizes, spacing, and alignment adapt across breakpoints.
</p>
<!-- Meta -->
<div class="flex items-center gap-4 text-sm text-gray-400">
<span>June 21, 2024</span>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</article>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: text-3xl sm:text-4xl lg:text-6xl creates a responsive heading scale from mobile to desktop, text-center md:text-left is the standard pattern for responsive text alignment in hero sections, and max-w-prose limits body text to 65 characters per line for comfortable reading without needing breakpoints. Next up we explore how to show and hide elements responsively.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tipografi dan Spasi Responsif” gratis?
Ya — teks lengkap “Tipografi dan Spasi Responsif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tipografi dan Spasi Responsif”?
Sesuaikan ukuran font dan spasi pada titik henti berbeda untuk mempertahankan desain yang mudah dibaca dan proporsional di semua perangkat. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Tipografi dan Spasi Responsif” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sistem Titik Henti Tailwind
- Tata Letak Responsif dengan Flex dan Grid
- Tipografi dan Spasi Responsif
- Menampilkan dan Menyembunyikan Elemen Secara Responsif