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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

תאימות דפדפן

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

מבוא

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

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

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

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

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

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

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

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

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

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

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

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

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

טקסט נטוי

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

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

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

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

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

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

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

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

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

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

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

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

הבעה מרגשת

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

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

Animation

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

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

עדינות

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

ציר ה-XTRA באמסטלוואר מאפשר לשנות את הערך של ה "לבן" לאלף, כפי שמוצג למעלה. באמצעות שימוש בקטעים קטנים של 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, ציר המשקל נע בין 100 ל-1,000, ו-CSS ממפה את טווח הציר ישירות למאפיין הסגנון font-weight. כשמציינים את הטווח ב-@font-face, כל ערך מחוץ לטווח הזה יהיה "מוגבל" לערך החוקי הקרוב ביותר. הטווח של ציר הרוחב ממופה באותו אופן למאפיין 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;
}

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

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

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

שימוש בהטיה ובהטיה

הציר 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;
}

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

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

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

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

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

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

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

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

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

חלופות ותמיכה בדפדפן

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

/* 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 וכן הלאה.

תודה

המאמר הזה היה אפשרי רק בעזרת האנשים הבאים:

• מוסטפא קורטולדו, מעצב UX ותומך בעיצוב ב-Google
• רואל ניסקנס, מעצב/מפתח UX ומומחה טיפוגרפיה ב-Kabisa
• דייב קרוסלנד, מנהל תוכנית, Google Fonts
• דייוויד ברלו, מעצב וטיפוגרף ב-Font Bureau
• לורנס פני (Laurence Penney), מפתח של הפעיל-prracy.org
• מנדי מיכאל, מפתח של variablefonts.dev

תמונה ראשית (Hero) של ברונו מרטינס בערוץ UnFlood.