חלופות משופרות של גופן

קייטי המפניוס
קייטי המפניוס
Twitter

סיכום

המאמר הזה מספק סקירה מפורטת לגבי חלופות של גופנים וממשקי ה-API של size-adjust, ascent-override, descent-override ו-line-gap-override. ממשקי ה-API האלה מאפשרים להשתמש בגופנים מקומיים ליצירת גופנים חלופיים שמתאימים למידות של גופן אינטרנט, או דומים מאוד לאלה של גופנים אחרים. אפשרות זו מפחיתה או מבטלת שינויי פריסה שנגרמות על ידי החלפת גופנים.

אם אתם מעדיפים לדלג על קריאת המאמר הזה, אלה כמה מהכלים שבהם תוכלו להשתמש כדי להתחיל להשתמש בממשקי ה-API האלה באופן מיידי:

כלי מסגרת:

  • @next/font: החל מ-13 הבאים, next/font ישתמש באופן אוטומטי בשינויים של מדדי גופן וב-size-adjust כדי לספק חלופות תואמות לגופנים.
  • @nuxtjs/fontaine: החל מ-Nuxt 3, אפשר להשתמש ב-nuxt/fontaine כדי ליצור באופן אוטומטי חלופות תואמות של גופנים ולהוסיף אותן לגיליונות הסגנונות שהמערכת משתמשת בהם באפליקציית Nuxt.

כלים שאינם של מסגרות:

  • Fontaine: Fontaine היא ספרייה שיוצרת ומוסיפה באופן אוטומטי חלופות של גופנים שמשתמשות בשינויים של מדדי גופנים.
  • מאגר זה מכיל את השינויים ממדדי הגופן עבור כל הגופנים שמתארחים ב-Google Fonts. אפשר להעתיק את הערכים האלה ולהדביק אותם בגיליונות הסגנונות.

רקע

גופן חלופי הוא גופן שנעשה בו שימוש כשהגופן הראשי עדיין לא נטען או שחסרים בו גליפים שנדרשים לעיבוד תוכן הדף. לדוגמה, שירות ה-CSS הבא מציין שצריך להשתמש במשפחת הגופנים sans-serif בתור החלופה של הגופן ל-"Roboto".

font-family: "Roboto" , sans-serif;

אפשר להשתמש בגופנים חלופיים כדי לעבד טקסט במהירות רבה יותר (כלומר, על ידי שימוש ב-font-display: swap). כתוצאה מכך, תוכן הדף קריא ושימושי בשלב מוקדם יותר – אבל בעבר, הדבר עלה בגלל חוסר יציבות בפריסה: שינויים בפריסה מתרחשים בדרך כלל כשמחליפים גופן חלופי בגופן האינטרנט. עם זאת, ממשקי ה-API החדשים שפירטנו בהמשך יכולים לצמצם או לבטל את הבעיה, כי הם מאפשרים ליצור תצוגות גופנים חלופיות שתופסים את אותה נפח שטח כמו זה של הפונטים לאינטרנט.

חלופות משופרות של גופנים

יש שתי גישות אפשריות ליצירת חלופות 'משופרות' לגופנים. בגישה הפשוטה יותר נעשה שימוש רק ב-API לקביעת מדד הגופן. הגישה המורכבת יותר (אך המתקדמת יותר) משתמשת גם במדד הגופן וגם ב-size-adjust. במאמר הזה מוסברות שתי הגישות האלה.

איך פועל הביטול של מדד הגופן

פתיח

שינויים מברירת המחדל של מדדי הגופן מאפשרים לשנות את העלייה, הירידה והמרווח בין השורות בגופן:

  • עלייה מודדת את המרחק הגדול ביותר שבו הגליפים של גופן חורגים מעל קו הבסיס.
  • ירידה מודדת את המרחק הגדול ביותר שבו הגליפים של גופן נמתחים מתחת לערך הבסיס.
  • פער שורות, שנקרא גם 'מוביל', מודד את המרחק בין שורות טקסט עוקבות.

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

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

ביטולים של מדדי גופן משמשים בגיליון סגנונות כזה:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

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

מתבצע חישוב של ביטולים של מדדי גופן

המשוואות הבאות מניבות את השינויים מברירת המחדל של מדד הגופן עבור גופן אינטרנט נתון. את הערכים של שינויים של מדדי גופן צריך לכתוב כאחוזים (לדוגמה, 105%) ולא כמספרים עשרוניים.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

לדוגמה, אלה שינויי מדדי הגופן של הגופן Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

הערכים של ascent, descent, line-gap ו-unitsPerEm מגיעים מהמטא-נתונים של גופן האינטרנט. בקטע הבא במאמר הזה נסביר איך למצוא את הערכים האלה.

קריאת טבלאות גופנים

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

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

לפניכם כמה כלים שניתן להשתמש בהם לקריאת מטא-נתונים של גופן:

  • fontkit הוא מנוע גופנים שמיועד ל-Node.js. קטע הקוד הזה מראה איך להשתמש ב-fontkit כדי לחשב שינויים במדד הגופנים.
  • Capsize הוא ספריית גודל ופריסה של גופנים. Capsize מספק ממשק API לקבלת מידע על מדדי גופנים שונים.
  • fontdrop.info הוא אתר שמאפשר להציג מהדפדפן טבלאות גופנים ומידע אחר שקשור לגופנים.
  • Font Forge הוא כלי פופולרי לעריכת גופנים במחשב. כדי להציג את ascent, את descent ואת line-gap: פותחים את תיבת הדו-שיח Font Info, בוחרים בתפריט OS/2 ואז בוחרים בכרטיסייה Metrics. כדי להציג את UPM: פותחים את תיבת הדו-שיח Font Info ובוחרים בתפריט General.

הסבר על טבלאות גופנים

יכול להיות ששמת לב שמושגים כמו 'עלייה' מתייחסים לכמה מדדים, לדוגמה: יש מדדים מסוג hheaAscent, typoAscent ו-winAscent. הסיבה לכך היא שמערכות הפעלה שונות נוקטות גישות שונות לעיבוד גופנים: תוכניות במכשירי OSX בדרך כלל משתמשות במדדי גופן hhea* — בעוד שתוכנות במכשירי Windows משתמשות בדרך כלל במדדי גופן typo* (נקראים גם sTypo*) או win*.

בהתאם לגופן, לדפדפן ולמערכת ההפעלה, גופן יוצג באמצעות המדדים hhea, typo או win.

Mac Windows
Chromium משתמש בערכים מטבלת 'hea'. נעשה שימוש במדדים מהטבלה 'typo' אם הוגדר הערך 'USE_TYPO_METRICS'. אחרת, נעשה שימוש במדדים מהטבלה 'win'.
Firefox נעשה שימוש במדדים מהטבלה 'typo' אם הוגדר הערך 'USE_TYPO_METRICS'. אחרת, נעשה שימוש במדדים מהטבלה 'hhea'. נעשה שימוש במדדים מהטבלה 'typo' אם הוגדר הערך 'USE_TYPO_METRICS'. אחרת, נעשה שימוש במדדים מהטבלה 'win'.
Safari משתמש בערכים מטבלת 'hea'. נעשה שימוש במדדים מהטבלה 'typo' אם הוגדר הערך 'USE_TYPO_METRICS'. אחרת, נעשה שימוש במדדים מהטבלה 'win'.

למידע נוסף על האופן שבו מדדי גופנים פועלים במערכות הפעלה שונות, אפשר לעיין במאמר הזה על מדדי תעשייה מסוימת.

תאימות בין מכשירים

ברוב הגופנים (לדוגמה, כ-90% מהגופנים שמתארחים ב-Google Fonts) אפשר להשתמש בבטחה במדדי הגופנים בלי לדעת על מערכת ההפעלה של המשתמש: במילים אחרות, ערכי הגופנים ascent-override, descent-override ו-linegap-override יישארו בדיוק ללא שינוי, בין אם המדדים hhea, typo או win מתקיימים. מאגר זה מספק מידע על הגופנים שעליהם חלה המדיניות הזו ואילו גופנים לא חלים עליהם.

אם משתמשים בגופן שמחייב שימוש בקבוצות נפרדות של ביטולים של מדדי גופן למכשירי OSX ו-Windows, מומלץ להשתמש בשינויים של מדדי גופן וב-size-adjust רק אם יש לך אפשרות לשנות את גיליונות הסגנונות בהתאם למערכת ההפעלה של המשתמש.

שימוש בשינויים של מדדי גופן

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

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

התאמת הגודל – איך זה עובד

פתיח

מתאר ה-CSS של size-adjust משנה את הגודל והגובה של גליפים של גופנים באופן פרופורציונלי. לדוגמה, size-adjust: 200% ישנה את הגודל של גליפים של גופנים לפי שניים מהגודל המקורי שלהם; size-adjust: 50% שנה את הגודל של גליפים של גופנים לחצי מהגודל המקורי שלהם.

תרשים שמציג את התוצאות של שימוש בערכים 'size-adjust: 50%' ו-'size-adjust: 200%'.

ל-size-adjust יש אפליקציות מוגבלות לשיפור החלופות של הגופן: ברוב המקרים, צריך לצמצם או להרחיב מעט את הגופן החלופי (במקום לשנות את הגודל שלו באופן פרופורציונלי) כדי להתאים לגופן באינטרנט. עם זאת, שילוב של size-adjust עם שינויים מברירת המחדל של מדדי הגופן מאפשר להתאים בין שני גופנים, גם בצורה אופקית וגם בצורה אנכית.

כך נעשה שימוש ב-size-adjust בגיליונות סגנונות:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

בגלל אופן החישוב של size-adjust (שמוסברת בקטע הבא), הערך של size-adjust (ומדד הגופן התואם) משתנה בהתאם לגופן החלופי שבו נעשה שימוש:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

מתבצע חישוב של התאמת הגודל ושינוי של מדדי הגופן

אלה המשוואות לחישוב שינויים של size-adjust ושל מדדי גופן:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

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

רוחב תווים ממוצע משוער

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

דוגמה לגישה נאיבית לחישוב avgCharacterWidth היא שימוש ברוחב הממוצע של כל [a-z\s] התווים.

תרשים שמשווה את הרוחב של גליפים בודדים מסוג Roboto [a-zs].
רוחב של גליפים מסוג Roboto

עם זאת, סביר להניח ששקלול כל התווים באופן שווה יקטין את המשקל של אותיות נפוצות (לדוגמה, e) וייתן משקל יתר לרוחב של אותיות שנמצאות בשימוש לעתים רחוקות (לדוגמה, z).

גישה מורכבת יותר שמשפרת את הדיוק היא לקחת בחשבון את תדירות האותיות ולחשב במקום זאת את הרוחב הממוצע, המשוקלל לפי תדירות, של [a-z\s] תווים. המאמר הזה מתייחס לתדירות האותיות ולאורך הממוצע של המילים בטקסטים באנגלית.

גרף שמציג את תדירות האותיות באנגלית.
תדירות האותיות באנגלית

בחירת גישה

לשתי הגישות המתוארות במאמר זה יש יתרונות וחסרונות:

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

  • מצד שני, אם אתם רוצים יותר דיוק ומוכנים לבצע עוד קצת עבודה ובדיקה, כדאי להשתמש בשילוב של size-adjust. כאשר הגישה הזו מיושמת בצורה נכונה, היא יכולה למנוע ביעילות שינויי פריסה שקשורים לגופנים.

בחירת גופנים חלופיים

השיטות המתוארות במאמר הזה מסתמכות על שימוש בשינוי מדדי גופן וב-size-adjust כדי לבצע טרנספורמציה של גופנים מקומיים שזמינים לכולם – במקום לנסות למצוא גופן מקומי שקרוב מאוד לגופן האינטרנט. כשבוחרים גופנים מקומיים, חשוב לזכור שמעט מאוד גופנים זמינים באופן מקומי בתפוצה רחבה, ולא ניתן יהיה להשתמש בגופן אחד בכל המכשירים.

Arial הוא הגופן החלופי המומלץ לגופנים מסוג Sans Serif ו-Times New Roman הוא הגופן החלופי המומלץ לגופנים של serif. עם זאת, אף אחד מהגופנים האלה לא זמין ב-Android (Roboto הוא גופן המערכת היחיד ב-Android).

בדוגמה הבאה נעשה שימוש בשלושה גופנים חלופיים כדי להבטיח כיסוי רחב של מכשירים: גופן חלופי שמטרגט מכשירי Windows/Mac, גופן חלופי שמטרגט מכשירי Android וגופן חלופי שנעשה בו שימוש במשפחת גופנים גנרית.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

בקשה למשוב

אם יש לך משוב על חוויית השימוש שלך בשינוי מדדי הגופנים וב-size-adjust, אפשר לפנות אלינו.