שיעור 2: סקאלת טיפוגרפיה ומרווחים — קצב חזותי מתוך מערכת
מעצב מוסר mockup עם 11 גדלי פונט שונים ו-7 ערכי מרווח אקראיים. בלי סקאלה, כל מסך נראה קצת אחר. השיעור הזה מלמד אותך להגדיר `סקאלת טיפוגרפיה` ו-`סקאלת מרווחים` כטוקנים ב-`tailwind.config.ts` — צעדים קבועים שיוצרים קצב חזותי במקום ניחושים.
סקאלה היא כמו מידות נעליים: יש סט קבוע של צעדים שכולם חולקים, במקום למדוד כל כף רגל במילימטרים אקראיים. ככה כל הזוגות מתאימים זה לזה.
- סקאלת טיפוגרפיה
- סט מוגדר של גדלי פונט שעולים ביחס קבוע — למשל `sm`, `base`, `lg`, `xl` — כך שכל טקסט במערכת נבחר מתוך מספר צעדים מצומצם ולא מגודל חופשי.
- סקאלת מרווחים
- סט טוקנים של ערכי מרווח שנבנים על יחידת בסיס (לרוב 4px) — `1`, `2`, `4` — שמזינים padding, margin ו-gap כך שכל הרווחים בממשק מתיישרים לאותה רשת.
- סקאלה מודולרית
- סקאלה שבה כל צעד הוא הצעד הקודם כפול יחס קבוע (למשל 1.25) — מה שנותן לטיפוגרפיה התקדמות הרמונית ולא קפיצות אקראיות.
- יחידת בסיס
- המספר הקטן שכל המרווחים הם כפולות שלו — לרוב 4px או 8px — כך שכל ערך ברשת מתחלק בו ושום מרווח לא 'נופל בין' הצעדים.
