فونت‌های وب: چطور متن سایت را چشم‌نواز کنیم؟

فونت‌ها، قلب تپنده ظاهر وب! ❤️

سلام به همه دوستداران زیبایی و نظم! یکی از مهم‌ترین بخش‌های طراحی وب، انتخاب و استایل‌دهی به فونت‌هاست. فونت‌ها می‌تونن حس و حال یه صفحه رو کاملاً عوض کنن. امروز می‌خوام سه تا از پراستفاده‌ترین خصوصیات CSS برای کنترل فونت‌ها رو بهتون معرفی کنم: `font-family`، `font-size` و `font-weight. آماده‌اید تا ظاهر متنهاتون رو حرفه‌ای کنید؟ ✨

1. `font-family`: انتخاب خانواده فونت! 👨‍👩‍👧‍👦

خصوصیت `font-family` تعیین می‌کنه که متن شما با چه فونتی نمایش داده بشه. بهترین کار اینه که یه لیست از چند تا فونت رو به ترتیب اولویت بهش بدین. مرورگر سعی می‌کنه اولین فونت موجود در سیستم کاربر رو پیدا کنه و اگه پیدا نکرد، می‌ره سراغ بعدی.

نکات مهم:

• فونت‌های سیستمی: فونت‌هایی که به طور پیش‌فرض روی اکثر سیستم‌ها نصب هستن (مثل Arial, Verdana, Times New Roman).
• فونت‌های وب (Web Fonts): فونت‌هایی که از سرویس‌هایی مثل Google Fonts یا Adobe Fonts بارگذاری می‌شن.
• نام فونت‌های با فاصله: اگه اسم فونت شما شامل فاصله بود (مثل “Times New Roman”)، باید حتماً اون رو داخل علامت کوتیشن (`” “`) قرار بدین.
• فونت‌های عمومی (Generic Families): همیشه در انتهای لیست، یه نوع فونت عمومی رو قرار بدین تا اگه هیچ کدوم از فونت‌های قبلی پیدا نشد، مرورگر یه گزینه جایگزین مناسب داشته باشه. مثل:
  • `serif` (مثل Times New Roman)
  • `sans-serif` (مثل Arial, Verdana)
  • `monospace` (مثل Courier New)
  • `cursive` (مثل Comic Sans MS)
  • `fantasy` (مثل Impact)

مثال:

body {
  /* اول وزیر رو امتحان کن، اگه نبود Vazirmatn، اگه نبود همون وزیر، در نهایت فونت sans-serif عمومی */
  font-family: "vazir", "Vazirmatn", sans-serif;
}

h1 {
  /* اول فونت Amatic SC، اگه نبود cursive عمومی */
  font-family: 'Amatic SC', cursive;
}

code {
  /* اول فونت "Courier New"، اگه نبود "Lucida Console"، در نهایت monospace عمومی */
  font-family: "Courier New", "Lucida Console", monospace;
}

انتخاب درست `font-family` می‌تونه تاثیر شگرفی روی خوانایی و جذابیت بصری سایت شما داشته باشه. پس وقت بذارین و فونت‌های مناسب رو انتخاب کنین!

2. `font-size`: اندازه نوشته‌ها، چقدر باشن؟ 📏

خصوصیت `font-size` اندازه فونت رو تعیین می‌کنه. گزینه‌های مختلفی برای تعیین اندازه داریم:

• واحدهای مطلق (Absolute Units):
  • `px` (پیکسل): یه واحد ثابت و دقیق.
  • `pt` (پوینت): معمولاً برای پرینت استفاده می‌شه.
• واحدهای نسبی (Relative Units): که برای طراحی واکنش‌گرا (Responsive Design) خیلی مهمن!
  • `%` (درصد): اندازه‌ای نسبت به اندازه والد (Parent Element).
  • `em`: اندازه‌ای نسبت به اندازه فونت والد. (اگه فونت والد 16px باشه، 1.5em می‌شه 24px)
  • `rem` (Root em): اندازه‌ای نسبت به اندازه فونت ریشه (عنصر ``). این واحد برای طراحی واکنش‌گرا خیلی مفیده.
  • `vw` (Viewport Width): اندازه‌ای نسبت به عرض صفحه نمایش (Viewport).
  • `vh` (Viewport Height): اندازه‌ای نسبت به ارتفاع صفحه نمایش (Viewport).
• کلمات کلیدی:
  • `small`, `normal`, `large`, `x-large`, `xx-large`
  • `smaller`, `larger` (نسبت به اندازه والد)

مثال:

body {
  font-size: 16px; /* اندازه پایه برای کل صفحه */
}

h1 {
  font-size: 2.5rem; /* 2.5 برابر اندازه پایه ریشه */
}

p {
  font-size: 1.1em; /* 10% بزرگتر از فونت والد (که احتمالا 16px است) */
}

.caption {
  font-size: 0.85rem; /* کوچکتر از اندازه پایه */
}

/* برای طراحی واکنش گرا */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* در صفحه نمایش‌های کوچکتر، اندازه پایه کوچکتر می‌شه */
  }
}

استفاده از واحدهای نسبی مثل `rem` و `%` برای `font-size`، صفحه شما رو در دستگاه‌های مختلف خواناتر و کاربرپسندتر می‌کنه.

3. `font-weight`: ضخامت نوشته‌ها! 💪

خصوصیت `font-weight` ضخامت (یا وزن) فونت رو تعیین می‌کنه. می‌تونین از کلمات کلیدی یا اعداد استفاده کنین.

• کلمات کلیدی:
  • `normal` (معمولی – معمولاً معادل 400)
  • `bold` (ضخیم – معمولاً معادل 700)
  • `lighter` (سبکتر از والد)
  • `bolder` (ضخیم‌تر از والد)
• اعداد: از 100 تا 900، مضرب‌های 100 (مثل 100, 200, 300, …, 900).

نکته: اینکه چه ضخامت‌هایی برای یه فونت خاص در دسترس هست، به خود فونت بستگی داره. مثلاً یه فونت ممکنه فقط `normal` و `bold` داشته باشه، در حالی که فونت دیگه ممکنه وزن‌های 100 تا 900 رو پشتیبانی کنه.

مثال:

body {
  font-weight: normal; /* یا 400 */
}

h1, h2, h3 {
  font-weight: bold; /* یا 700 */
}

strong, b {
  font-weight: 700; /* معادل bold */
}

.light-text {
  font-weight: 300; /* فونت خیلی نازک */
}

.extra-bold-text {
  font-weight: 900; /* فونت خیلی ضخیم */
}

استفاده درست از `font-weight` به شما کمک می‌کنه که اهمیت متن‌ها رو مشخص کنین و ساختار سلسله مراتبی بصری قوی‌تری در صفحه ایجاد کنین.

با این سه خصوصیت کلیدی، شما ابزارهای لازم برای کنترل کامل ظاهر متنهاتون رو دارین! باهاشون بازی کنین و بهترین ترکیب‌ها رو برای پروژه‌هاتون پیدا کنین! موفق باشین! 🚀