سی‌اس‌اس/تراز متن

اندازه متن

تراز متن

دگرگونی متن

سی‌اس‌اس

تراز متن، فاصله حروف و فاصله خطوط در CSS

برای بهبود خوانایی و زیبایی متن در صفحات وب، می‌توان از ویژگی‌هایی مانند text-align، letter-spacing و line-height استفاده کرد. این ویژگی‌ها کنترل دقیقی بر نحوه قرارگیری و فاصله‌های متن درون عناصر فراهم می‌کنند.

تراز متن با text-align

ویژگی text-align موقعیت افقی متن را درون عنصر مشخص می‌کند.

مقدارهای رایج:

• left – تراز به چپ (پیش‌فرض در زبان‌های چپ‌به‌راست مانند انگلیسی)
• right – تراز به راست (پیش‌فرض در زبان‌هایی مانند فارسی و عربی)
• center – تراز وسط
• justify – کشیده کردن متن تا پر کردن عرض کامل عنصر

p {
  text-align: justify;
}

h1 {
  text-align: center;
}

.article {
  text-align: right;
}

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

ویژگی letter-spacing فاصله بین حروف متن را تنظیم می‌کند. مقدار آن می‌تواند مثبت (افزایش فاصله) یا منفی (کاهش فاصله) باشد.

h2 {
  letter-spacing: 2px; /* افزایش فاصله بین حروف */
}

p.tight {
  letter-spacing: -0.5px; /* کاهش فاصله بین حروف */
}

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

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

مقدار می‌تواند به صورت عدد (نسبی)، واحدهای اندازه‌گیری (px، em) یا درصد باشد.

p {
  line-height: 1.6; /* فاصله خط نسبی */
}

h1 {
  line-height: 40px; /* فاصله خط مطلق */
}

blockquote {
  line-height: 150%; /* فاصله خط به صورت درصد */
}

نکته: مقدار نسبی (بدون واحد) معمولاً بهترین انتخاب برای طراحی واکنش‌گرا و خوانایی بهینه است.

نمونه ترکیبی

.article-text {
  text-align: justify;
  letter-spacing: 0.5px;
  line-height: 1.8;
}

استفاده‌ی مناسب و ترکیب این ویژگی‌ها باعث بهبود زیبایی و خوانایی متن می‌شود.