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

1. מבוא

תאריך העדכון האחרון: 11 במאי 2022

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

מה תלמדו

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

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

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

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

הדרישות

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

2. שנתחיל?

הגדרה

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

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

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

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

פריסת הקובץ

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

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

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

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

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

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

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

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

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

יתרונות

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

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

שינוי הצירים

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

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

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

3. אפשר לשנות את הסגנון ממאונך לנטוי, שנקרא גם 'סגנון נטוי' בקרב טיפוגרפים. למרות שזה נדיר, Slant יכול לפעול גם בכיוון ההפוך, שנקרא 'backslanted' או 'reverse oblique'.

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

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

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

5. איך משתמשים בסגנון

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

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

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

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

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

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

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

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

*הערכים slant ‏ (slnt) ו-italic ‏ (ital) ב-font-style לא אמינים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10. מזל טוב

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

השלבים הבאים

• כדאי לעיין בהנחיות לגבי סוגים ב-Material 3.
• מידע נוסף על Roboto Flex
• אפשר להשתמש בהם גם בעיצובים שלכם!

אם יש לך שאלות, אפשר לפנות אלינו בכל שלב באמצעות ‎@MaterialDesign בטוויטר.

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