טיפוגרפיה שמשנה הכל — מבחירת פונט ל-hierarchy מקצועי

4.1 למה טיפוגרפיה לבד משנה את הכל

יש ניסוי שאני מבקש מכל לומד לעשות לפני הפרק הזה: קחו את האתר הגנרי שבניתם עם AI (מ-Do Now #1 בפרק 1), ותחליפו רק את הפונט. לא את הצבעים, לא את ה-layout, לא את התוכן — רק את הפונט. החליפו את Inter ב-זוג Fraunces (לכותרות) + Inter (לטקסט). תעדכנו את הגדלים: H1 יעבור ל-56px, body ל-17px, line-height ל-1.6.

מה שיקרה אתם תראו בעיניכם. האתר "מתנער" מהרושם של "AI בנה אותי" תוך שינוי של 3 שורות CSS. אותו layout, אותם צבעים, אותו תוכן — ופתאום הוא מרגיש מעוצב. זו עוצמת הטיפוגרפיה: היא המשתנה היחיד שכמעט תמיד הופך אתר ממשעמם למרשים.

למה דווקא טיפוגרפיה?

שלוש סיבות עיקריות:

1. 95% מהאתר הוא טקסט. הסתכלו על כל אתר — Stripe, Linear, Apple, monday.com. מה אתם רואים יותר מהכל? טקסט. טקסט בגדלים שונים, משקלים שונים, מיקומים שונים. אם הטקסט מעוצב טוב, האתר מעוצב טוב. אם הטקסט גנרי, האתר גנרי.
2. הפונט הוא האישיות של המותג. Fraunces משדר editorial ומכובד. Space Grotesk משדר startup עכשווי. Playfair Display משדר יוקרה קלאסית. Rubik משדר friendly ונגיש. ברגע שבחרתם פונט, בחרתם אישיות. Inter לבד = אין אישיות (וזה בדיוק הבעיה של AI slop).
3. היררכיה טיפוגרפית מחליפה 80% מהעיצוב. אתר עם H1 בגודל 56px ו-body בגודל 17px, עם line-height 1.6 ו-spacing נדיב, נראה "מעוצב" גם בלי איורים, בלי תמונות גדולות, בלי אנימציות. היררכיה נכונה היא העיצוב.

למה AI לא עושה את זה לבד

כבר ראינו בפרק 1 ש-AI ברירת-מחדל משתמש ב-Inter לכל דבר. אבל הבעיה עמוקה יותר:

• AI לא יודע להחליט על אישיות. בלי הנחיה על tone (editorial / playful / luxury / technical), הוא בוחר את הפונט "הבטוח ביותר" — וזה Inter.
• AI לא בונה scale אמיתי. הוא יעדיף H1=36px, H2=28px, H3=22px, body=16px — ההפרש הקטן הזה יוצר אתר בלי היררכיה ויזואלית ברורה.
• AI מתעלם מ-line-height. ברוב המקרים הוא ישאיר default (1.5 לכל דבר), בלי להבדיל בין headings (1.1) ל-body (1.6).
• AI בעברית — קטסטרופה. בלי הנחיה ספציפית, הוא יטען Rubik או Heebo וישאיר את הטקסט באנגלית באותו פונט — אם זה בכלל ירונדר נכון.

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

4.2 סוגי פונטים — serif, sans-serif, display, monospace

לפני שבוחרים פונט, צריך להכיר את 4 המשפחות. כל משפחה משדרת משהו שונה, ומתאימה ל-use-case שונה.

1. Serif — המשפחה הקלאסית

מה זה: פונטים עם "רגליות" קטנות בקצוות האותיות (Times New Roman, Georgia, Playfair Display, Fraunces). מקורם בכתב יד ובדפוס הקלאסי.

מה הם משדרים: editorial, מכובד, מסורתי, אמין. השימוש הקלאסי: עיתונים, ספרים, מגזינים. בעולם ה-web המודרני: landing pages של מותגים שרוצים להיראות "פרימיום" או "מבוגרים" (Apollo, Medium, The New York Times).

מתי להשתמש: כותרות שצריכות לשדר מכובדות — עיתונאי, משפטי, פיננסי, יוקרה, rwb3 editorial. לא מתאים ל-body בגדלים קטנים (האותיות נהרסות מתחת ל-16px).

דוגמאות בולטות: Fraunces (modern serif, variable), Playfair Display (high-contrast, elegant), Lora (soft, readable), Source Serif 4 (professional).

2. Sans-serif — המשפחה המודרנית

מה זה: פונטים ללא רגליות, עם אותיות "נקיות" (Arial, Helvetica, Inter, Roboto, Space Grotesk). Sans = בלי בצרפתית.

מה הם משדרים: modern, neutral, נקי, טכנולוגי. השימוש הקלאסי: UI של אפליקציות, SaaS, startups, כל דבר digital-first.

מתי להשתמש: body text כמעט תמיד (קריא גם בגדלים קטנים), ו-UI components. לכותרות אם ה-tone טכנולוגי/startup.

דוגמאות בולטות: Inter (neutral, דיפולט ל-UI), Space Grotesk (geometric, startup vibes), Manrope (soft, friendly), IBM Plex Sans (corporate modern), Geist (Vercel's house font, 2024-2026 trending).

3. Display — המשפחה הדקורטיבית

מה זה: פונטים בעלי אישיות חזקה שעוצבו ספציפית לכותרות גדולות (Abril Fatface, Rubik Mono One, Bebas Neue, Clash Display). הם לא מיועדים לטקסט רגיל — רק ל-hero או ל-callouts.

מה הם משדרים: אישיות חזקה, תלוי בפונט הספציפי — fashion, creative, bold, playful, retro.

מתי להשתמש: רק ל-hero headline, או לכותרות גדולות במיוחד (80px+). לעולם לא ל-body ולא ל-H3 ומטה.

דוגמאות בולטות: Abril Fatface (editorial fashion), Bebas Neue (condensed bold), Clash Display (modern bold), Rubik Mono One (playful-tech).

4. Monospace — המשפחה הטכנית

מה זה: פונטים שכל אות בהם תופסת את אותו רוחב (JetBrains Mono, IBM Plex Mono, Fira Code, Space Mono). מקורם ממכונות כתיבה.

מה הם משדרים: טכנולוגי, precise, code, terminal. בעולם ה-SaaS המודרני: משתמשים בזה בתור accent font ל-labels, numbers, code snippets, ו-badge text.

מתי להשתמש: קוד, גרסאות, מספרים, labels ב-UI טכנולוגי. לא לטקסט רציף.

דוגמאות בולטות: JetBrains Mono (developer-first), IBM Plex Mono (elegant technical), Fira Code (ligatures), Space Mono (retro-futuristic).

4.3 Font Pairing — כללי הזיווג שעובדים

אתר פרימיום כמעט תמיד משתמש ב-2 פונטים: display font לכותרות ו-body font לטקסט. לפעמים מוסיפים גם monospace כ-accent (ל-labels וקוד). אבל אף פעם לא יותר מ-3 פונטים — זו הדרך המהירה לכאוס ויזואלי.

השאלה: איך בוחרים 2 פונטים שעובדים ביחד? יש 4 כללים שמסדרים 95% מההחלטות.

כלל 1: קונטרסט — לא דמיון

שני פונטים שנראים דומים מדי "מתנגשים" — העין לא יודעת אם הם אותו פונט עם bug או שניים שונים. בחרו 2 פונטים ברורים בהבדל. הדרכים הנפוצות:

• Serif + Sans-serif — הצמד הקלאסי. Fraunces + Inter, Playfair Display + Source Sans 3.
• Display + Sans-serif — פונט דקורטיבי לכותרת + נקי ל-body. Abril Fatface + Manrope.
• Sans-serif כבד + Sans-serif קל — אם שניהם sans-serif, שיהיו במשקלים שונים מאוד. Space Grotesk 700 + Inter 400.

כלל 2: היררכיה ברורה — תפקיד לכל אחד

לפני שבוחרים, תחליטו מי המלך ומי המשרת:

• Display (המלך): כותרות H1, H2, hero. אישיות חזקה, weight 600-800.
• Body (המשרת): כל השאר — פסקאות, UI, labels, buttons. ניטרלי, weight 400-500.

אל תחליפו ביניהם. display שרץ באופן body יהיה מעייף לקריאה. body ב-H1 יהיה חסר אישיות.

כלל 3: אותה "תקופה"

Fraunces (מודרני-קלאסי) + Space Mono (retro) = קונפליקט סגנוני. Playfair Display (אלגנטי) + Rubik Mono One (playful) = כאוס. בחרו 2 פונטים מאותה אווירה:

• Modern-clean (Space Grotesk + Inter)
• Editorial-premium (Fraunces + Inter)
• Playful-friendly (Rubik + Manrope)
• Luxury-classic (Playfair + Source Sans)

כלל 4: קריאות קודם לכל

לא משנה כמה Display יפה, אם ה-body לא קריא, האתר נכשל. בחרו body שהוא:

• קריא ב-14-17px על מסך
• מאוזן ב-x-height (גובה האותיות הקטנות ביחס לגדולות)
• יש לו משקלים 400 + 500 + 600 לפחות
• יש לו תמיכה מלאה בעברית (אם רלוונטי)

4.4 Google Fonts — איך לבחור ולטעון נכון

Google Fonts הוא המקור החינמי הטוב ביותר לפונטים ל-web. למעלה מ-1,500 פונטים, תמיכה ב-100+ שפות (כולל עברית), ו-CDN מהיר. אבל יש 3 טעויות נפוצות בטעינה שהורגות performance. נעבור על השיטה הנכונה.

שלב 1: בחירה ב-fonts.google.com

ב-fonts.google.com:

1. חפשו את הפונט (למשל "Heebo" או "Fraunces")
2. לחצו על הפונט — תיכנסו לעמוד הפונט
3. בצד — תסמנו רק את המשקלים שאתם באמת צריכים (לא את כולם!)
4. בחרו את ה-subsets הרלוונטיים: latin (אנגלית) + hebrew אם רלוונטי
5. קבלו את קוד ה-<link> או @import

שלב 2: טעינה נכונה ב-HTML

הקוד הנכון לטעינת 2 פונטים, רק המשקלים שצריך, עם preconnect ו-font-display: swap:

<!-- 1. preconnect לפתיחת חיבור מוקדם -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 2. טעינת הפונטים — רק המשקלים שצריך -->
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;600;800&family=Assistant:wght@400;500&display=swap" rel="stylesheet">

שימו לב ל-4 דברים חשובים:

1. 2 שורות preconnect — פותחות חיבור ל-Google לפני הורדת הפונט. חוסכות 100-300ms.
2. שילוב 2 פונטים בקריאה אחת — family=Heebo...&family=Assistant... במקום 2 שורות נפרדות. חוסך HTTP request.
3. רק משקלים ספציפיים — wght@400;600;800, לא כל המשקלים. משקל אחד = ~30KB.
4. display=swap — בסוף ה-URL. חובה (נסביר בסעיף הבא).

שלב 3: שימוש ב-CSS

:root {
  --font-display: 'Heebo', system-ui, sans-serif;
  --font-body: 'Assistant', system-ui, sans-serif;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
}

body, p {
  font-family: var(--font-body);
  font-weight: 400;
}

שימו לב: ה-system-ui, sans-serif בסוף הוא ה-fallback. אם הפונט לא נטען (או לא נטען עדיין), הדפדפן יציג את פונט המערכת. זה מה שמונע טקסט בלתי-נראה.

4.5 Variable Fonts — פונט אחד, עשרות משקלים

Variable fonts הם טכנולוגיה מ-2018 שב-2026 כבר תומכת ב-97% מהדפדפנים. הרעיון: במקום לטעון 5 קבצים נפרדים (Heebo-Regular, Heebo-Medium, Heebo-Bold, Heebo-ExtraBold, Heebo-Black), טוענים קובץ יחיד שמכיל את כל הטווח של המשקלים. אחר כך אפשר להשתמש בכל משקל — 400, 523, 687, 812 — בלי לטעון קובץ נוסף.

היתרונות

• חיסכון משמעותי ב-bandwidth — קובץ אחד של ~80KB במקום 5 קבצים של 30KB כל אחד.
• גמישות מלאה — אפשר להשתמש במשקל 523 (שלא קיים ב-static fonts) ליצירת אפקטים עדינים.
• ציר נוסף של התאמה — חלק מה-variable fonts תומכים גם ב-width (condensed עד expanded) וב-slant (italic בדרגות).
• אנימציה חלקה — אפשר להאניים את המשקל ב-CSS (transition על font-weight).

איך זה עובד — טעינה ו-syntax

ב-Google Fonts, רוב הפונטים הפופולריים כבר זמינים כ-variable. Heebo הוא דוגמה — תראו בעמוד שלו אפשרות "Style" עם slider.

טעינת variable font:

<!-- הטווח wght@300..900 טוען את כל הטווח כקובץ אחד -->
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300..900&display=swap" rel="stylesheet">

שימוש ב-CSS — כל משקל שרוצים:

h1 { font-weight: 800; }
h2 { font-weight: 700; }
.medium-bold { font-weight: 550; } /* משקל שלא קיים ב-static */

/* שליטה מדויקת יותר עם font-variation-settings */
.hero-title {
  font-variation-settings: 'wght' 825;
}

variable fonts + animation — טריק עוצמתי

מאחר שאפשר להשתמש בכל משקל, אפשר גם להאניים ביניהם:

.button {
  font-weight: 500;
  transition: font-weight 200ms ease-out;
}

.button:hover {
  font-weight: 700; /* מעבר חלק, לא קפיצה */
}

זה נראה מקצועי, עדין, ומגניב — והוא בלתי אפשרי עם static fonts.

רשימת variable fonts מומלצים (Google Fonts)

4.6 font-display: swap — למה זה חובה

יש property אחד ב-CSS שמבדיל בין אתר פרימיום לאתר חובבני בעיני Google, ובעיני כל גולש שגלש במובייל ברשת 4G חלשה: font-display. 3 שורות שצריך להבין.

הבעיה: FOIT ו-FOUT

כשהדפדפן טוען דף, הוא מגלה ב-CSS שיש צורך בפונט חיצוני (Heebo מ-Google). הדפדפן מתחיל להוריד את הפונט — זה לוקח 200-800ms ברשת טובה, ו-2-3 שניות ברשת חלשה במובייל. בינתיים, מה הוא מציג?

יש 5 ערכים אפשריים ל-font-display:

הבחירה המעשית: swap

ברוב המקרים — השתמשו ב-swap. הסיבה: טקסט לא נראה הוא יותר גרוע מטקסט שקופץ. אם משתמש לא רואה טקסט ב-2 שניות הראשונות, הוא נוטש. אם הוא רואה טקסט ב-fallback ואז רואה "קפיצה" לפונט האמיתי — זה מרגיש מהיר ומקצועי.

איך ליישם: ב-URL של Google Fonts, הוסיפו &display=swap:

<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap" rel="stylesheet">

אם אתם טוענים פונט דרך @font-face (פונט מסחרי שקניתם), הוסיפו את השורה:

@font-face {
  font-family: 'Ploni';
  src: url('/fonts/Ploni.woff2') format('woff2');
  font-display: swap;
}

טריק מתקדם: size-adjust ו-ascent-override

ה-FOUT (ההבהוב) מציק אם ה-fallback font שונה מאוד בגודל מהפונט האמיתי — אז הטקסט "קופץ" בגודל. הפתרון ב-2024-2026: size-adjust ב-@font-face fallback:

@font-face {
  font-family: 'Heebo-Fallback';
  src: local('Arial');
  size-adjust: 97%;  /* לגרום ל-Arial להיראות כמו Heebo בגודל */
  ascent-override: 92%;
  descent-override: 28%;
}

זה טריק מתקדם — לא חובה לרוב האתרים. אבל אם אתם בונים אתר שמתמקד ב-LCP מתחת ל-2 שניות, זה מחזיר 10-15 נקודות ב-Lighthouse.

4.7 Typographic Hierarchy — מ-display ל-caption

Typographic hierarchy היא ההבחנה הויזואלית בין 6 רמות של טקסט באתר. זו המערכת שמנחה את העין של הקורא: "קודם תסתכל על זה, אחר כך על זה, בסוף על זה". בלי hierarchy — הכל בעל אותה חשיבות, והעין לא יודעת לאן להסתכל.

7 הרמות של typographic scale מקצועי

המספרים קודם לכל — Scale Ratio

איך קובעים את ה-ratio בין הרמות? יש שיטות מתמטיות מוכחות:

• Minor Third (1.2x) — עדין, קלאסי. 16 → 19 → 23 → 28 → 33. מתאים ל-editorial, blog.
• Major Third (1.25x) — מאוזן. 16 → 20 → 25 → 31 → 39. מתאים לרוב ה-SaaS.
• Perfect Fourth (1.333x) — דרמטי. 16 → 21 → 28 → 37 → 50. מתאים ל-hero פרימיום.
• Golden Ratio (1.618x) — דרמטי במיוחד. 16 → 26 → 42 → 68 → 110. מתאים לאתרים מעוצבים מאוד.

כלי אונליין: typescale.com — בחרו ratio, תקבלו את כל המספרים.

Typographic scale שלם עם CSS custom properties

זה הקוד שאני מציע להעתיק-להדביק לכל פרויקט חדש:

:root {
  /* Fonts */
  --font-display: 'Fraunces', 'Heebo', Georgia, serif;
  --font-body: 'Inter', 'Assistant', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Type scale — Perfect Fourth ratio */
  --text-xs: 0.75rem;      /* 12px - caption */
  --text-sm: 0.875rem;     /* 14px - small body */
  --text-base: 1rem;       /* 16px - body */
  --text-lg: 1.125rem;     /* 18px - large body */
  --text-xl: 1.25rem;      /* 20px - h4 */
  --text-2xl: 1.5rem;      /* 24px - h3 */
  --text-3xl: 2rem;        /* 32px - h2 */
  --text-4xl: 2.5rem;      /* 40px - h1 */
  --text-5xl: 3.5rem;      /* 56px - display mobile */
  --text-6xl: 5rem;        /* 80px - display desktop */

  /* Line-heights */
  --leading-tight: 1.1;    /* headings */
  --leading-snug: 1.3;     /* h3-h4 */
  --leading-normal: 1.6;   /* body */
  --leading-relaxed: 1.75; /* long-form content */

  /* Letter-spacing */
  --tracking-tight: -0.03em;  /* display */
  --tracking-snug: -0.02em;   /* h1-h2 */
  --tracking-normal: 0;       /* body */
  --tracking-wide: 0.025em;   /* UPPERCASE */
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
}

מה שהמערכת הזו נותנת: כל החלטה טיפוגרפית במקום אחד. שינוי של --text-4xl משפיע על כל ה-H1s באתר. זה הבסיס של design tokens לטיפוגרפיה.

4.8 Line-height ו-Letter-spacing — החוקים שאף אחד לא מספר

אפשר לבחור את הפונטים הכי יפים בעולם ולהגדיר scale מושלם — אם ה-line-height שגוי, הטקסט ייראה חובבני. זה הפרמטר שעין מאומנת רואה תוך שנייה, ומתחילים לא שמים לב אליו בכלל.

Line-height — הכלל המרכזי

Line-height (רווח בין שורות) תלוי בגודל הטקסט:

הכלל המסכם: כמה שהטקסט גדול יותר, line-height קטן יותר. כמה שהטקסט קטן יותר, line-height גדול יותר.

Letter-spacing — מתי להרחיב, מתי לצמצם

Letter-spacing (tracking) הוא המרחק האופקי בין אותיות. יש 3 חוקים:

1. כותרות גדולות (32px+) → letter-spacing שלילי (-0.02em עד -0.04em). למה: בגדלים גדולים, האותיות "מפוזרות" ונראות רחוקות. סגירה קלה יוצרת compactness מקצועית. זו אחת הנגיעות החזקות ביותר של מעצבים מקצועיים.
2. Body (14-18px) → letter-spacing 0. אף פעם אל תשנו את ברירת המחדל של body. זה מקלקל קריאות.
3. UPPERCASE → letter-spacing חיובי (0.05em עד 0.1em). למה: אותיות גדולות באנגלית צפופות מטבען — רווח קל מציל אותן.

דוגמה מלאה

.hero-title {
  font-size: 5rem;          /* 80px */
  line-height: 1.05;
  letter-spacing: -0.03em;  /* שלילי — compactness */
  font-weight: 800;
}

.body-paragraph {
  font-size: 1rem;          /* 16px */
  line-height: 1.6;
  letter-spacing: 0;        /* default */
}

.label-uppercase {
  font-size: 0.75rem;       /* 12px */
  line-height: 1.2;
  letter-spacing: 0.08em;   /* חיובי — UPPERCASE needs air */
  text-transform: uppercase;
  font-weight: 600;
}

4.9 clamp() — גדלים responsive בלי breakpoints

עד 2020, הדרך להתמודד עם גדלי טקסט שונים במובייל/desktop היתה media queries: כותבים h1 { font-size: 32px; }, ואז @media (min-width: 768px) { h1 { font-size: 48px; } }, ואז עוד breakpoint, ועוד. זה מסורבל ולא תמיד עובד טוב בין מסכים.

ב-2021 הגיע clamp() — ופתר את הבעיה הזו מהיסוד.

מה זה clamp()

clamp() היא פונקציית CSS שמקבלת 3 ערכים:

font-size: clamp(MIN, IDEAL, MAX);

• MIN — הגודל המינימלי. במסכים קטנים, הטקסט לא ירד מזה.
• IDEAL — הגודל המועדף. ערך בעל יחידת vw (viewport width) שמתרחב ומצטמק עם המסך.
• MAX — הגודל המקסימלי. במסכים גדולים, הטקסט לא יעלה מעל זה.

דוגמה פרקטית:

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
}

מה שיקרה:

• במסך רוחב 360px (מובייל קטן) — הגודל יהיה 2rem (32px), המינימום
• במסך 768px (טאבלט) — הגודל יגדל הדרגתית בערך 3rem (48px)
• במסך 1280px (desktop) — הגודל יגיע למקסימום 4.5rem (72px)
• במסך 2560px (ultra-wide) — הגודל עדיין 4.5rem (לא גדול יותר)

Responsive type scale שלם — מוכן להעתיק-להדביק

הנה ה-scale שאני מציע לכל פרויקט חדש. הוא משתמש ב-clamp() לכל רמה, ומונע את הצורך ב-breakpoints לטיפוגרפיה:

:root {
  /* Display — hero-size */
  --text-display: clamp(2.5rem, 5vw + 2rem, 6rem);

  /* Headings */
  --text-h1: clamp(2rem, 3vw + 1.5rem, 4rem);
  --text-h2: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  --text-h3: clamp(1.375rem, 1.5vw + 0.75rem, 2rem);
  --text-h4: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);

  /* Body */
  --text-lg: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
  --text-base: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
  --text-sm: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);

  /* Caption */
  --text-xs: clamp(0.75rem, 0.1vw + 0.7rem, 0.875rem);
}

.hero h1 { font-size: var(--text-display); }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
body { font-size: var(--text-base); }
.caption { font-size: var(--text-xs); }

זה החלק היפה: קובץ אחד, 10 שורות — ו-0 media queries לטיפוגרפיה. הטקסט יתאים בצורה חלקה לכל מסך מ-320px עד 2560px.

חישוב ה-IDEAL value

איך בוחרים את הערך האמצעי? יש סוד: Utopia.fyi calculator. אתם נותנים לו את הגודל שאתם רוצים ב-mobile ו-desktop, והוא מחשב את ה-clamp המדויק. URL: utopia.fyi/type/calculator.

4.10 פונטים עבריים — 5 ההמלצות המלאות

זה הסעיף החשוב ביותר בפרק למי שבונה אתרים בעברית. העולם של פונטים עבריים מצומצם מאוד לעומת אנגלית (10s של פונטים איכותיים vs 1,500+ באנגלית), אבל בעשור האחרון — בזכות עבודה מרשימה של מעצבים ישראליים — יש לנו 5 פונטים שהם ברמת עולם ומתאימים לכל use-case.

לכל פונט נעבור על: יתרונות, חסרונות, best use-case, איפה להשיג, ואיך לטעון.

1. Heebo — הגרסה העברית ה-universal

על הפונט: Heebo הוא פונט sans-serif שנועד להיות "Roboto בעברית". מעוצב על ידי Oded Ezer Type Foundry. Variable font עם טווח 100-900.

• יתרונות: 9 משקלים, variable font זמין, תמיכה מלאה באנגלית (מיושב על Roboto), קריא בכל הגדלים, מאוזן.
• חסרונות: "הפונט הדיפולטי" של עברית — אם כולם משתמשים בו, האתר שלכם לא בולט.
• Use-case: SaaS, startups, dashboards, כל אתר ש"פונט כללי-נייטרלי" מתאים לו. ברירת המחדל הבטוחה.
• איפה להשיג: Google Fonts (חינם)
• איך לטעון: <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;600;800&display=swap" rel="stylesheet">

2. Assistant — נקי, מודרני, עדכני

על הפונט: מעוצב על ידי Barak Chamo. פונט geometric sans-serif שנתפס כיום כ-"הפונט הרציני" של עברית מודרנית. Variable font.

• יתרונות: גיאומטרי ונקי, נראה מקצועי ב-body text, x-height נעים, טווח משקלים 200-800.
• חסרונות: פחות אישיות ב-headings — טוב יותר כ-body.
• Use-case: Body font — מושלם לטקסט רציף. גם לכותרות אם ה-tone מודרני-טכנולוגי.
• איפה להשיג: Google Fonts (חינם)
• איך לטעון: <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;700&display=swap" rel="stylesheet">

3. Rubik — ידידותי, עגול, playful

על הפונט: מעוצב על ידי Meir Sadan ו-Cyreal. פונט sans-serif עם פינות מעוגלות. משתמשים בו אתרים רבים בישראל (מ-Waze ועד אתרי סטארטאפים).

• יתרונות: ידידותי, נגיש, 9 משקלים, תמיכה באנגלית טובה.
• חסרונות: בגלל שהוא היה פופולרי מאוד ב-2018-2022 — יכול להרגיש "ישראלי סטנדרטי". לא מתאים ל-tone רציני/פיננסי.
• Use-case: Consumer apps, startups ידידותיים, education, lifestyle.
• איפה להשיג: Google Fonts (חינם)
• איך לטעון: <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;800&display=swap" rel="stylesheet">

4. Secular One — Display חזק לכותרות בלבד

על הפונט: פונט display עברי בעל weight יחיד (800). מעוצב על ידי Oren Watkins. "פונט הפוסטר" של עברית.

• יתרונות: bold, מאופק, מודרני, אותיות עבות ברורות. יוצר impact מיידי.
• חסרונות: משקל יחיד בלבד (800). לא מתאים ל-body — רק לכותרות גדולות.
• Use-case: Hero headlines בלבד. להשתמש בזוג עם Heebo או Assistant ל-body.
• איפה להשיג: Google Fonts (חינם)
• איך לטעון: <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">

5. Noto Sans Hebrew — ה-fallback הבטוח

על הפונט: חלק מפרויקט Noto של Google — פונט שנועד לכסות את כל שפות העולם. Variable font.

• יתרונות: תמיכה מלאה ב-Unicode, קריא מאוד, תואם לכל הדפדפנים, variable.
• חסרונות: אין לו הרבה אישיות — הוא "הפונט הבטוח".
• Use-case: Fallback font, אתרי ממשלה, אתרים רב-שפתיים, אתרים שדורשים תמיכה מקסימלית. או כמעט כל פרויקט שרוצה "פונט בטוח אפס פשרות".
• איפה להשיג: Google Fonts (חינם)
• איך לטעון: <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;600;800&display=swap" rel="stylesheet">

פונטים עבריים פרימיום (בתשלום) — אם יש תקציב

אם יש לכם תקציב (50-500 ₪), אפשר לצאת מהסט של 5 ה-Google Fonts ולקבל משהו באמת יחיד:

• Ploni (HaTypography) — פונט פרימיום עם אישיות ייחודית. מתאים לעסקים פרימיום.
• Alef (HaTypography) — קלאסי עברי, משמש בעיתונים ו-editorial.
• Narkiss (Michal Sahar) — הקלאסיקה של עברית — אם אתם בונים משהו "יודעי-ספר".
• Shuneet (Ismar David) — serif עברי מסורתי אבל עדכני.

מקומות לרכישה: HebrewFonts.co.il, Fonts.co.il, ו-Yanone (לפונטים בינלאומיים עם תמיכה בעברית).

5 זיווגי פונטים עברית + אנגלית מוכחים

הרוב מהאתרים בישראל הם דו-לשוניים (עברית + מונחים באנגלית). הנה 5 זיווגים שעובדים:

דוגמה ליישום של זיווג #1 — הגישה הנכונה:

:root {
  /* הגדרה אחת שמטפלת בשתי השפות */
  --font-display: 'Inter', 'Heebo', system-ui, sans-serif;
  --font-body: 'Inter', 'Assistant', system-ui, sans-serif;
}

/* הדפדפן אוטומטית בוחר את הפונט שמתאים לשפת האות */
/* עברית → Heebo/Assistant, אנגלית → Inter */
h1 { font-family: var(--font-display); }
body { font-family: var(--font-body); }

הסוד: הדפדפן סורק מימין לשמאל את רשימת הפונטים בכל font-family. כשהוא מגיע לתו שלא קיים בפונט הראשון (למשל עברית ב-Inter אנגלי-בלבד), הוא מדלג לפונט הבא. זה "בחירה אוטומטית".

4.11 RTL Typography — האתגרים הייחודיים

עברית נכתבת מימין לשמאל (RTL — Right-To-Left). האתגר הוא לא רק "הפוך הכל" — יש סט שלם של פרטים טיפוגרפיים שצריך לטפל בהם.

האתגרים המובהקים

1. direction: rtl ו-dir="rtl"

הכרחי מ-HTML הראשון:

<!-- בשורש הדף -->
<html lang="he" dir="rtl">

/* או דרך CSS */
:root { direction: rtl; }

זה גורם לטקסט לזרום מימין לשמאל, ול-layouts לתמוך במירור אוטומטי.

2. פיסוק שמשתנה

סימני פיסוק בעברית מופיעים בסוף שמאלי של משפט (שהוא "אחרי" בעברית), לא בצד ימין. הדפדפן עושה את זה אוטומטית בזכות Unicode BiDi algorithm — אבל לפעמים יש שגיאות. בדקו בדפדפן:

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

3. גרשיים

בעברית יש שימוש כבד בגרשיים (למשל "צה"ל", "ארה"ב"). בדקו שהפונט מרנדר אותם נכון — לפעמים הם "נופלים" לגובה לא נכון.

4. Alignment

בעברית, ברירת המחדל היא text-align: right (כי זו "תחילת" הטקסט). אבל ל-hero בכל זאת תרצו לפעמים text-align: center. אל תשכחו להגדיר מפורשות.

5. Justify — זהירות

text-align: justify בעברית יוצר לפעמים "נהרות" לבנים (רווחים גדולים בין מילים). אם מוכרחים — השתמשו ב-hyphens: auto או עדיף להישאר עם text-align: right.

RTL Typography Checklist

4.12 Mixed Content — עברית עם אנגלית באותו משפט

אחד האתגרים הגדולים של אתרים עבריים ב-2026: המשפטים שלנו מלאים באנגלית. "השתמש ב-React לבניית האתר", "קנה עכשיו ב-₪99", "הצטרף ל-newsletter". איך מטפלים בזה נכון?

הבעיה הטכנית

Unicode Bidirectional Algorithm (BiDi) מטפל אוטומטית ברוב המקרים. אבל יש 3 מצבים שבהם מופיעה שגיאה:

1. מספרים באמצע משפט עברי — לפעמים נכתבים מימין לשמאל במקום משמאל לימין.
2. סוגריים שמכילים אנגלית — לפעמים "עפים" למקום הלא נכון.
3. מקפים וסימני פיסוק בין עברית לאנגלית — לפעמים "נתקעים" במקום לא נכון.

דוגמה בעייתית מהחיים

הטקסט הבא נכון סמנטית: "השתמש ב-React (גרסה 18.2.0) לבניית האתר". אבל בדפדפן, ללא טיפול:

• ה-"React" — אנגלית — זורם שמאל-לימין
• ה-"(גרסה 18.2.0)" — יש סוגריים + מספר — יכול "להתבלבל"
• תוצאה: ייתכן שהסוגר הימני יופיע לפני הסוגר השמאלי בעין

הפתרונות

1. unicode-bidi: plaintext

ב-CSS, על אלמנטים שמכילים תוכן מעורב:

p, h1, h2, h3, li {
  unicode-bidi: plaintext;
}

זה אומר לדפדפן: "תסמוך על ה-BiDi algorithm, תן לו לעבוד". פותר 90% מהבעיות.

2. ‎ ו-‏ — Unicode markers

במקרים נדירים שבהם BiDi מתבלבל, אפשר להוסיף markers ב-HTML:

• ‎ — Left-to-Right Mark (דוחף את התוכן לכיוון שמאל-לימין)
• ‏ — Right-to-Left Mark (דוחף ימין-לשמאל)

דוגמה: קנה עכשיו ב-‎$99.99 — ה-mark מבטיח שהמחיר יופיע נכון משמאל לימין.

3. פונט עם תמיכה בשני הכיוונים

Inter (בגרסה האחרונה), Heebo, ו-Assistant — כולם כוללים אותיות אנגליות ועבריות. הפונט יודע לרנדר שניהם באותה רמה. לעומת זאת, פונט "עברי-בלבד" או "אנגלי-בלבד" ידרוש החלפה — ותקבלו הבדלי גודל בין השפות.

הכלל המסכם לתוכן מעורב

1. בחרו פונט שתומך בשתי השפות (Heebo, Assistant, Noto Sans Hebrew)
2. הוסיפו unicode-bidi: plaintext על אלמנטים עם טקסט
3. השתמשו ב-‎ כשיש מחירים/מספרים/URLs בתוך משפט עברי
4. בדקו בדפדפן אמיתי, לא רק ב-DevTools (לפעמים יש הבדלים ברינדור)

4.13 Performance — לטעון רק מה שצריך

פונטים הם הפקטור #1 שהורג LCP (Largest Contentful Paint) באתרים. 4 פונטים × 5 משקלים × 30KB = 600KB של פונטים. ברשת 4G חלשה — 2-3 שניות של ייבוא. הנה איך להפחית את זה ל-80KB.

5 עקרונות ה-performance של פונטים

1. רק המשקלים שצריך

כבר דיברנו על זה. ברוב האתרים — 3 משקלים מספיקים (400, 600, 800). לפעמים אפילו 2 (400 + 700).

2. רק ה-subsets שצריך

ב-Google Fonts, אפשר לציין subsets — תמיכה בשפות ספציפיות. אם האתר בעברית בלבד עם קצת אנגלית:

<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&subset=hebrew,latin&display=swap" rel="stylesheet">

זה חוסך ~40% על הפונט (כי לא טוענים cyrillic, arabic, japanese וכו' שלא צריך).

3. Subsetting מתקדם — רק התווים שצריך

אם יש לכם טקסט ספציפי (למשל לוגו או heading קבוע), אפשר לטעון רק את התווים שצריך:

<!-- טוען רק את התווים A-Z a-z + חלק מעברית -->
<link href="https://fonts.googleapis.com/css2?family=Heebo&text=נויגנחתאבדהוזעמקלכטרפצש&display=swap">

זה מקטין פונט מ-80KB ל-8KB. קיצוני — משמש רק ל-hero אקסטרמי.

4. preconnect + dns-prefetch

לפני טעינת הפונטים, תגידו לדפדפן "אני אטען מ-fonts.googleapis.com":

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

זה חוסך 100-300ms של DNS lookup.

5. Preload לפונט הקריטי

לפונט ה-hero (H1) — תגידו לדפדפן לטעון אותו מוקדם, עם עדיפות גבוהה:

<link rel="preload" href="https://fonts.gstatic.com/s/heebo/v26/NGS6v5_NC0k9P_v6ZUCbLRAHxK1E.woff2" as="font" type="font/woff2" crossorigin>

זה טריק מתקדם — משתמשים בו רק כשה-LCP חשוב מאוד.

Checklist לטעינת פונטים מאופטמת

• ✓ רק 2-3 משקלים לכל פונט
• ✓ רק 2 פונטים (מקסימום 3)
• ✓ display=swap בסוף ה-URL
• ✓ preconnect ל-googleapis ו-gstatic
• ✓ subset=hebrew,latin אם רלוונטי
• ✓ fallback fonts ב-font-family (system-ui, sans-serif)
• ✓ font-display: swap ב-@font-face (אם משתמשים)
• ✓ Variable fonts לחיסכון באקסטרה (אם זמינים)

4.14 Typography Spec Template — פרומפט ל-AI

זה ה-deliverable המרכזי השני של הפרק: פרומפט מובנה שתוכלו להעתיק-להדביק לתחילת כל פרויקט AI, שמנחה את הכלי לבנות טיפוגרפיה מקצועית מהרגע הראשון.

Typography Spec Template v1.0 (English for AI tools)

TYPOGRAPHY SPEC — Use these exactly, do not substitute:

Font Pairing:
- Display font (H1, H2, hero): [FRAUNCES 700 / SPACE GROTESK 700 / PLAYFAIR DISPLAY 700]
- Body font (paragraphs, UI): [INTER 400 / SOURCE SANS 3 400 / MANROPE 400]
- Accent font (code, labels): [JETBRAINS MONO 400 / IBM PLEX MONO 400] — optional
- Hebrew Display: [HEEBO 800 / SECULAR ONE / ASSISTANT 700]
- Hebrew Body: [HEEBO 400 / ASSISTANT 400]

Loading (MUST):
- Use Google Fonts with font-display: swap
- Add preconnect to fonts.googleapis.com and fonts.gstatic.com
- Load ONLY weights 400, 600, 800 (not all weights)
- Use subset=latin,hebrew if site is Hebrew

Type Scale (use CSS custom properties):
- --text-display: clamp(2.5rem, 5vw + 2rem, 6rem)
- --text-h1: clamp(2rem, 3vw + 1.5rem, 4rem)
- --text-h2: clamp(1.75rem, 2.5vw + 1rem, 3rem)
- --text-h3: clamp(1.375rem, 1.5vw + 0.75rem, 2rem)
- --text-h4: clamp(1.125rem, 1vw + 0.75rem, 1.5rem)
- --text-base: clamp(1rem, 0.3vw + 0.9rem, 1.125rem)
- --text-xs: clamp(0.75rem, 0.1vw + 0.7rem, 0.875rem)

Line-heights:
- Headings (H1-H2): 1.1
- Subheadings (H3-H4): 1.3
- Body paragraphs: 1.6
- Long-form content: 1.75

Letter-spacing:
- Display (72px+): -0.03em
- H1-H2 (32-56px): -0.02em
- H3-H4, body: 0
- UPPERCASE labels: +0.05em

DO NOT (anti-patterns):
- Do NOT use Inter alone for everything
- Do NOT load all font weights — only 400, 600, 800
- Do NOT use default line-height (1.5) for headings — use 1.1
- Do NOT use 3+ different fonts — maximum 2 (display + body)
- Do NOT forget font-display: swap

Hebrew/RTL specific (if Hebrew content):
- Set dir="rtl" and lang="he" on html element
- Hebrew body line-height: 1.6-1.75 (slightly more than English)
- Hebrew letter-spacing: 0 always (never negative — Hebrew is sensitive)
- Add unicode-bidi: plaintext on paragraphs with mixed content
- Font-family must list Hebrew font as fallback for English-first fonts

QUALITY GATE:
Before delivery, audit: (1) Is font-display: swap present? (2) Are only 2 fonts used? (3) Are only 2-3 weights loaded? (4) Do headings have line-height 1.1-1.2? (5) Does the body have line-height 1.5-1.7? (6) For Hebrew: is the Hebrew font listed in font-family stack?

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

לפני השימוש — החליפו את הערכים בסוגריים עם הבחירה שלכם. 4 השלבים:

1. Font pairing: בחרו 1 מ-5 הזיווגים מטבלת Font Pairing Framework (סעיף 4.3), או מ-5 הזיווגים העבריים-אנגליים (סעיף 4.10).
2. Scale ratio: אם אתם לא יודעים — השאירו את ערכי ה-clamp כמו שהם (Perfect Fourth ratio). אם אתם רוצים ממוזער — שנו ל-Minor Third.
3. Hebrew section: מחקו אם האתר לא בעברית. השאירו אם יש תוכן עברי.
4. Quality gate: תמיד להשאיר — זה מה שמאלץ את ה-AI לבדוק את עצמו.

איפה לשלב את הפרומפט הזה

קחו את ה-Anti-AI Starter Prompt מפרק 1, והחליפו את סעיף ה-"Fonts" שבו בפרומפט הטיפוגרפיה המלא מכאן. התוצאה: פרומפט שלם עם צבעים (פרק 3) + טיפוגרפיה (פרק 4) + anti-AI (פרק 1), שזה כבר 70% מה-design brief של אתר פרימיום.