דף זה תורגם על ידי Cloud Translation API.

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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

תאימות דפדפן

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

מבוא

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

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

לפני גופנים משתנים, כל סגנון יושם כקובץ גופן נפרד. בגופנים משתנים, כל הסגנונות יכולים להיכלל בקובץ אחד.

דוגמה ליצירה ורשימה של סגנונות שונים ממשפחת Roboto — שמאל: דוגמה למשפחת הגופנים Roboto. שמאל: סגנונות עם שם בתוך המשפחה.

אתגרים למעצבים ולמפתחים

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

למעצבי אתרים ולמפתחי אתרים יש מגבלות שונות מאלה של מעצבים גרפיים, ואחת מהן היא עלויות רוחב הפס שמשויכות לעיצובים שלנו. זהו נקודת החולשה של חוויות טיפוגרפיות עשירות יותר, כי הן מגיעות עם עלות. כשמשתמשים בגופנים רגילים לאינטרנט, כל סגנון שמשמש בעיצובים שלנו מחייב את המשתמשים להוריד קובץ גופן נפרד, וכתוצאה מכך עולה זמן האחזור וזמן העיבוד של הדף. אם תכללו רק את הסגנונות 'רגיל' ו'מודגש', וגם את הסגנונות המקבילים שלהם עם גופן נטוי, נתוני הגופן יכולים להגיע ל-500KB או יותר. וזה עוד לפני שדיברנו על אופן העיבוד של הגופנים, על דפוסי ההחלפה שצריך להשתמש בהם או על תופעות לוואי לא רצויות כמו FOIT ו-FOUT.

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

המבנה של גופן משתנה

גופנים משתנים פותרים את האתגרים האלה על ידי אריזה של סגנונות בקובץ אחד.

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

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

האות 'א' מוצגת בצבעים שונים — תמונה למעלה: איור של אנטומיה של ציר העובי של גופן Roboto.

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

Roboto Flex בשילובים אקראיים של רוחב ומשקל

כלומר, יש אלפי סגנונות! אולי זה נראה כמו overkill, אבל המגוון הזה של סגנונות גופן יכול לשפר באופן משמעותי את חוויית הקריאה. בנוסף, אם אין פגיעה בביצועים, מפתחי האתרים יכולים להשתמש בכמה סגנונות או בכמה שיותר סגנונות – זה תלוי בעיצוב שלהם.

נטוי

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

בגופנים אחרים (כמו Garamond,‏ Baskerville או Bodoni) יש קווי מתאר של גליפים רגילים וגליפים נטויים שלא תואמים לעיבוד באמצעות אינטרפולציה. לדוגמה, הקווים שמגדירים בדרך כלל את האות 'n' רגילה קטנה לא תואמים לקווים שמגדירים את האות 'n' נטוי קטן. במקום לבצע אינטרפולציה של קו מתאר אחד לקו מתאר אחר, הציר Italic עובר מקו מתאר רומי לקו מתאר נטוי.

דוגמה לצירי המשקל של הגופן Amstelvar — הקווים של האות "n" ב-Amstelvar בכתב נטוי (12 נקודות, עובי רגיל, רוחב רגיל), ובכתב מרובע. התמונה ניתנה על ידי דיוויד ברלו (David Berlow), מעצב גופנים וטיפוגרף ב-Font Bureau.

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

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

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

הגדרות של צירים

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

גם אם צירים יכולים לשלוט באותה תכונה, יכול להיות שהם ישתמשו בערכים שונים. לדוגמה, בגופנים המשתנים Oswald ו-Hepta Slab יש רק ציר אחד זמין, 'עובי', אבל הטווחים שונים – ל-Oswald יש אותו טווח כמו לפני השדרוג לגופן משתנה, 200 עד 700, אבל ל-Hepta Slab יש ערך קיצוני של 1 לקו דק שמגיע עד 900.

לחמשת הצירים הרשומים יש תגים של 4 תווים קטנים שמשמשים להגדרת הערכים שלהם ב-CSS:

שמות צירים וערכים של CSS
משקל	`wght`
רוחב	`wdth`
מדוכא	`slnt`
גודל אופטי	`opsz`
נטוי	`ital`

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

תרחישים לדוגמה ויתרונות

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

ביטוי מרגש

דוגמה מצוינת לביטוי אמנותי מוצגת למעלה, חקירה של הגופן Decovar על ידי Mandy Michael.

כאן תוכלו לראות את הדוגמה העובדת ואת קוד המקור של הדוגמה שלמעלה.

Animation

גופן Zycon, שעוצב לצורך אנימציה על ידי דייוויד ברלו (David Berlow), מעצב גופנים וטיפוגרף ב-Font Bureau.

יש גם אפשרות לבחון אנימציה של תווים באמצעות גופנים משתנים. למעלה מוצגת דוגמה לשימוש בצירים שונים עם הגופן Zycon. דוגמה לאנימציה פעילה ב-Axis Praxis

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

כמה דוגמאות לאנימציות של העברת העכבר מעל סמלים מתוך גופן הסמלים הצבעוניים של Anicon

Finesse

Amstelvar באמצעות קצת XTRA בכיוונים מנוגדים כדי שהרוחב של המילים יהיה שווה

הגופנים Roboto Flex ו-Amstelvar כוללים קבוצה של 'צירים פרמטרים'. בצירים האלה, האותיות מפורקות ל-4 היבטים בסיסיים של צורה: צורות שחורות או חיוביות, צורות לבנות או שליליות, והמימדים x ו-y. בדומה לאופן שבו אפשר לשלב בין צבעים ראשיים לכל צבע אחר כדי לשנות אותו, אפשר להשתמש ב-4 ההיבטים האלה כדי לשפר כל ציר אחר.

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

גופנים משתנים ב-CSS

טעינת קבצים של גופנים משתנים

גופנים משתנים נטענים באמצעות אותו מנגנון @font-face כמו גופנים סטטיים רגילים לאינטרנט, אבל עם שני שיפורים חדשים:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. פורמטים של מקורות: אנחנו לא רוצים שהדפדפן יוריד את הגופן אם הוא לא תומך בגופנים משתנים, לכן אנחנו מוסיפים את התיאורים format ו-tech: פעם אחת בתחביר העתידי (format('woff2') tech('variations')) ופעם אחת בתחביר שהוצא משימוש אבל נתמך בדפדפנים (format('woff2-variations')). אם הדפדפן תומך בגופנים משתנים ותומך בתחביר העתידי, הוא ישתמש בהצהרה הראשונה. אם הוא תומך בגופנים משתנים ובתחביר הנוכחי, הוא ישתמש בהצהרה השנייה. שניהם מפנים לאותו קובץ גופן.

2. טווחי סגנונות: שימו לב שאנחנו מספקים שני ערכים ל-font-weight ול-font-stretch. במקום לומר לדפדפן איזה משקל ספציפי הגופן הזה מספק (לדוגמה font-weight: 500;), אנחנו נותנים לו עכשיו את הטווח של המשקלים שהגופן תומך בהם. ב-Roboto Flex, טווח הציר Weight הוא מ-100 ל-1,000, ו-CSS ממפה ישירות את טווח הציר למאפיין הסגנון font-weight. כשמציינים את הטווח ב-@font-face, כל ערך מחוץ לטווח הזה 'מוגבל' לערך החוקי הקרוב ביותר. טווח הציר Width ממופה באותה דרך למאפיין font-stretch.

אם אתם משתמשים ב-Google Fonts API, המערכת תפתור את כל הבעיות האלה. קובץ ה-CSS יכיל לא רק את הפורמטים והטווחים המתאימים של המקור, אלא גם גופנים סטטיים חלופיים של Google Fonts למקרה שאין תמיכה בגופנים משתנים.

שימוש במשקלים וברוחב

נכון לעכשיו, אפשר להגדיר באופן מהימן מ-CSS רק את הצירים wght דרך font-weight ואת הציר wdth דרך font-stretch.

באופן מסורתי, מגדירים את font-weight כמילת מפתח (light, ‏ bold) או כערך מספרי בין 100 ל-900, בצעדים של 100. בגופנים משתנים, אפשר להגדיר כל ערך בטווח הרוחב של הגופן:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

השינוי של ציר המשקל של Roboto Flex מהערך המינימלי לערך המקסימלי.

באופן דומה, אפשר להגדיר את font-stretch באמצעות מילות מפתח (condensed,‏ ultra-expanded) או באמצעות ערכי אחוזים:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

הציר 'רוחב' של Roboto Flex משתנה מהערך המינימלי לערך המקסימלי.

שימוש בכתב נטוי ובכתב מוטה

הציר ital מיועד לגופנים שמכילים גם סגנון רגיל וגם סגנון נטוי. הציר נועד לפעול כמתג הפעלה/כיבוי: הערך 0 כבוי ויוצג בו הסגנון הרגיל, והערך 1 יוצג בו הגופן נטוי. בניגוד לצירים אחרים, אין כאן מעבר. ערך של 0.5 לא יניב 'חצי נטוי'.

הציר slnt שונה מהכתב נטוי בכך שהוא לא סגנון חדש, אלא רק גורם לכתב הרגיל להופיע בזווית. ערך ברירת המחדל שלו הוא 0, כלומר צורות ברירת המחדל של אותיות זקופות. ל-Roboto Flex יש שיפוע מקסימלי של 10 מעלות לכיוון שמאל, כלומר האותיות יטו שמאלה כשהערך ינוע מ-0 ל-10.

הגדרת הצירים האלה דרך המאפיין font-style נראית אינטואיטיבית, אבל נכון לאפריל 2020, עדיין לא ברור איך עושים את זה. לכן, בשלב הזה צריך להתייחס אליהם כצירים מותאמים אישית ולהגדיר אותם דרך font-variation-settings:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

השינוי של ציר הנטייה של Roboto Flex מהערך המינימלי לערך המקסימלי.

שימוש בגדלים אופטיים

אפשר להציג גופן בגודל קטן מאוד (הערת שוליים בגודל 12px) או בגודל גדול מאוד (כותרת בגודל 80px). גופנים יכולים להגיב לשינויים האלה בגודל על ידי שינוי צורות האותיות כך שיתאימו יותר לגודל. בתמונות בגודל קטן, כדאי להימנע משימוש בפרטים עדינים, ובתמונות בגודל גדול כדאי להוסיף פרטים ולבחור בקו צר יותר.

האות 'a' מוצגת בגדלים אופטיים שונים — האות 'a' ב-Roboto Flex בגדלי פיקסלים שונים, ולאחר מכן באותו גודל, ממחישה את ההבדלים בעיצוב. רוצים לנסות בעצמכם ב-Codepen?

הוספנו מאפיין CSS חדש לציר הזה: font-optical-sizing. כברירת מחדל, הערך מוגדר כ-auto, וכך הדפדפן מגדיר את ערך הציר על סמך הערך של font-size. כלומר, הדפדפן יבחר באופן אוטומטי את הגודל האופטי הטוב ביותר, אבל אם רוצים להשבית את האפשרות הזו, אפשר להגדיר את font-optical-sizing לערך none.

אפשר גם להגדיר ערך מותאם אישית לציר opsz, אם רוצים בכוונה להשתמש בגודל אופטי שלא תואם לגודל הגופן. קוד ה-CSS הבא יגרום להצגת הטקסט בגודל גדול, אבל בגודל אופטי כאילו הוא מודפס ב-8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

שימוש בצירים מותאמים אישית

בניגוד לצירים רשומים, צירים מותאמים אישית לא ימופו למאפיין CSS קיים, ולכן תמיד תצטרכו להגדיר אותם דרך font-variation-settings. תגים של צירים מותאמים אישית תמיד מודפסים באותיות רישיות, כדי להבדיל אותם מצירים רשומים.

ב-Roboto Flex יש כמה צירים מותאמים אישית, והחשוב ביותר הוא Grade (GRAD). ציר Grade מעניין כי הוא משנה את עובי הגופן בלי לשנות את הרוחב, כך שחלוקות השורות לא משתנות. שימוש בציר 'דירוג' מאפשר לכם להימנע משינויים בציר 'משקל' שמשפיעים על הרוחב הכולל, ואז משינויים בציר 'רוחב' שמשפיעים על המשקל הכולל.

ציר הדירוג של Roboto Flex משתנה מהערך המינימלי לערך המקסימלי.

GRAD הוא ציר בהתאמה אישית, עם טווח של -200 עד 150 ב-Roboto Flex. אנחנו צריכים לטפל בבעיה עם font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

גופנים משתנים ב-Google Fonts

הקטגוריה של Google Fonts התרחבה עם גופנים משתנים, ואנחנו מוסיפים גופנים חדשים באופן קבוע. בשלב הזה, הממשק מיועד לבחירת מופעים בודדים מהגופן: בוחרים את הווריאנט הרצוי, לוחצים על 'בחירת הסגנון הזה' והוא מתווסף לאלמנט <link> שאוסף את קובצי ה-CSS והגופנים מ-Google Fonts.

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

בכלי Google Variable Fonts Links תוכלו למצוא גם את כתובות ה-URL העדכניות ביותר של הגופנים המשתנים המלאים.

ירושה של הגדרות של וריאציות גופן

בקרוב תהיה תמיכה בכל הצירים הרשומים באמצעות מאפייני CSS קיימים, אבל בינתיים יכול להיות שתצטרכו להסתמך על font-variation-settings כחלופה. אם לגופן יש צירים מותאמים אישית, תצטרכו גם את font-variation-settings.

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

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

קודם הדפדפן יחיל את font-variation-settings: 'slnt' 10 מהקלאס .slanted. לאחר מכן הוא יחיל את font-variation-settings: 'GRAD' -200 מהקלאס .grade-light. אבל הפעולה הזו תאפס את slnt לברירת המחדל שלו, שהיא 0. התוצאה תהיה טקסט בגוון בהיר, אבל לא נטוי.

למרבה המזל, אפשר לעקוף את הבעיה הזו באמצעות משתני CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

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

חשוב לזכור שאי אפשר להוסיף אנימציה למשתני CSS (לפי תכנון), ולכן קוד כזה לא יפעל:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

האנימציות האלה צריכות להתרחש ישירות ב-font-variation-settings.

שיפור בביצועים

גופנים משתנים מסוג OpenType מאפשרים לנו לשמור כמה וריאציות של משפחת גופנים בקובץ גופן אחד. ב-Monotype ערכו ניסוי שכלל שילוב של 12 גופנים של קלט כדי ליצור שמונה עומסי גופן, בשלושה רוחבים, בסגנון נטוי ובסגנון רומי. שמירת 48 גופנים נפרדים בקובץ גופן משתנה אחד אפשרה להקטין את גודל הקובץ ב-88%.

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

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

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

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

אם אתם משתמשים בגופנים של Google, מומלץ לבצע התחברות מראש אל https://fonts.gstatic.com, הדומיין שבו מתארחים הגופנים של Google. כך הדפדפן ידע מראש איפה לקבל את הגופנים כשהם יופיעו ב-CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

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

טיפים נוספים לשיפור הביצועים של טעינת Google Fonts זמינים במאמר הגופנים המהירים ביותר של Google.

חלופות ותמיכה בדפדפנים

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

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

בדפדפנים ישנים יותר, טקסט עם הכיתוב .super-bold יוצג בכתב מודגש רגיל, כי זהו הגופן המודגש היחיד שזמין לנו. כשיש תמיכה בגופנים משתנים, אפשר להשתמש בעובי העבה ביותר של 1,000.

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

אם אתם משתמשים ב-Google Fonts API, הוא יטפל בחיוב של הגופנים המתאימים לדפדפנים של המבקרים. נניח שרוצים לבקש את הגופן Oswald בטווח עובי של 200 עד 700, כך:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

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

תודה

המאמר הזה נוצר בעזרת האנשים הבאים:

Mustafa Kurtuldu, מעצב UX ותומך עיצוב ב-Google
רואל ניסקנס (Roel Nieskens), מעצב/מפתח UX ומומחה טיפוגרפיה ב-Kabisa
דייב קרוסלנד (Dave Crossland), מנהל תוכנית, Google Fonts
David Berlow, מעצב גופנים וטיפוגרף ב-Font Bureau
Laurence Penney, מפתח של axis-praxis.org
Mandy Michael, מפתחת של variablefonts.dev

התמונה הראשית (Hero) היא של Bruno Martins ב-Unsplash.