מה זה סולם טיפוגרפי?
סולם טיפוגרפי הוא האוסף המסודר של גדלי הגופן שמערכת עיצוב מתירה, שנוצר בדרך כלל מהכפלת גודל בסיס ביחס קבוע. הגבלת הטקסט למדרגות האלה היא מה ששומר על טיפוגרפיה עקבית בממשק שנבנה בידי אנשים רבים.
איך בונים סולם
בוחרים גודל בסיס, בדרך כלל 16px כי זו ברירת המחדל של הדפדפן והגודל שטקסט רץ בדרך כלל צריך להיות בו. בוחרים יחס. מכפילים כלפי מעלה וכלפי מטה.
יחס של 1.25 (טרצה גדולה) מבסיס של 16px נותן בערך:
12px ← 16 / 1.25 / 1.067
14px
16px ← בסיס
20px
25px
31px
39pxאחר כך מעגלים את הערכים למשהו הגיוני. יחסים נפוצים נעים בין 1.125 (עדין, טוב לממשקים צפופים) ל-1.5 (דרמטי, מתאים יותר לעמודי שיווק מאשר לאפליקציות).
למה בכלל להגביל גדלים
בלי סולם, גדלים נבחרים אחד-אחד, ואפליקציה צוברת טקסט של 13px, 14px ו-15px שאף אחד לא התכוון שיהיה שונה. זה נקרא כמשהו לא לגמרי גמור, בלי שדבר מסוים יהיה שגוי באופן מזוהה.
סולם גם הופך את הקצב האנכי לבר-טיפול. כשהגדלים קשורים ביחס ידוע, גובה שורה ומרווחים יכולים להתייחס אליהם באופן צפוי במקום להיות מכווננים בכל רכיב בנפרד.
מה שגודל לבדו לא מכסה
גודל הוא רק חלק מהחלטה טיפוגרפית. מערכת טוקנים שלמה מצמידה לכל מדרגה:
- גובה שורה: הדוק יותר בכותרות, רחב יותר בטקסט רץ. בערך 1.2 לגדלי תצוגה ו-1.5 לטקסט רץ היא ברירת מחדל סבירה.
- משקל: אילו משקלים זמינים באילו גדלים
- מרווח בין אותיות: טקסט תצוגה גדול בדרך כלל זקוק למרווח שלילי קל; טקסט קטן לרוב לחיובי קל
מערכות שמטמיעות בטוקנים רק את הגודל משאירות את שלושת האחרים להחלטה מחדש בכל רכיב, וזה המקום שאליו חוסר העקביות חוזר.
שמות סמנטיים
לתת למדרגות שם לפי תפקיד ולא לפי גודל משתלם מאותה סיבה שזה משתלם בצבע:
--font-size-body: 16px;
--font-size-heading-2: 25px;--text-lg מתאר גודל. --font-size-heading-2 מתאר החלטה, ושינוי היעד שלו לא מחייב למצוא כל כותרת.
בחירת הגופנים
הצימוד הרגיל הוא גופן תצוגה בעל אופי לכותרות וגופן עבודה קריא מאוד לטקסט רץ. אופן הכישלון הוא בחירת שני גופנים דומים אך לא זהים, מה שנקרא כטעות ולא כהחלטה. או שמנגידים או שמתאימים; לא נשארים ב"כמעט".
איפה Flash DSM נכנס
מערכות שנוצרות כוללות צימוד גופנים וסולם מלא עם טוקנים לגודל, משקל, גובה שורה ומרווח בין אותיות בכל מדרגה, שנבחרים בהתאם למוצר שתואר בפרומפט.