line-height، letter-spacing، word-spacing

کنترل فاصله‌ها در متن: line-height، letter-spacing و word-spacing

در درس قبل با Propertyهایی آشنا شدیم که ظاهر خود حروف رو کنترل می‌کردن (اندازه، ضخامت، کجی، کشیدگی). حالا وقتشه سراغ سه Property بریم که به‌جای خود حروف، فاصله‌های اطراف‌شون رو کنترل می‌کنن؛ فاصله بین خطوط، فاصله بین حروف، و فاصله بین کلمات.

line-height: فاصله بین خطوط

p {
  line-height: 1.6;
}

Property به اسم line-height ارتفاع هر خط از متن رو مشخص می‌کنه؛ یعنی فاصله عمودی بین خط‌های پیاپی یک پاراگراف یا هر بلوک متنی دیگه.

مقدار بدون واحد: بهترین انتخاب

body {
  font-size: 16px;
  line-height: 1.5;
}

وقتی line-height بدون هیچ واحدی نوشته بشه (مثل 1.5)، این عدد به‌عنوان یک ضریبfont-size × 1.5 خواهد بود. در این مثال، چون فونت ۱۶ پیکسله، ارتفاع هر خط ۲۴ پیکسل محاسبه می‌شه.

چرا مقدار بدون واحد به px یا سایر واحدهای ثابت ترجیح داده می‌شود؟

.parent {
  font-size: 16px;
  line-height: 24px;
}

.child {
  font-size: 24px;
  /* line-height هم به همان 24px ارث می‌رسد، نه نسبت به فونت جدید */
}

وقتی line-height با یک واحد ثابت (مثل 24px) تعریف بشه، این مقدار دقیق پیکسلی، بدون تغییر، به فرزندان ارث می‌رسه؛ حتی اگه فرزند فونت بزرگ‌تری داشته باشه. نتیجه این می‌شه که خط‌ها نسبت به اندازه فونت جدید فرزند، بیش از حد نزدیک به هم به‌نظر برسن.

.parent {
  font-size: 16px;
  line-height: 1.5;
}

.child {
  font-size: 24px;
  /* line-height به‌صورت نسبی دوباره محاسبه می‌شود: 24 × 1.5 = 36px */
}

اما وقتی line-height بدون واحد (یعنی یک ضریب خالص مثل 1.5) تعریف بشه، این ضریب به فرزندان ارث می‌رسه، نه یک مقدار پیکسلی ثابت؛ یعنی هر فرزند، ارتفاع خط رو نسبت به فونت خودش، دوباره و به‌درستی محاسبه می‌کنه. به همین دلیل، مقدار بدون واحد تقریباً همیشه انتخاب بهتر و توصیه‌شده‌تری برای line-height است.

تأثیر line-height روی خوانایی

.tight {
  line-height: 1.1;
}

.comfortable {
  line-height: 1.6;
}

.loose {
  line-height: 2.2;
}

مقدار خیلی کوچک (مثل 1.1) باعث می‌شه خط‌ها به هم فشرده و خوندن پاراگراف‌های طولانی سخت بشه. مقدار خیلی بزرگ (مثل 2.2) هم باعث می‌شه خط‌ها بیش‌ازحد از هم فاصله بگیرن و ارتباط بصری بین خط‌ها ضعیف بشه. برای متن پاراگراف معمولی، معمولاً بازه‌ای بین 1.4 تا 1.6 بهترین تعادل بین فشردگی و خوانایی رو ایجاد می‌کنه.

letter-spacing: فاصله بین حروف

.title {
  letter-spacing: 2px;
}

.condensed-text {
  letter-spacing: -0.5px;
}

Property به اسم letter-spacing فاصله افقی بین حروف پیاپی یک کلمه رو کنترل می‌کنه. مقدار مثبت، حروف رو از هم دورتر می‌کنه (که به این حالت گاهی Tracking هم گفته می‌شه)؛ مقدار منفی، حروف رو به هم نزدیک‌تر می‌کنه.

کاربرد رایج letter-spacing: تیترهای بزرگ و کوچک‌نوشته‌ها

.hero-title {
  font-size: 3rem;
  letter-spacing: -0.02em;
}

.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.75rem;
}

در تیترهای خیلی بزرگ، معمولاً یک مقدار منفی کوچک برای letter-spacing باعث می‌شه حروف کمی به هم نزدیک‌تر و بصری فشرده‌تر به‌نظر برسن (که در فونت‌های بزرگ، این حالت اغلب زیباتره). برعکسش، برای برچسب‌های کوچک با حروف بزرگ (مثل UPPERCASE LABEL)، یک مقدار مثبت کوچک، خوانایی و ظاهر رو بهبود می‌ده.

word-spacing: فاصله بین کلمات

.spaced-text {
  word-spacing: 8px;
}

Property به اسم word-spacing دقیقاً همون منطق letter-spacing رو داره، ولی به‌جای فاصله بین تک‌تک حروف، فاصله بین کلمات کامل رو کنترل می‌کنه؛ یعنی فاصله اضافه یا کم‌شده‌ای که به فضای خالی پیش‌فرض بین هر دو کلمه (که معمولاً از یک کاراکتر فاصله ساده تشکیل شده) اضافه می‌شه.

<p class="spaced-text">این یک متن نمونه است که فاصله بین کلماتش بیشتر شده.</p>

در این مثال، فاصله بین هر کلمه از این پاراگراف، ۸ پیکسل بیشتر از حالت معمولی خواهد بود.

کاربرد word-spacing نسبت به letter-spacing

در عمل، word-spacing نسبت به letter-spacing کاربرد بسیار محدودتری در طراحی‌های واقعی داره؛ چون تغییر فاصله بین کلمات، معمولاً خیلی سریع باعث می‌شه متن نامنظم و ناخوانا به‌نظر برسه، مخصوصاً در مقادیر بزرگ. این Property بیشتر برای تنظیمات ظریف یا موارد خاص طراحی استفاده می‌شه، نه به‌عنوان یک ابزار رایج در تایپوگرافی روزمره.

یک مثال ترکیبی کامل

.article-body {
  font-size: 1.125rem;
  line-height: 1.7;
}

.section-heading {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.eyebrow-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

در این مثال، متن اصلی مقاله با یک line-height نسبتاً باز (۱.۷) برای خوانایی راحت‌تر تعریف شده؛ تیتر بخش‌ها با line-height فشرده‌تر (۱.۲، چون تیترهای بزرگ نیازی به فاصله زیاد خطی ندارن، مخصوصاً وقتی معمولاً فقط یک یا دو خط هستن) و کمی letter-spacing منفی؛ و یک برچسب کوچک با حروف بزرگ و letter-spacing مثبت برای خوانایی بهتر.

نکات مهم

• line-height بدون واحد (مثل 1.5)، به‌عنوان ضریبی از font-size محاسبه می‌شود و برخلاف مقادیر ثابت، به فرزندان به‌درستی و نسبی ارث می‌رسد.
• letter-spacing برای تنظیم فاصله بین حروف، و word-spacing برای فاصله بین کلمات کامل به‌کار می‌رود.
• مقادیر منفی در letter-spacing و word-spacing کاملاً معتبرند و باعث نزدیک‌تر شدن حروف یا کلمات به هم می‌شوند.

اشتباهات رایج

• استفاده از line-height با واحد ثابت (مثل px)، که در ساختارهای تودرتو با فونت‌های متفاوت، رفتار نامناسبی ایجاد می‌کند.
• استفاده از مقادیر خیلی بزرگ برای letter-spacing یا word-spacing در متن پاراگراف معمولی، که خوانایی را به‌شدت کاهش می‌دهد.
• فراموش کردن این‌که این سه Property، مکمل هم هستند، نه جایگزین یکدیگر؛ هرکدام کنترل بُعد متفاوتی از فاصله‌گذاری متن را دارند.

جمع‌بندی

line-height فاصله عمودی بین خطوط متن را کنترل می‌کند و بهتر است بدون واحد و به‌صورت ضریب تعریف شود. letter-spacing فاصله بین حروف را، و word-spacing فاصله بین کلمات کامل را کنترل می‌کند. هر سه این Propertyها، ابزارهای مهمی برای بهبود خوانایی و زیبایی بصری متن هستند، به شرطی که با تعادل و بر اساس نوع محتوا (پاراگراف بلند در برابر تیتر بزرگ) انتخاب شوند.