איך למנוע תזוזות פריסה (CLS) בעברית בעזרת CSS Font Metric Overrides

דמיינו גולש שנכנס לאתר שלכם מהטלפון. הטקסט מופיע לשבריר שנייה בפונט Arial, ופתאום הפונט המותאם אישית (כמו Heebo או Assistant) נטען. הפסקה מתרחבת ב-15 פיקסלים, וכל הכפתורים מתחתיה זזים למטה. הגולש רצה ללחוץ על "קרא עוד" ולחץ בטעות על קישור אחר. הנה קיבלתם קפיצת CLS מעצבנת. בעברית הבעיה הזו שכיחה במיוחד.

למה פונטים בעברית שוברים את הפריסה בזמן הטעינה?

אותיות בעברית בנויות אחרת מאותיות לטיניות. היחס בין גובה האות לרווח העליון והתחתון (Ascent ו-Descent) בפונטים כמו Heebo או Rubik שונה מאוד מהיחס בפונט Arial או Segoe UI.

כשהדפדפן מציג את פונט ה-Fallback עד שהפונט המותאם יורד מהרשת, הוא משתמש בערכי התיחום של פונט ה-Fallback. ברגע שהפונט המותאם נטען, הדפדפן מחשב מחדש את גובה השורות. אם המטריקות לא חופפות, הטקסט "קופץ".

הגדרה · Font Metric Overrides

תכונות CSS בתוך הכלל @font-face המאפשרות לדרוס את גודל הפונט וגובה השורות של פונט מקומי, כדי ליצור התאמה מלאה לפונט החיצוני.

תזוזה זו אינה רק בעיית חוויית משתמש. היא פוגעת ישירות במדדי Core Web Vitals של גוגל ומורידה את הדירוג האורגני.

ארבעת המאפיינים שיצילו את ה-Web Vitals שלכם

ב-2026, אין צורך בפתרונות JavaScript מורכבים כדי לפתור את הבעיה. מפרט ה-CSS מעניק לנו ארבעה descriptors בתוך @font-face שמטפלים בזה בציס:

1. size-adjust: מותח או מכווץ את כל הפונט באחוזים.
2. ascent-override: קובע את הרווח מעל קו הבסיס (Baseline).
3. descent-override: קובע את הרווח מתחת לקו הבסיס.
4. line-gap-override: קובע את המרווח הנוסף בין שורות.

זה נראה כך בקוד:

@font-face {
  font-family: 'Heebo Fallback';
  src: local('Arial');
  ascent-override: 102%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 94%;
}

body {
  font-family: 'Heebo', 'Heebo Fallback', sans-serif;
}

כשמגדירים את הבלוק הזה, הדפדפן מלביש את Arial על אותן מידות פיזיות של Heebo.

מדריך מעשי: כיול פונט Heebo מול Arial

אני רואה הרבה אתרים שמשתמשים ב-Heebo עבור כותרות וטקסט רץ. Arial הוא פונט ה-Fallback הטבעי ביותר במערכות Windows ו-Mac, אך הוא רחב ונמוך יותר מ-Heebo.

כדי לכייל את השניים:

• צמצמו את רוחב האות בעזרת size-adjust: 93%.
• הגביהו את קו העלייה בעזרת ascent-override: 100%.
• אפסו מרווחי שורה מיותרים.

התוצאה: הטקסט נטען במיקום המדויק שלו. האותיות אומנם מחליפות צורה כשהפונט נטען, אך המבנה הכללי של העמוד לא זז אפילו בפיקסל אחד.

שילוב ה-Fallback ב-CSS השוטף

אפשר להשתמש בכלים אוטומטיים שמחשבים את המספרים הללו, אך חשוב לבדוק את התוצאה הוויזואלית בעברית.

זכרו שפונטים בעברית כוללים לעיתים אותיות גבוהות (כמו ל') או נמוכות (כמון', ן). כיול לא נכון של ascent-override עלול לחתוך את החלק העליון של הלמ"ד בפונט ה-Fallback.

שליטה במטריקות הפונט היא הבדל קטן בקוד שיוצר הבדל עצום בביצועים.

💡

ביטול תזוזות CLS לא דורש ויתור על טיפוגרפיה ייחודית בעברית. כיול מדויק של פונט ה-Fallback מעניק אתר יציב וטעינה חלקה.