סדנת
טיפוגרפיה
לדיגיטל
מתחילה בעוד
שעות
דקות
שניות
נעים להכיר : )
נעים מאוד, שירלי רביבו
מאפיינת, מעצבת ומפתחת אתרים
מרצה ומלמדת UX/UI
בעלת Shir Studio – סטודיו לעיצוב ובניית אתרים
בסטודיו שלי עיצבתי מאות אתרים ואפליקציות
למותגים נבחרים בארץ ובעולם
מותגים שעבדתי איתם
היום נדבר על...
הההבדלים בין הטיפוגרפיה בדיגיטל לעומת הפרינט
היררכיה טיפוגרפית בממשקים דיגיטלים
חוקים
בסיסיים
לנגישות
טיפוגרפית
טיפוגרפיה ההבדל
בין הפרינט לדיגיטל
ההשפעה על חווית המשתמש
טיפוגרפיה בדיגיטל משפיעה בראש ובראשונה על חוויית המשתמש, הנראות והקריאות של הטקסט בממשקים דיגיטליים, והיא חשובה בעיצוב ממשקי משתמש, אתרי אינטרנט, ויישומים דיגיטליים בכלל.
רישיון web
חשוב לדעת לפני הכל שרישיון פונטים לאתרים שונה מרישיון פונטים לפרינט. הפונטים שאפשר להשתמש בהם חינם בבניית אתר הם רק הפונטים של גוגל.
בכל פונט אחר שקנינו ברישיון דסקטופ (לפרינט) ומותקן אצלנו במחשב לא נוכל להטמיע אותו כטקסט באתר שלנו בלי לקנות רישיון web לאותו הפונט. יש לתת על זה את הדעת כבר בשלב העיצוב ובחירת הפונטים
תאימות
הגופנים צריכים להיות מותאמים לפורמט הדיגיטלי ולהצגה על מסכים. זה כולל את תומכי תצוגה בפורמטים שונים, כמו:
TrueType, OpenType או Web fonts
יש לתת את הדעת על עיצוב הגופנים בצורה שיאפשר להם להיות ברורים וקריאים בתצוגה דיגיטלית.
איך הפונט מתנהג
הגופנים צריכים להיות מותאמים לפורמט הדיגיטלי ולהצגה על מסכים. זה כולל את תומכי תצוגה בפורמטים שונים, כמו:
TrueType, OpenType או Web fonts
יש לתת את הדעת על עיצוב הגופנים בצורה שיאפשר להם להיות ברורים וקריאים בתצוגה דיגיטלית.
חוקים בסיסיים
לנגישות טיפוגרפית
בקבלת החלטות טיפוגרפיות חשוב לשים לב לנושא נגישות האתר כדי שיהיה שמיש גם עבור אנשים עם מוגבלויות שונות (ראייה, שמיעה, דיסלקציה, קוגניציה וכד')
1. התאימו את הגופן
רצוי להימנע מגופנים מיוחדים עם מבנה לא סטנדרטי, גופני ראווה, או גופני כתבי יד מכיוון שהם בעייתיים להנגשה.
2. התאימו את המשקל
יש לבחור בגופנים במשקלים בינוניים. ולהימנע מגופנים במשקלים קיצוניים – קל או שחור
3. גודל הגופן
באופן כללי גודל גופן של טקסט רץ לדסקטופ הינו 18px ו-16px למובייל
יש להקפיד שלא להקטין את גודל הטקסט הרץ מעבר לגדלים הנ"ל כדי שלא יהיה קשה לקרוא
4. גובה השורה
לגובה השורה השפעה מיידית על התחושה שמעביר עיצוב מסויים וחשיבותה אינה פחותה מחשיבות גודל הגופן. על ידי הגדלת הריווח ניתן לשפר את קריאות הטקסט אך יש לשים לב כי ריווח גדול מדי ייצור תחושת ניתוק בין השורות.
בטקסט רץ מומלץ לרווח בין השורות ביחידות EM , בדרך כלל, (אך לא תמיד!) ריווח של 1.25 מתאים לדסקטופ ו- 1.1 מתאים למובייל
5. יישור
יש ליישר את הטקסט בהתאם לכיוון הקריאה. בעברית – ישור לימין. באנגלית – ישור לשמאל. יש להימנע מיישור ממורכז ומיישור לשני הצדדים.
6. מובחנות
צריך להיות הבדל ברור בין סוגים שונים של טקסט – כותרות, פיסקאות, קישורים – המשתמש צריך להבחין ביניהם בלי שום מאמץ.
על פי הוראות הנגישות, יש צורך לבדל קישורים באמצעות צבע שונה ו\או קו תחתי.
7. רוחב אזור התוכן באתר
צריך להיות הבדל ברור בין סוגים שונים של טקסט – כותרות, פיסקאות, קישורים – המשתמש צריך להבחין ביניהם בלי שום מאמץ.
על פי הוראות הנגישות, יש צורך לבדל קישורים באמצעות צבע שונה ו\או קו תחתי.
