نویسه‌نگاری

ویژگی‌های وب: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max(), and clamp() Viewport units

روال‌های مطلوب کلی

  • برای line-height از اعداد بدون واحد (مثلاً 1.5) استفاده کنید تا از مقیاس‌بندی نسبی درطول توارث اندازه قلم مطمئن شوید.
  • برای گنجاندن نشانی‌های وب طولانی از overflow-wrap: break-word (یا anywhere) استفاده کنید.
  • از px برای اندازه قلم استفاده نکنید. ترجیحاً از rem برای رعایت اولویت‌های اندازه قلم مرورگر کاربر (اندازه قلم ریشه) یا از em/درصد برای اندازه‌بندی زمینه‌ای استفاده کنید.

خوانایی

  • از خطوط طولانی نوشتار اجتناب کنید: بلوک‌های پاراگراف را به حداکثر ۸۰ نویسه محدود کنید.
  • از فاصله‌های سفید طولانی اجتناب کنید: از text-align: justify اجتناب کنید زیرا می‌تواند خواندن نوشتار را دشوارتر کند. اگر باید از آن استفاده کنید، آن را با hyphens: auto ترکیب کنید تا از فضای خالی بیش‌ازحد بین کلمات جلوگیری شود.
  • از قلم‌های Ornate استفاده نکنید: از قلم‌های خط و قلم برای محتوای خواندنی اصلی استفاده نکنید.
  • برای تأکید، به همه حرف بزرگ تکیه نکنید: برای تأکید دیداری، پررنگ کردن را ترجیح دهید و وقتی تأکید معنایی است، از <em>/<strong> استفاده کنید.
  • محدود کردن تأکید به‌طور کلی: تأکید وقتی در همه‌جا باشد معنایش را ازدست می‌دهد — آن را فقط در جایی اعمال کنید که نحوه خواندن محتوا را تغییر می‌دهد.
  • پشتیبانی از اولویت‌های بزرگ‌نمایی کاربر: به کاربران اجازه دهید اندازه نوشتار را تا ۲۰۰٪ تغییر دهند بدون اینکه محتوا یا عملکرد ازبین برود.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

شکست متن

  • از text-wrap: balance برای عنوان‌های متعادل و محتوای عنوان‌مانند (مثل <th>) استفاده کنید
  • از text-wrap: pretty برای نوشتار اصلی طولانی (پاراگراف‌ها، نقل‌قول‌های بلوکی، و غیره) استفاده کنید
  • از text-wrap: balance یا text-wrap: pretty به‌طور عمدی استفاده کنید، آن را روی * اعمال نکنید زیرا هزینه عملکرد دارد.
  • از text-wrap: balance در عناصر دارای کادر نمایان (پس‌زمینه‌ها، حاشیه‌ها، سایه‌ها، و غیره) استفاده نکنید زیرا عرض ظرف را تغییر نمی‌دهد، بلکه فقط بر نحوه پیچیدن نوشتار درون آن عرض تأثیر می‌گذارد. این کار می‌تواند فضای خالی در انتهای محفظه باقی بگذارد که معمولاً نامطلوب است.

نویسه‌نگاری واکنش‌گرا

  • باید واحدهای مرتبط با ناحیه نمایش و مرتبط با قلم را در clamp() برای اندازه‌های قلمی که با اندازه ناحیه نمایش مقیاس‌بندی می‌شوند ترکیب کنید و درعین‌حال مطمئن شوید که در محدوده مطلوب باقی می‌مانند. به‌عنوان مثال، clamp(2rem, 1rem + 5vw, 4rem). نسبت واحدهای مرتبط با نمای هدف و مرتبط با قلم را تنظیم کنید تا سرعت تغییر اندازه قلم را کنترل کنید.
  • از vw به‌تنهایی برای اندازه قلم بدون clamp() استفاده نکنید، زیرا می‌تواند نوشتار را در صفحه‌نمایش‌های بسیار بزرگ یا بسیار کوچک بیش‌ازحد بزرگ یا کوچک کند.