טיפוגרפיה

תכונות אינטרנט: font-size rem יחידת em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min()‎,‏ max()‎ ו-clamp()‎ יחידות של אזור תצוגה

שיטות מומלצות כלליות

  • כדי להבטיח שינוי קנה מידה יחסי במהלך ההעברה של גודל הגופן, צריך להשתמש במספרים ללא יחידות ב-line-height (למשל, 1.5).
  • משתמשים ב-overflow-wrap: break-word (או ב-anywhere) כדי להכיל כתובות URL ארוכות.
  • אל תשתמשו ב-px לגודל הגופן. עדיף להשתמש ב-rem כדי לכבד את העדפות גודל הגופן של המשתמש בדפדפן (גודל גופן בסיסי), או ב-em/אחוזים לגודל לפי הקשר.

ציון קריאוּת

  • הימנעו משורות טקסט ארוכות: הגבילו את הרוחב של בלוקים של פסקאות ל-80 תווים לכל היותר.
  • הימנעו מרווחים גדולים מדי בין מילים: הימנעו מtext-align: justify כי זה יכול להקשות על קריאת הטקסט. אם אתם חייבים להשתמש בו, שלבו אותו עם hyphens: auto כדי להימנע מרווחים מיותרים בין המילים.
  • אל תשתמשו בגופנים מקושטים: אל תשתמשו בגופנים בכתב יד בתוכן הקריאה הראשי.
  • אל תשתמשו באותיות גדולות בלבד כדי להדגיש מילים: עדיף להשתמש בהדגשה חזותית, ולהשתמש בתגים <em>/<strong> כשההדגשה היא סמנטית.
  • הגבלת ההדגשה באופן כללי: ההדגשה מאבדת את המשמעות שלה כשהיא מופיעה בכל מקום – השתמשו בה רק במקומות שבהם היא משנה את האופן שבו צריך לקרוא את התוכן.
  • תמיכה בהעדפות של המשתמשים לגבי מרחק התצוגה: מאפשרים למשתמשים לשנות את גודל הטקסט עד 200% בלי לאבד תוכן או פונקציונליות.
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(), כי זה יכול להקטין או להגדיל את הטקסט יותר מדי במסכים קיצוניים.