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

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

שמות משקלי הפונט

נתחיל ביחידות המידה השונות:
יחידת המידה שמסמלת את גודל האות בטקסט המכונה פוינט (Points (pt
יחידת המידה המסמלת עובי (נפח/סגנון) האות מכונה משקל – Weight

לפניך רשימת משקלים פופולאריים, בשמותיהם באנגלית, בעברית, ובערך מספרי CSS:

• דק/דקיק – 100  – Thin
• אולטרה־לייט – 200 –  UltraLight
• לייט/קל – 300 – Light
• רגיל/בוק – 400 – Regular
• מדיום/בינוני – 500 – Medium
• דמי בולד – 600 – DemiBold
• בולד – 700 – Bold
• אולטרה־בולד – 800 – UltraBold
• שחור – 900 – Black
• אולטרה־שחור- 950 – UltraBlack

משקלי האולטרה נקראים לעיתים אקסטרה Extra-Light/Bold/Black
משקל רגיל נקרא גם בוק או נורמל Normal/book
משקלי דמי־בולד (דמוי מודגש) נקרא גם סמי־בולד Semi-Bold
משקל שחור נקרא לעיתים כבד -Heavy

הגדרות הקנבס (גריד האות)

• קו בסיס מציין את רצפת האות הבסיסית (לא הנמוכה ביותר)
• קו שורש מסמל את המתחם של האות שיורדת הכי נמוך
• קו גג מהווה את רף גובה האות הממוצעת בסיסית ביותר
• קו צמרת הוא גובה האות שעולה הכי גבוה למעלה
• מתחם האות (EM) מתייחס לשטח הגובה בין קו הבסיס לקו הגג
• גובה האות מקו הבסיס לגובה הממוצע של האות הקטנה (x-height)

טיפוגרפיה באתרים – גדלים ומשקלים לכותרות וטקסט

בכותרות ענקיות – כותרת ראשית, כותרת תדמית H1:

נשתמש במשקלי ראווה: או משקלים קלים (100-200) או משקלים עם בומבסטיים (600-900)
לכותרת ענקית נתחיל מ-48pt ועד לתפוסת כל המסך בשאיפה לשמר קריאות טובה

בכותרות גדולות – כותרת משנה H2:

נשתמש במשקלי נוכחות – (600-950) Semi Bold ומעלה
טווחי ערך (פוינט) המומלצים בטווח: Pt 48 – Pt 24

בכותרות רגילות H3 – תתי כותרות, ציטוטים ופסקאות קצרות
נשתמש במשקלים בעלי נוכחות (500-900) Medium ומעלה
טווחי גודל פוינט מומלצים בטווח: Pt 32 – Pt 24

בטקסט רץ לפוסטים
נשתמש במשקלים בעלי קריאות טובה (300-400) Light ומעלה
טווחי גודל פוינט מומלצים בטווח: Pt 16 – Pt 14
ולהדגשות בטקסט (500-600)

בטקסט בכפתורים
נשתמש במשקלים בעלי קריאות נוכחת (500-600) Medium ומעלה
טווחי גודל פוינט מומלצים בטווח: Pt 10 – Pt 18

לטקסטים זעירים – מידע וטולטיפים
נשתמש במשקלים בעלי קריאות מעולה (300-400) Medium ומעלה
טווחי גודל פוינט מומלצים בטווח: Pt 16 – Pt 14
ולהדגשות בטקסט (500-700)

עימוד בדיגיטל הגדרות טיפול בטקסט

לדינג (Leading)​ – גובה השורה (מרווח בין השורות):

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

כותרות שני שורות ויותר / פסקאות / טקסט רץ – רצוי להתחיל מרווח ביחס של Em 1.5
מגובה האות ובהתאם לפרופורציות הפונט ולאווריריות המתבקשת לקריאות טובה

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

טראקינג (Tracking) ריווח בין אותיות

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

כמות המילים שמומלצת בשורה:

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

כמות השורות שמומלצת בפסקה:

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

שימוש בטורים מתי?

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

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

מתי לא נרצה להשתמש בטורים?!

• כאשר התוכן קצר/ארוך מידי
• כאשר התוכן עיוני ומצריך ריכוז בקריאה
• כשבתוכן משולבים הרבה פריטים ויזואליים

מומלץ לוודא שהטורים מתקבלים ומתחלקים כראוי במובייל, טאבלט ודסקטופ

יישורים לטקסט:

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

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