فصل 5 از 27 درس 1 از 2

Typography

Font Size، Weight و Line Height

بخشی از آموزش جامع Tailwind CSS

محتوای درس Font Size، Weight و Line Height

Font Size، Weight و Line Height را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Tایپوگرافی خوانا حاصل هماهنگی اندازه فونت، وزن، فاصله خطوط و طول سطر است. عنوان و متن بدنه باید سلسله‌مراتب مشخص داشته باشند و محدودکردن متن فقط در کارت‌های با فضای واقعاً محدود انجام شود.

روش پیاده‌سازی

  1. برای عنوان سطح مناسب heading انتخاب کنید.
  2. اندازه، font-weight و line-height متن فارسی را با هم تنظیم کنید.
  3. برای متن طولانی از max-width و در کارت‌ها از truncate یا line-clamp استفاده کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<article class="max-w-2xl">
  <h1 class="text-4xl font-black tracking-tight text-slate-950">آموزش Tailwind CSS</h1>
  <p class="mt-4 text-lg leading-8 text-slate-600">
    متن بدنه باید خوانا، آرام و دارای فاصله خط مناسب باشد.
  </p>
</article>

خروجی مورد انتظار

عنوان برجسته و متن بدنه خوانا.

نکات مهم و خطاهای رایج

  • Line Clamp نباید اطلاعات ضروری یا CTA را پنهان کند.
  • Line-height کم در متن فارسی خوانایی نقطه‌ها و حروف را کاهش می‌دهد.

تمرین پیشنهادی

مثال را با عنوان دوخطی و متن بدنه طولانی در موبایل آزمایش کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS