الطباعة والمسافات المتجاوبة
اضبط أحجام الخطوط والمسافات عند نقاط توقف مختلفة للحفاظ على تصميمات مقروءة ومتناسقة في جميع الأجهزة.
الطباعة والمسافات المتجاوبة درس مجاني في Tailwind CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Tailwind CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
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.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «الطباعة والمسافات المتجاوبة» مجاني؟
نعم — نص درس «الطباعة والمسافات المتجاوبة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Tailwind CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «الطباعة والمسافات المتجاوبة»؟
اضبط أحجام الخطوط والمسافات عند نقاط توقف مختلفة للحفاظ على تصميمات مقروءة ومتناسقة في جميع الأجهزة. تتمرن على Tailwind CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Tailwind CSS Academy؟
لا تُشترط خبرة سابقة. Tailwind CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الطباعة والمسافات المتجاوبة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Tailwind CSS Academy هذا؟
نعم. كل درس في Tailwind CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نظام نقاط التوقف في Tailwind
- التخطيطات المتجاوبة باستخدام Flex وGrid
- الطباعة والمسافات المتجاوبة
- إظهار العناصر وإخفاؤها بصورة متجاوبة