Tailwind CSS Academy · पाठ

पंक्ति ऊँचाई और अक्षर अंतराल

पंक्ति ऊँचाई के लिए leading-* यूटिलिटी और अक्षर अंतराल के लिए tracking-* यूटिलिटी से पठनीयता नियंत्रित करें।

पाठ 3, कुल 4 में से13 चरण

पंक्ति ऊँचाई और अक्षर अंतराल, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

पंक्ति ऊँचाई क्यों महत्वपूर्ण है

पंक्ति ऊँचाई पंक्तियों के बीच का अंतर है। बहुत कम अंतराल से पाठ सघन लगता है और बहुत अधिक अंतराल से बिखरा हुआ। इसे सही रखने पर लंबे पाठ को पढ़ना स्पष्ट रूप से आसान हो जाता है।

Tailwind की leading-* उपयोगिताएँ

leading-* उपयोगिताओं से इसे निर्धारित करें: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2.0)। यह नाम पुराने मुद्रण अक्षर-विन्यास से आया है।

<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

शीर्षकों के लिए leading-tight उपयोग करें, क्योंकि बड़े पाठ में पहले से पर्याप्त जगह होती है; मुख्य पाठ के लिए leading-relaxed रखें, जिसे अधिक खुली जगह चाहिए। leading-normal एक सुरक्षित डिफ़ॉल्ट है।

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

निश्चित leading मान

Tailwind में निश्चित leading भी है: leading-3 से leading-10 तक सटीक पिक्सेल ऊँचाई निर्धारित करते हैं। इनका उपयोग तालिकाओं या सघन UI में करें, जहाँ सटीक अंतराल चाहिए।

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

अक्षर-अंतराल का परिचय

अक्षर-अंतराल, या tracking, अक्षरों के बीच की दूरी है। बड़े शीर्षकों में कम tracking आधुनिक लगता है; badges और tags जैसे छोटे लेबल में अधिक tracking अच्छा लगता है।

Tailwind की tracking-* उपयोगिताएँ

tracking-* से इसे नियंत्रित करें: tracking-tighter और tracking-tight से शुरू होकर normal तक, फिर tracking-wide और tracking-widest तक। ऋणात्मक मान अक्षरों को पास लाते हैं, धनात्मक मान उन्हें फैलाते हैं।

<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

बड़े प्रदर्शित शीर्षकों में लगभग हमेशा tracking-tight या tracking-tighter अच्छा लगता है। बड़े आकारों में डिफ़ॉल्ट अंतराल ढीला लगता है, जबकि उसे कम करने से रूप निखर जाता है।

<!-- 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>

UI लेबल के लिए tracking

अपरकेस UI लेबल के लिए text-xs font-semibold uppercase tracking-wider text-gray-500 आज़माएँ। अतिरिक्त अंतराल अपरकेस अक्षरों की सघनता को संतुलित करता है।

<!-- 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>

leading और tracking को मिलाना

Leading और tracking साथ मिलकर शानदार प्रभाव देते हैं। किसी उद्धरण में खुला एहसास देने के लिए leading-relaxed tracking-wide उपयोग किया जा सकता है; किसी माप-लेबल में 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>

शब्द-अंतराल उपयोगिताएँ

Tailwind में शब्द-अंतराल भी है: word-spacing-tight, normal और wide शब्दों के बीच की दूरी बदलते हैं। इसकी आवश्यकता कम ही पड़ती है, मुख्यतः समान रूप से संरेखित या प्रदर्शित पाठ में।

<p class="word-spacing-wide text-gray-700">
  Extra space between each word in this sentence.
</p>

व्यावहारिक: ब्लॉग लेख की शैलियाँ

एक सुसज्जित ब्लॉग लेख: शीर्षक के लिए text-4xl font-bold leading-tight, उपशीर्षक के लिए text-xl font-light, मुख्य पाठ के लिए text-lg leading-relaxed और पंक्तियाँ सीमित रखने के लिए max-w-prose।

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

त्वरित जाँच

त्वरित जाँच! देखें कि अंतराल कितनी अच्छी तरह व्यवस्थित हुआ। 📏

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

बहुत अच्छा! leading-* पंक्ति ऊँचाई तय करता है, tracking-* अक्षर-अंतराल तय करता है, और शीर्षकों में कम tracking जबकि मुख्य पाठ में खुला leading अच्छा लगता है। आगे: संरेखण और सजावट।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “पंक्ति ऊँचाई और अक्षर अंतराल” पाठ निःशुल्क है?

हाँ—“पंक्ति ऊँचाई और अक्षर अंतराल” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“पंक्ति ऊँचाई और अक्षर अंतराल” में मैं क्या सीखूँगा?

पंक्ति ऊँचाई के लिए leading-* यूटिलिटी और अक्षर अंतराल के लिए tracking-* यूटिलिटी से पठनीयता नियंत्रित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“पंक्ति ऊँचाई और अक्षर अंतराल” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ