درس ۸: تایپوگرافی

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

اهمیت تایپوگرافی در وب:

• خوانایی: متن باید به راحتی قابل خواندن باشد
• سلسله‌مراتب: اهمیت مطالب مختلف مشخص شود
• هویت برند: شخصیت و هویت سایت منتقل شود
• تجربه کاربری: کاربر راحت‌تر با محتوا تعامل کند
• دسترسی‌پذیری: برای همه کاربران قابل استفاده باشد

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

انواع فونت‌ها:

• Serif: فونت‌هایی با پایه (مثل Times New Roman)
• Sans-serif: فونت‌هایی بدون پایه (مثل Arial)
• Monospace: فونت‌هایی با عرض ثابت (مثل Courier)
• Cursive: فونت‌های دست‌نویس
• Fantasy: فونت‌های تزیینی

مثال‌ها:

/* فونت‌های فارسی */
font-family: 'Vazir', 'Tahoma', Arial, sans-serif;

/* فونت‌های انگلیسی */
font-family: 'Roboto', 'Helvetica', Arial, sans-serif;

/* فونت monospace برای کد */
font-family: 'Fira Code', 'Courier New', monospace;

ویژگی font-size اندازه متن را کنترل می‌کند. انتخاب اندازه مناسب برای خوانایی بسیار مهم است.

واحدهای اندازه فونت:

• px: پیکسل - اندازه ثابت
• em: نسبت به فونت عنصر والد
• rem: نسبت به فونت root (html)
• %: درصدی از فونت والد
• vw/vh: نسبت به اندازه viewport

اندازه‌های پیشنهادی:

• متن اصلی: 16px یا 1rem
• عناوین اصلی: 2-3rem
• عناوین فرعی: 1.5-2rem
• متن کوچک: 0.875rem (14px)

مثال:

html { font-size: 16px; } /* پایه */
h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
p { font-size: 1rem; }      /* 16px */
small { font-size: 0.875rem; } /* 14px */

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

مقادیر font-weight:

• normal (400): وزن معمولی
• bold (700): ضخیم
• lighter: نازک‌تر از والد
• bolder: ضخیم‌تر از والد
• 100-900: مقادیر عددی

مثال:

.thin { font-weight: 100; }
.light { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.black { font-weight: 900; }

در ادامه، مثالی از تایپوگرافی مختلف را مشاهده می‌کنید. کد را ویرایش کرده و تأثیرات مختلف را ببینید:

فاصله‌بندی مناسب برای خوانایی و زیبایی متن بسیار مهم است.

ویژگی‌های فاصله‌بندی:

• line-height: فاصله بین خطوط
• letter-spacing: فاصله بین حروف
• word-spacing: فاصله بین کلمات
• text-indent: تورفتگی اول پاراگراف

مقادیر پیشنهادی:

/* فاصله خط مناسب */
line-height: 1.5; /* 1.4 تا 1.6 */

/* فاصله حروف */
letter-spacing: 0.02em; /* کمی فاصله */
letter-spacing: -0.01em; /* کاهش فاصله */

/* فاصله کلمات */
word-spacing: 0.1em;

CSS امکانات مختلفی برای تراز و تزیین متن ارائه می‌دهد.

تراز متن (text-align):

• right - راست‌چین (پیش‌فرض فارسی)
• left - چپ‌چین
• center - وسط‌چین
• justify - دوطرفه

تزیینات متن (text-decoration):

• none - بدون تزیین
• underline - زیرخط
• overline - روخط
• line-through - خط وسط

تبدیل متن (text-transform):

• none - بدون تغییر
• uppercase - حروف بزرگ
• lowercase - حروف کوچک
• capitalize - حرف اول بزرگ

برای استفاده از فونت‌های سفارشی، می‌توانید از @font-face یا سرویس‌های فونت وب استفاده کنید.

استفاده از @font-face:

@font-face {
  font-family: 'MyCustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff'),
       url('font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.custom-text {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

فونت‌های فارسی محبوب:

• وزیر (Vazir): فونت مدرن و خوانا
• صمیم (Samim): فونت ساده و زیبا
• شبنم (Shabnam): فونت گرد و دوستانه
• تاهوما (Tahoma): فونت سیستمی

بهینه‌سازی فونت‌ها:

• از فرمت WOFF2 استفاده کنید
• فونت‌ها را preload کنید
• فقط وزن‌های مورد نیاز را بارگذاری کنید
• از font-display برای کنترل نمایش استفاده کنید

تایپوگرافی باید در اندازه‌های مختلف صفحه به درستی نمایش داده شود.

تکنیک‌های responsive typography:

• Fluid typography: استفاده از vw برای اندازه متغیر
• Media queries: اندازه‌های مختلف برای breakpointها
• clamp(): محدود کردن اندازه در بازه مشخص

مثال fluid typography:

/* اندازه متغیر بین 16px تا 24px */
font-size: clamp(1rem, 2.5vw, 1.5rem);

/* Media queries */
@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  p { font-size: 0.9rem; }
}

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: سیستم تایپوگرافی

سیستم تایپوگرافی کاملی با عناوین، متن اصلی و متن کوچک ایجاد کنید.

تمرین ۲: مقاله وبلاگ

صفحه مقاله‌ای با تایپوگرافی مناسب و خوانا طراحی کنید.

تمرین ۳: کارت ویزیت

کارت ویزیت دیجیتالی با فونت‌های مختلف ایجاد کنید.

تمرین ۴: منوی رستوران

منوی رستورانی با سلسله‌مراتب تایپوگرافی واضح طراحی کنید.

بهترین شیوه‌ها:

• حداکثر 2-3 فونت مختلف استفاده کنید
• کنتراست مناسب بین متن و پس‌زمینه ایجاد کنید
• اندازه فونت حداقل 16px برای متن اصلی انتخاب کنید
• فاصله خط 1.4 تا 1.6 برای خوانایی بهتر
• سلسله‌مراتب واضح با اندازه‌های مختلف ایجاد کنید

نکات دسترسی‌پذیری:

• کنتراست رنگی حداقل 4.5:1 برای متن معمولی
• کنتراست رنگی حداقل 3:1 برای متن بزرگ
• امکان بزرگ‌نمایی تا 200% بدون از دست رفتن محتوا
• عدم استفاده از رنگ به تنهایی برای انتقال معنا
• فونت‌های خوانا برای کاربران نابینا

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

• استفاده از فونت‌های خوانا نشده
• اندازه فونت خیلی کوچک
• فاصله خط نامناسب
• کنتراست کم بین متن و پس‌زمینه
• استفاده بیش از حد از فونت‌های مختلف

در درس بعدی با رنگ‌ها و پس‌زمینه در CSS آشنا خواهید شد.