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

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

1. מבוא

עדכון אחרון: 11/05/22

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

מה תלמדו

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

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

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

ידע של סוגי סולמות.
הידע ב-Figma.
ידע בסיסי ב-HTML ו-CSS.

למה תזדקק?

חשבון Figma
קובץ Figma Designlab
עורך קוד נבחר לאינטרנט

2. שנתחיל?

הגדרה

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

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

עותק מקהילת Figma

מנווטים לקובץ מיגרציה לגופנים של משתנים או מחפשים את האפשרות Migling to Variables (מיגרציה לגופנים משתנים) ב-Figma Community. לוחצים על שכפול בפינה השמאלית העליונה כדי להעתיק את הקובץ לקבצים.

פריסת הקבצים

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

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

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

חיפוש גופן של משתנה

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

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

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

ביטוי אסתטי וצירים

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

יתרונות

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

4. שימוש בגופנים משתנים בעיצוב

שינוי הצירים

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

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

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

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

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

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

בעזרת הדגמה של Variable Fonts תוכלו לשחק עם צירים של גופנים משתנים מחוץ ל-Figma.

5. הגברת השימוש בסטייל

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

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

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

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

6. הוחל בממשק המשתמש

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

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

7. הטמעה בקוד

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

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

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

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

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

עיצוב באמצעות 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`

*גופן גס (נטוי) ונטוי (נטוי) בסגנון גופן לא מהימן.

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

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

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

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

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

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

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

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

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

10. מזל טוב

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

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

כדאי להמשיך להתעדכן בתכנים נוספים ובמדריכים בנושא עיצוב בכתובת youtube.com/MaterialDesign