سی‌اس‌اس/اندازه متن

فونت

اندازه متن

تراز متن

اندازه و وزن متن در CSS

برای کنترل ظاهر متن در صفحات وب، دو ویژگی بسیار مهم در CSS وجود دارد:

ویژگی font-size اندازه فونت را مشخص می‌کند. این مقدار می‌تواند به واحدهای مختلفی مثل پیکسل (px)، ام (em)، درصد (%)، یا رِم (rem) باشد.

p {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

small {
  font-size: 80%;
}

واحد	توضیح
`px`	پیکسل، مقدار مطلق (مثلاً 16px)
`em`	نسبی نسبت به اندازه فونت عنصر والد
`rem`	نسبی نسبت به اندازه فونت ریشه (html)
`%`	درصد نسبت به عنصر والد
`vw`	درصدی از عرض صفحه

توصیه: برای طراحی واکنش‌گرا، استفاده از واحدهای نسبی مانند em یا rem بهتر از px است.

ویژگی font-weight میزان ضخامت حروف را کنترل می‌کند.

مقدارهای مجاز شامل:

h1 {
  font-weight: bold;
}

strong {
  font-weight: 700;
}

.light-text {
  font-weight: 300;
}

نکته: برای استفاده از وزن‌های دقیق عددی (مثلاً 300 یا 600)، باید فونتی که استفاده می‌کنید از آن وزن پشتیبانی کند.

---

h1 {
  font-size: 2.5rem;
  font-weight: 800;
}

p {
  font-size: 1rem;
  font-weight: normal;
}

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