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

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

1. מבוא

תאריך עדכון אחרון: 5 בנובמבר 2022

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

מה תלמדו

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

דרישות מוקדמות

בשיעור ה-Lab הזה נתמקד במושגים בסיסיים של עיצוב.

ידע לגבי סולמות גופנים.
ידע ב-Figma.
ידע בסיסי ב-HTML וב-CSS.

מה נדרש

חשבון Figma
קובץ designlab של Figma
עורך הקוד המועדף לאינטרנט

2. שנתחיל?

הגדרה

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

קודם צריך להיכנס ל-Figma או ליצור חשבון.

עותק כפול מהקהילה של Figma

עוברים לקובץ Migrating to Variable fonts או מחפשים את Migrating to Variable fonts בקהילת Figma. לוחצים על שכפול בפינה השמאלית העליונה כדי להעתיק את הקובץ לקבצים שלכם.

פריסת הקובץ

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

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

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

בדיקה אם יש גופן משתנה

לפני שמתחילים, צריך לוודא שיש לכם גופן משתנה. הקובץ הזה משתמש ב-Roboto Flex, שכבר זמין ב-Figma. אפשר גם להוריד אותו מ-fonts.google.com.

3. מהם גופנים משתנים?

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

ביטוי אסתטי וקטגוריות

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

יתרונות

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

4. שימוש בגופנים משתנים בתכנון

שינוי הצירים

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

משקל – קובע את עובי האות. הוא מספק מגוון רחב של עובי קווים רציפים.

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

שינוי הסגנון מישורי למשופע, שנקרא גם 'נטוי' בקרב טיפוגרפים. אמנם נדיר, אבל אפשר להשתמש ב-Slant בכיוון השני, שנקרא 'back slanted' או 'reverse oblique'.

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

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

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

5. שיפור הסגנון

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

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

נתחיל בהתאמה אישית של סולם הגופנים באמצעות תוכן הגוף. כך אנחנו יכולים להגדיר קודם את גודל הטקסט הבסיסי באתר, ואז לבצע התאמות אופטיות בהתאם. ברירת המחדל של Body Large is 18pt היא Roboto Flex. בעבר, כדי לשפר את הקריאוּת של הטקסט היינו צריכים לעדכן את גודל הגופן ואת העובי שלו, וכתוצאה מכך היה צריך ליצור קובץ גופן נוסף. עכשיו אנחנו יכולים לשפר את חלק מהצירים. שינוי הגודל האופטי, הדירוג והמשקל.
ממשיכים עם תווית. תוויות הן יותר פונקציונליות, והן משמשות בהקשרים קצרים וקטנים יותר, כמו לחצנים. משנים את רמת הגימור באופן אופטי כדי לאפשר לתוויות להופיע בצורה נכונה על צ'יפים ובקופסאות לחצנים.
ממשיכים לשפר את המודעות באמצעות שם, כותרת ותצוגה. כל שלוש האפשרויות משמשות לטקסטים קצרים יותר עם הדגשה בינונית עד גבוהה, כמו כותרות ודפים. מודעות כותרת ומודעות רשת המדיה יכולות להביע יותר בגלל הגודל שלהן והדגשה החזקה שלהן. אתם יכולים להתנסות בכל הצירים כאן.
אחרי שבוחרים את הסוג, לוחצים על 4 הנקודות ומוסיפים (+) כדי להגדיר סגנון טקסט. כך תוכלו להשתמש שוב בהגדרות הסוג בצורה עקבית.

אפשר ליצור את סולם ברירת המחדל של סוג החומר כסגנונות של Figma באמצעות הכלי ליצירת עיצובים של Material, או על ידי שכפול של ערכת העיצוב M3.

6. חלים על ממשק המשתמש

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

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

7. הטמעה בקוד

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

אנחנו נשתמש ב-HTML וב-CSS בסיסיים להטמעה, ולא ב-MWC או ב-framework כלשהו.

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

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

כדי לבדוק אילו גופנים משתנים זמינים, עוברים אל fonts.google.com. בקטע החיפוש, מסמנים את האפשרות Show only variable (הצגת גופנים משתנים בלבד) כדי לסנן. גופנים משתנים כוללים 'מגרש משחקים' בחלק התחתון של הדף, שבו אפשר להגדיר פסולות לכל אחד מהצירים הזמינים במשפחה.

עיצוב באמצעות CSS

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

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

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*האפשרויות Slant (slnt) ו-Italic (ital) ב-font-style לא מהימנות.

8. ייבוא באמצעות Google Fonts API

השתמשנו רק ב-Roboto, אבל כדאי לעיין בכל הגופנים שזמינים לנו עכשיו בכתובת fonts.google.com.

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

מעתיקים את הקוד הזה, שכולל את ממשק המשתמש לדוגמה של הכרטיס, לסביבת הפיתוח המשולבת (IDE) ל-Web שבה אתם משתמשים.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

שימו לב למפרטי הסגנון שהגדרתם בתרגיל הקודם עבור headline,‏ title,‏ body ו-label. לאחר מכן, עוברים לדף של Roboto Flex. מגדירים את פס ההזזה כך שיתאימו למפרטים שהגדרתם ב-Figma, ואז בוחרים את הסגנון הזה לכל אחד מהם כדי להוסיף אותו למגירה הצדדית.
בתצוגת הארון, מתחת לסגנונות שנבחרו, מחפשים את האפשרות 'שימוש באינטרנט'. יש שתי דרכים להוסיף את הגופן לקוד: באמצעות <link> או באמצעות @import. צריך רק אחד, נבחר ב-@import.
מעתיקים את הקוד מ-‎ @import ועד לנקודתיים ומדביקים אותו בתוך תגי הסגנון אחרי הערה על הייבוא.
מכיוון ש-Roboto Flex הוא הגופן היחיד שנעשה בו שימוש, מגדירים את הגוף לקריאה של משפחת הגופנים על ידי הוספת 'כללי CSS לציון משפחות' שכלולים בקוד הייבוא.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

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

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

9. מאפייני גופן משתנה ב-CSS

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

מסמנים את הסמל h1 של הכותרות בחלונית השמאלית ובוחרים בכרטיסייה בדיקה בחלק העליון. הפעולה הזו מעבירה את הלוח למצב בדיקת קוד להעברה למפתחים. הקוד הוא הקטע האחרון.
אם עדיין לא עשיתם זאת, משנים את הפורמט ל-תפריט נפתח ל-CSS. המאפיינים הרגילים, אם נעשה בהם שימוש, מפורטים (font-weight, font-stretch, font-style, font-optical-sizing), ואחריהם font-variation-settings ברמה נמוכה שמכילים צירים מותאמים אישית שלא רשומים. מומלץ להשתמש קודם במאפיינים רגילים, ואז להשתמש ב-font-variation-settings.

ב-Figma נעשה שימוש ב-font-variation-settings לרוחב (wdth) במקום ב-font-stretch.

מעתיקים את קוד ה-CSS הזה שקשור לסוג כדי להגדיר סגנון לסלקטור h1.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

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

10. מזל טוב

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

אם יש לכם שאלות, אתם מוזמנים לפנות אלינו בכל שלב באמצעות @MaterialDesign ב-Twitter.

כדאי לעקוב אחרינו כדי לקבל עוד תוכן ועצות בנושא עיצוב בכתובת youtube.com/MaterialDesign