החלת טיפוגרפיה

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

סגנונות תצוגה

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

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

כותרת

המאפיין Title הוא טקסט היררכי שמשמש כמנגנון להתמצאות, כמו דף, כותרת של קטע או כותרת של תת-קטע (במקרה של TitleSmall).

  • TitleLarge היא הכותרת הגדולה ביותר. הכותרות קטנות יותר מהשמות המוצגים. הן בדרך כלל שמורות לטקסט עם הדגשה בינונית, באורך קצר יותר, ולא מומלצות לרכיבים אינטראקטיביים, אלא לכותרות או לכותרות משנה בדף.
  • TitleMedium הוא שם המדיה. הכותרות קטנות יותר מהשמות המוצגים. הן בדרך כלל שמורות לטקסט עם הדגשה בינונית, באורך קצר יותר, ולא מומלצות לרכיבים אינטראקטיביים, אלא לכותרות או לכותרות משנה בדף.
  • TitleSmall היא הכותרת הקטנה ביותר. הכותרות קטנות יותר מהשמות המוצגים. הן בדרך כלל שמורות לטקסט עם הדגשה בינונית, באורך קצר יותר, ולא מומלצות לרכיבים אינטראקטיביים, אלא לכותרות או לכותרות משנה בדף.

תווית

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

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

גוף

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

  • BodyLarge הוא הגודל הכי גדול. בדרך כלל משתמשים בטקסטים של גוף המסמך לכתיבה ארוכה, כי הם מתאימים לגדלים קטנים של טקסט. בקטעי טקסט ארוכים יותר, מומלץ להשתמש בגופן עם או בלי קווים קטנים.
  • BodyMedium הוא הגוף השני בגודלו. בדרך כלל משתמשים בטקסטים של גוף המסמך לכתיבה ארוכה, כי הם מתאימים לגדלים קטנים של טקסט. בקטעי טקסט ארוכים יותר, מומלץ להשתמש בגופן עם או בלי קווים קטנים.
  • BodySmall הוא הגודל השלישי הכי גדול. בדרך כלל משתמשים בטקסטים של גוף המסמך לכתיבה ארוכה, כי הם מתאימים לגדלים קטנים של טקסט. בקטעי טקסט ארוכים יותר, מומלץ להשתמש בגופן עם או בלי קווים קטנים.
  • BodyExtraSmall הוא הגודל הכי קטן של גוף הטקסט. בדרך כלל משתמשים בטקסטים של גוף המסמך לכתיבה ארוכה, כי הם מתאימים לגדלים קטנים של טקסט. בקטעי טקסט ארוכים יותר, מומלץ להשתמש בגופן עם או בלי קווים קטנים.

מספרים

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

  • NumeralsExtraLarge הוא התפקיד הגדול ביותר עבור ספרות. כברירת מחדל, הספרות משתמשות ברווחים טבלאיים. הם מדגישים ומציגים מספרים שאפשר להבין במבט חטוף, שמורכבים מ-2 או 3 תווים בלבד, ושלא נדרשת בהם לוקליזציה, כמו מסך הטעינה או הכלי לבחירת שעה.
  • NumeralsLarge הוא התפקיד השני בגודלו עבור ספרות. כברירת מחדל, הספרות משתמשות במרווחים בטבלה. אלה מחרוזות גדולות של מספרים שמוגבלות להצגה גדולה של זמן, שבה לא נדרשת התאמה לשפה המקומית, כמו טיימר לספירה לאחור או כלי לבחירת שעה.
  • NumeralsMedium הוא התפקיד השלישי בגודלו עבור ספרות. כברירת מחדל, הספרות משתמשות במרווחים בטבלה. אלה מספרים בגודל בינוני שמוגבלים למחרוזות קצרות של ספרות, ולא נדרשת לוקליזציה כמו מונה צעדים או כלי לבחירת שעה.
  • NumeralsSmall הוא התפקיד הרביעי בגודלו עבור ספרות. כברירת מחדל, הספרות משתמשות במרווחים בטבלה. הם מיועדים למספרים שצריך להדגיש בקנה מידה קטן יותר, שבהם לא נדרשת לוקליזציה, כמו בבוררי תאריכים ושעות.
  • NumeralsExtraSmall הוא התפקיד הקטן ביותר עבור ספרות. כברירת מחדל, הספרות משתמשות ברווחים טבלאיים. הם מיועדים למספרים שצריכים להכיל מחרוזות ארוכות יותר של ספרות, שבהן לא נדרשת לוקליזציה, כמו מדדים במהלך אימון.

קשת

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

הכי גבוה

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

Bottom

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

סידור טקסט

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

שימוש בערך הבסיס

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

שורה של טקסט מונחת על קו הבסיס הבלתי נראה

בדיקת קריאות

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

מספרים טבלאיים ומונו

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

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

גובה השורה

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

בדרך כלל מומלץ להשתמש ביחס גובה שורה של פי 1.2 (120%) מגודל הגופן, אבל בגלל המקום המוגבל במכשירי Wear OS, יחס גובה שורה של פי 1.1 (110%) מגודל הגופן מספיק.

גובה שורה נוסף

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

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

טבלת קיצורי דרך נוספת לגובה השורה

סגנון ברירת מחדל (גודל טקסט / גובה שורה) גובה השורה שמוגדר כברירת מחדל בכל שורה גובה שורה נוסף רק בשורה התחתונה חישוב
‫60 / 60 ‫0 (100%) ‫+ 15 (125%) ‫60 / 75 (15/125%) (60+15)
‫50 / 50 ‫0 (100%) ‫+ 13 (126%) ‫50 / 63 (13/126%) (50+13)
‪40 / 44 ‫4 (110%) ‫‎+ 7 (127.5%) ‫40 / 51 (11/127.5%) (44+7)
30 / 34 ‫4 (113%) ‫+ 3 (123.3%) 30 / 37 (7/123.3%) (34+3)
‫24 / 26 ‫2 (108%) ‫+ 4 (125%) ‫24 / 30 (6/125%) (26+4)
20 / 22 ‫2 (110%) ‫+ 3 (125%) ‫20 / 25 (5/125%) (22+3)
‫18 / 20 ‫2 (111%) ‫+ 3 (125%) ‫18 / 23 (5/125%) (20+3)
16 / 18 2 (112.5%) ‫+ 2 (125%) ‫16 / 20 (4/125%) (18+2)
‪15 / 18 ‫3 (120%) ‫+ 1 (126.6%) ‫15 / 19 (4/126.6%) (18+1)
‫14 / 16 ‫2 (114%) ‫+ 2 (128.5%) ‫14 / 18 (4/128.5%) (16+2)
‪13 / 16 ‫3 (123%) ‫+ 0 (123%) ‫13 / 16 (3/123%) (16+0)
12 / 14 ‫2 (116.6%) ‫+ 1 (125%) ‫12 / 15 (3/125%) (14+1)
10 / 12 ‫2 (120%) ‫+ 0 (120%) ‫10 / 12 (2/120%) (12+0)