6 מיקרו-טיפים לטיפוגרפיה יוצאת דופן

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

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

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

1. טקסט צריך להיות דק יותר בדארק מוד

כשאתם מעצבים Dark Mode זו תהיה טעות להשאיר את משקל הפונט ללא שינוי –  והרבה מעצבים עושים את זה! טקסט בהיר על רקע כהה הוא פשוט פחות קריא. אז בדארק מוד תורידו משקל ב50 נקודות, זה ייראה מלוטש יותר.

*קפיצות קטנות במשקל הפונט אפשריות רק בVariable fonts.

טיפוגרפיה - משקל טקסט

2. גובה השורה צריך להיות נמוך יותר בכותרות

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

טיפוגרפיה - גובה שורה

3.שימוש ב ‘Stylistic Alternates’

אל תשתמשו בפונט “כמו שהוא מגיע”- תבדקו אם יש הגדרות שאתם יכולים לשחק איתן. מצד שמאל עשיתי Stylistic Alternates שנותנים מראה יותר מקורי ומיוחד.

Stylistic alternates

4. צריך תמיד לרווח אותיות כשמשתמשים בCaps (אותיות גדולות)

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

ריווח אותיות בפיגמה

5. מספרי אולד-סטייל קריאים יותר

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

אולד סטייל טקסט

6. ראשי תיבות ‘קטנים’

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

סמול קאפס בטקסט

בונוס: איך ליישם בFigma?

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

אני מודה למומחה הזה שלקחתי קורס טיפוגרפיה אינטרנטי שלו שנתן את ההשראה- @matejlatin.

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

להלן קישור לפוסט הרלוונטי מהאינסטגרם שלי. 

פוסטים דומים