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

Katie Hempenius

סיכום

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

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

כלים של Framework:

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

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

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

רקע

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

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

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

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

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

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

מבוא

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

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

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

משתמשים בשינויים מברירת המחדל של מדדי הגופן בסגנון גיליון כך:

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 מגיעים כולם מהמטא-נתונים של גופן האינטרנט. בקטע הבא במאמר נסביר איך לקבל את הערכים האלה.

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

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

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

• 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.

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

תאימות למכשירים שונים

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

אם אתם משתמשים בגופן שדורש שימוש בקבוצות נפרדות של עקיפות של מדדי גופן למכשירי 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 יש יישומים מוגבלים לשיפור גופנים חלופיים: ברוב המקרים, צריך להקטין או להרחיב מעט את הגופן החלופי (במקום לשנות את הגודל באופן יחסי) כדי להתאים אותו לגופן אינטרנט. עם זאת, שילוב של 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)

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

אומדן רוחב התו הממוצע

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

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

עם זאת, אם נותנים משקל שווה לכל התווים, סביר להניח שהרוחב של אותיות נפוצות (למשל, 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.