אייקונים, פונטים ונכסים ויזואליים

למה הפרטים הקטנים עושים את ההבדל

בואו נדבר על משהו שרוב ה-Vibe Coders מדלגים עליו: הפרטים הוויזואליים.

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

חשבו על זה ככה: אתם נכנסים לחנות פיזית. השלט מעוצב יפה, אבל הפונט על התפריט שונה, הלוגו בפינה מטושטש, והתמונות על הקיר נראות כאילו הורידו אותן מגוגל ב-2015. מה הרושם? לא מקצועי. באתרים זה אותו דבר — רק שהמבקר מחליט תוך 3 שניות אם הוא נשאר או עוזב.

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

שלושה דברים שמבדילים אתר מקצועי מאתר חובבני:

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

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

עד סוף הפרק הזה, יהיו לכם 3 prompts מוכנים — לאייקונים, לפונטים ולתמונות — שאתם מעתיקים לכל פרויקט חדש. ברגע שה-AI מקבל את שלושת ההנחיות האלה, הוא עובד כמו מעצב מקצועי שיודע בדיוק מאיפה לקחת מה.

ספריות אייקונים — מאיפה מביאים אייקונים מקצועיים

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

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

Lucide Icons — ברירת המחדל לפרויקטי shadcn/ui

Lucide (קוראים לזה "לוסיד") היא ספריית אייקוני SVG (Scalable Vector Graphics — גרפיקה וקטורית שלא מאבדת איכות בהגדלה) חינמית עם 1,695+ אייקונים. היא ברירת המחדל של shadcn/ui שלמדנו בפרק 05, מה שאומר שאם אתם בונים פרויקט עם shadcn — Lucide כבר שם.

קצת היסטוריה: Lucide התחילה כ-fork (עותק משופר) של ספרייה ישנה בשם Feather Icons. כשהמתחזקים של Feather הפסיקו לעדכן, הקהילה יצרה את Lucide — שומרת על אותו סגנון נקי אבל עם הרבה יותר אייקונים ועדכונים קבועים.

למה Lucide פופולרית:

• עקביות מושלמת: כל האייקונים באותו עובי קו (stroke width), אותו גודל, אותן פינות — מרגישים כמו שפה ויזואלית אחת
• קלת משקל: כל אייקון הוא SVG קטן — בערך 1KB. Tree-shaking מובנה, כלומר רק האייקונים שאתם משתמשים בהם נכנסים ל-bundle
• התאמה קלה: אפשר לשנות גודל, צבע ועובי קו דרך props — בלי CSS מיוחד
• תמיכה ב-React: חבילת lucide-react עם ייבוא ישיר. יש גם lucide-vue ו-lucide-svelte
• חיפוש מצוין: האתר lucide.dev מאפשר חיפוש בכל שפה, כולל tags — חפשו "arrow" ותראו 30+ וריאציות

איך משתמשים (React):

import { Search, Menu, ArrowRight, Heart } from 'lucide-react';

// שימוש בסיסי
<Search size={20} strokeWidth={1.5} />

// עם צבע מותאם
<Heart size={24} color="#e11d48" fill="#e11d48" />

האתר: lucide.dev/icons — שם אפשר לחפש אייקונים, לראות preview, להתאים צבע וגודל, ולהעתיק קוד מוכן — JSX ל-React, SVG גולמי, או אפילו import statement.

טיפ חשוב: כש-AI יוצר קומפוננטות עם shadcn/ui, הוא כבר משתמש ב-Lucide אוטומטית. אבל אם לא תגידו לו את זה מפורשות, הוא עלול לעבור לספרייה אחרת באמצע — ואז יש לכם עמוד עם שני סגנונות שונים.

Heroicons — הבחירה של Tailwind

Heroicons היא ספריית האייקונים של Tailwind Labs — אותה חברה שעשתה את Tailwind CSS. אם הפרויקט שלכם מבוסס Tailwind (ורוב הפרויקטים עם AI כן), Heroicons מרגישים כמו חלק טבעי מהעיצוב.

ההבדל המרכזי מ-Lucide: Heroicons נראים קצת יותר "כבדים" ו"מלאים" — הקווים עבים יותר, והסגנון יותר geometric. Lucide נראה יותר דקיק ועדין. שניהם מקצועיים — זה עניין של טעם ושל מה מתאים לפרויקט.

4 סגנונות (זה ייחודי ל-Heroicons):

איך משתמשים (React):

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { HeartIcon } from '@heroicons/react/24/solid';

<MagnifyingGlassIcon className="h-5 w-5" />
<HeartIcon className="h-6 w-6 text-red-500" />

האתר: heroicons.com — חיפוש מהיר, העתקת SVG או JSX. שימו לב שאפשר להעתיק כ-JSX ישירות — מאוד נוח.

דוגמה מעשית: נניח שאתם בונים navbar עם Tailwind. הנה איך נראה שימוש ב-Heroicons:

import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';

function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="flex items-center justify-between p-4">
      <Logo />
      <button onClick={() => setOpen(!open)}>
        {open ? <XMarkIcon className="h-6 w-6" />
               : <Bars3Icon className="h-6 w-6" />}
      </button>
    </nav>
  );
}

Phosphor Icons — המגוון הגדול

Phosphor Icons היא הספרייה הכי עשירה — 9,000+ אייקונים ב-6 משקלים שונים (thin, light, regular, bold, fill, duotone). אם חסר לכם אייקון ספציפי בספרייה אחרת, סיכוי טוב ש-Phosphor יש אותו.

היתרון הגדול: הסגנון duotone — שני צבעים באותו אייקון. למשל, אייקון של תיקייה עם גוף בצבע אחד ותוכן בצבע שני. זה נותן מראה ייחודי ומודרני שספריות אחרות לא מציעות. הסגנון הזה פופולרי מאוד בדשבורדים ובאפליקציות SaaS.

6 המשקלים: thin (דקיק מאוד), light (דקיק), regular (רגיל), bold (בולט), fill (מלא), duotone (שני צבעים). כל אייקון זמין בכל 6 המשקלים — מה שנותן גמישות מדהימה.

איך משתמשים (React):

import { MagnifyingGlass, Heart } from '@phosphor-icons/react';

<MagnifyingGlass size={24} weight="regular" />
<Heart size={24} weight="duotone" color="#a855f7" />

האתר: phosphoricons.com

נגישות באייקונים — דבר שרוב האנשים שוכחים

אייקון בלי טקסט הוא בלתי נגיש למשתמשים עם קוראי מסך (screen readers). שני כללים:

• אייקון דקורטיבי (ליד טקסט שמסביר מה זה, כמו "חיפוש 🔍"): הוסיפו aria-hidden="true" — קורא המסך יתעלם מהאייקון ויקרא את הטקסט
• אייקון שהוא הכפתור (אייקון חיפוש בלי טקסט): הוסיפו aria-label="חיפוש" על הכפתור — קורא המסך ידע מה הכפתור עושה

<!-- אייקון ליד טקסט — דקורטיבי -->
<button><Search aria-hidden="true" /> חיפוש</button>

<!-- אייקון בלבד — צריך aria-label -->
<button aria-label="חיפוש"><Search /></button>

נגישות היא לא רק "דבר נחמד" — בישראל, חוק שוויון זכויות לאנשים עם מוגבלות (תקנות נגישות שירותי אינטרנט, 2013) מחייב אתרים מסחריים ואתרים ציבוריים לעמוד בתקני נגישות WCAG 2.0 AA. אייקונים ללא aria-label הם הפרה שעלולה לחשוף אתכם לתביעות נגישות.

עוד ספריות שכדאי להכיר — Simple Icons, Tabler ו-React Icons

שלוש הספריות שראינו (Lucide, Heroicons, Phosphor) מכסות את רוב הצרכים. אבל יש מקרים מיוחדים:

Simple Icons — לוגואים של שירותים ומותגים

צריכים לוגו של GitHub? WhatsApp? Instagram? Simple Icons מכילה 3,000+ לוגואים של מותגים וחברות טכנולוגיה — כולם SVG אחיד בצבע אחד. זה הכלי לשורת "Connect with us" או לסקשן של "Built with".

שימושים נפוצים:

• Footer social links: אייקוני Facebook, Instagram, LinkedIn, WhatsApp בסגנון אחיד
• "Built with" sections: לוגואים של React, Next.js, Vercel, Tailwind CSS
• "Integrations" page: לוגואים של שירותים שהמוצר שלכם מתחבר אליהם

שימו לב: Simple Icons הם לוגואים — לא אייקוני ממשק. אל תערבבו אותם עם Lucide/Heroicons. השתמשו ב-Simple Icons רק כשצריכים לוגו של מותג ספציפי.

האתר: simpleicons.org — חפשו לפי שם המותג, העתיקו SVG, ואפילו תקבלו את הצבע הרשמי של המותג (hex code).

Tabler Icons — 5,200+ אייקונים בסגנון נקי

Tabler Icons היא ספרייה מצוינת עם 5,200+ אייקונים בעובי קו אחיד. היא פחות פופולרית מ-Lucide ו-Heroicons, אבל המגוון שלה גדול — ולפעמים דווקא שם תמצאו את האייקון המושלם שלא קיים בספריות האחרות.

האתר: tabler.io/icons

React Icons — מטא-ספרייה שמאגדת הכל

React Icons (react-icons) היא לא ספרייה של אייקונים — היא מאגד (meta-library) של ספריות. חבילה אחת שנותנת גישה ל-Lucide, Heroicons, Font Awesome, Bootstrap Icons ועוד 20+ ספריות. נשמע מושלם, אבל יש חיסרון משמעותי: קל מדי לערבב סגנונות בלי לשים לב.

הבעיה בפועל: AI אוהב את React Icons כי זה "הכל במקום אחד". אבל מה שקורה בפועל: בקומפוננטה אחת הוא ישתמש ב-FaSearch (Font Awesome), בשנייה ב-HiOutlineSearch (Heroicons), ובשלישית ב-LuSearch (Lucide). שלושה אייקוני חיפוש שונים באותו אתר. לא נראה טוב.

מתי להשתמש: כשצריכים אייקון בודד מספרייה ספציפית שלא מותקנת בפרויקט — ולא שווה להתקין ספרייה שלמה בשביל אייקון אחד. לא כספרייה ראשית.

אם בכל זאת משתמשים: הגבילו את עצמכם לתת-ספרייה אחת בתוך React Icons. למשל: "השתמש רק ב-react-icons/lu (Lucide)" — ככה מקבלים את הנוחות של React Icons עם עקביות.

איך לבקש מ-AI אייקונים — הדרך הנכונה

הנה מה שקורה כשלא מגידים ל-AI איזו ספריית אייקונים להשתמש: הוא מנחש. וניחושים שונים בחלקים שונים של הפרויקט. בקומפוננטה אחת הוא ישתמש ב-Font Awesome (ספרייה ישנה שהייתה פופולרית לפני כמה שנים), בשנייה ב-Heroicons, בשלישית ייצור SVG מאפס שנראה כמו צייר אותו ילד בן 5. התוצאה: ממשק לא אחיד שנראה חובבני.

הבעיה מחריפה כשעובדים עם AI לאורך זמן — כל שיחה חדשה "שוכחת" את הבחירות של השיחה הקודמת. בלי הנחיה ברורה, כל session עם AI עלול להביא ספרייה אחרת.

הפתרון פשוט — הגדירו בתחילת השיחה עם ה-AI, כל פעם מחדש:

בכל הפרויקט, השתמש ב-Lucide icons בלבד.
ייבוא: import { IconName } from 'lucide-react'
גודל ברירת מחדל: 20px
strokeWidth: 1.5
אל תשתמש בספריות אייקונים אחרות.
אם חסר אייקון ב-Lucide, ספר לי ואציע חלופה.

שימו לב כמה דברים ה-prompt הזה מגדיר:

1. ספרייה אחת בלבד — Lucide (לא מנחש, לא מערבב)
2. דרך הייבוא — ה-AI יודע בדיוק איך לכתוב את ה-import statement
3. גודל ועובי קו אחידים — עקביות בכל הפרויקט, בכל קומפוננטה
4. חוק לחריגות — אם חסר אייקון, ה-AI שואל במקום לאלתר ולייצר SVG מכוער

למה זה עובד כל כך טוב: AI טוב בלעקוב אחרי הוראות ברורות. כשנותנים לו "rules" בתחילת השיחה, הוא מחזיק בהם לאורך כל הפרויקט. בלי rules — כל החלטה נקודתית, וכל החלטה נקודתית עלולה להיות שונה.

טיפ מתקדם: אם אתם עובדים עם Cursor, V0, או Bolt — שמרו את ה-prompt הזה כחלק מ-"system prompt" או "project rules". ככה הוא נטען אוטומטית בכל שיחה ולא צריך להעתיק בכל פעם. ב-Cursor, למשל, אפשר להוסיף את ההנחיות לקובץ .cursorrules בשורש הפרויקט — וכל שאלה שתשאלו ל-AI תכלול את ההנחיות האלה כרקע.

SVG Diagram: מפת ספריות האייקונים

הנה סיכום ויזואלי של כל ספריות האייקונים שלמדנו — מתי כל אחת מתאימה:

Google Fonts — איך בוחרים וטוענים פונטים

Google Fonts הוא שירות פונטים חינמי ופתוח של Google — מעל 1,500 משפחות פונט, כולל עשרות שתומכות בעברית. זה המקור מספר 1 לפונטים באינטרנט, ומשמש מיליוני אתרים ברחבי העולם.

למה לא להישאר עם ברירת המחדל? כש-AI בונה אתר, הוא משתמש בפונט ברירת המחדל של הדפדפן (בדרך כלל Arial או Times New Roman). הבעיה: Arial נראה סביר באנגלית, אבל בעברית הוא נראה... בסדר. לא יותר מזה. הפרופורציות לא אופטימליות, המרווחים בין אותיות לא מושלמים, והתוצאה מרגישה "גנרית". פונט כמו Heebo תוכנן במיוחד לעברית, ומייד מרגיש אחרת — מקצועי, נקי, ונעים לקריאה.

איך מוצאים פונטים בעברית

1. גלשו ל-fonts.google.com
2. בצד שמאל (הפילטרים), חפשו Language → בחרו Hebrew
3. תראו את כל הפונטים שתומכים בעברית — בערך 20-25 משפחות
4. הקלידו משפט בעברית בשורת ה-preview כדי לראות איך כל פונט נראה

Font Stack — מה זה ולמה צריך

Font Stack (רשימת פונטים) היא רשימה מסודרת של פונטים ב-CSS. הדפדפן מנסה את הראשון — ואם הוא לא זמין, עובר לבא בתור:

font-family: 'Heebo', 'Arial', sans-serif;

הדפדפן ינסה קודם Heebo (פונט מ-Google Fonts). אם הוא עדיין לא נטען — ישתמש ב-Arial (מותקן על כל מחשב). אם גם הוא לא קיים — יבחר את ברירת המחדל של sans-serif.

למה זה חשוב: בלי font stack תקין, אם Google Fonts נכשל בטעינה (אינטרנט איטי, חסימה, או שהמשתמש במדינה שחוסמת Google) — הטקסט יוצג בפונט ברירת מחדל של הדפדפן. על Windows זה יהיה Arial, על Mac זה יהיה Helvetica, ועל לינוקס זה עלול להיות משהו שנראה נורא בעברית.

Font stack מומלץ לפרויקט עברי:

/* Font stack מלא לעברית */
font-family: 'Heebo', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;

/* הסבר:
   1. Heebo — הפונט הראשי (Google Fonts)
   2. Segoe UI — fallback טוב ב-Windows
   3. Arial Hebrew — fallback טוב ב-Mac
   4. Arial — fallback אוניברסלי
   5. sans-serif — ברירת מחדל אחרונה
*/

איך מוסיפים פונט מ-Google Fonts

שתי דרכים:

דרך 1: HTML link (פשוט):

<!-- ב-head של ה-HTML -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap" rel="stylesheet">

דרך 2: next/font (מומלצת ל-Next.js):

import { Heebo } from 'next/font/google';

const heebo = Heebo({
  subsets: ['hebrew', 'latin'],
  display: 'swap',
  weight: ['300', '400', '500', '600', '700'],
});

// בקומפוננט
<body className={heebo.className}>

למה next/font עדיפה: היא מורידה את הפונט בזמן build ומאחסנת אותו מקומית — אין בקשת רשת ל-Google בזמן אמת. זה אומר:

• מהיר יותר: הפונט כבר מקומי, לא צריך לטעון מ-Google
• פרטי יותר: אין tracking של Google (לא שולחים מידע על מבקרים)
• אמין יותר: אם Google Fonts לא זמין (חסימה, תקלה) — הפונט עדיין עובד
• 0 layout shift: הפונט נטען עם ה-CSS, לא אחרי — אין "קפיצה" של טקסט

טיפ ישראלי: חלק מהארגונים בישראל (במיוחד גופים ממשלתיים) חוסמים Google Fonts מסיבות פרטיות. אם אתם בונים אתר לארגון כזה — next/font פותר את הבעיה כי הפונט מאוחסן מקומית.

Variable Fonts — פונט אחד שעושה הכל

בעולם הישן, כל משקל (weight) של פונט היה קובץ נפרד. רצית Regular? קובץ. Bold? עוד קובץ. Light? עוד קובץ. 5 משקלים = 5 בקשות רשת.

Variable Font (פונט משתנה) פותר את זה: קובץ אחד שמכיל את כל המשקלים. במקום weight 400 או 700 בלבד, אפשר לבחור כל ערך — 350, 550, 850 — הכל מאותו קובץ.

היתרונות:

• פחות בקשות רשת: קובץ אחד במקום 5-7
• גודל קובץ קטן יותר: קובץ variable אחד קטן יותר מ-5 קבצים נפרדים
• גמישות: אפשר weight מדויק (לא רק 400/700)
• אנימציות חלקות: אפשר לעשות transition חלק בין משקלים

דוגמה ב-CSS:

/* פונט variable — אפשר לבחור כל weight */
h1 { font-weight: 800; }
h2 { font-weight: 650; }   /* לא קיים בפונט רגיל! */
p  { font-weight: 400; }
.light { font-weight: 300; }
.caption { font-weight: 350; }  /* ערך מדויק */

החדשות הטובות: כל הפונטים העבריים המרכזיים ב-Google Fonts כבר תומכים ב-variable fonts — Heebo, Assistant, Rubik וגם Secular One.

איך לדעת אם פונט הוא variable: ב-Google Fonts, לחצו על הפונט. אם יש slider של weight שזז בצורה חלקה (ולא קופץ בין 400, 500, 700) — זה variable font. באתר תראו גם את הטווח: wght: 100..900.

בקוד: כשמגדירים variable font, במקום לציין משקלים ספציפיים אפשר לתת טווח:

/* variable font — טווח שלם */
@font-face {
  font-family: 'Heebo';
  font-weight: 100 900;  /* כל המשקלים! */
  src: url('/fonts/Heebo-Variable.woff2') format('woff2');
  font-display: swap;
}

למה זה משנה בפועל: בפרויקט טיפוסי אתם צריכים לפחות 3 משקלים (light, regular, bold). עם פונטים רגילים = 3 קבצים = 3 בקשות HTTP = ~150KB. עם variable font = קובץ 1 = בקשה 1 = ~80KB. חצי מהגודל, שליש מהבקשות.

פונטים לעברית — Heebo, Assistant, Rubik ו-Secular One

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

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

הפתרון: להיצמד לפונטים שתוכננו מהיסוד עם עברית בראש. הנה הארבעה שכדאי לדעת — וכל השאר לא רלוונטיים לרוב הפרויקטים:

הנה 4 הפונטים העבריים שכדאי להכיר — ממש רק את האלה:

עוד פונטים עבריים שקיימים אבל פחות מומלצים:

• Noto Sans Hebrew — פונט של Google שנועד לכסות כל השפות. נראה בסדר בעברית, אבל לא תוכנן ספציפית לעברית — הפרופורציות הן קומפרומיס. Heebo ו-Rubik עדיפים.
• Open Sans Hebrew — גרסה עברית של Open Sans. היה פופולרי בשנים 2015-2020, אבל ב-2026 Heebo ו-Assistant עדיפים — יותר מודרניים, יותר קריאים, ותמיכה ב-variable fonts.
• Alef — פונט עברי נחמד עם אופי ייחודי. מתאים לפרויקטים אמנותיים או לאתרים עם אופי מיוחד, אבל חסר לו מגוון משקלים — יש רק Regular ו-Bold.
• Frank Ruhl Libre — פונט serif (עם סריפים) לעברית. מתאים לכותרות עם אופי "קלאסי" או לאתרי תוכן שרוצים להרגיש יותר "עיתוני".

טיפ ישראלי: אם תפתחו את DevTools (F12 → Computed → font-family) על אתרים ישראליים גדולים, תגלו שרוב האתרים הגדולים (Wix, Monday, Fiverr) משתמשים ב-Rubik או בפונטים מותאמים אישית שמבוססים על Rubik. סטארט-אפים קטנים יותר בדרך כלל הולכים על Heebo. אלה שתי הבחירות הבטוחות.

Line-height לעברית — הפרט שמשנה הכל

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

הטעות הנפוצה: AI שמקבל הנחיה "build a Hebrew website" ישתמש ב-line-height רגיל (1.5) — שנראה בסדר באנגלית אבל צפוף בעברית. תמיד ציינו ב-prompt: "line-height: 1.7 for body text, 1.3 for headings — optimized for Hebrew."

Font Pairing — כללי שילוב פונטים

Font Pairing (שילוב פונטים) זה האמנות של לבחור שני פונטים שעובדים טוב יחד — אחד לכותרות ואחד לטקסט. שילוב טוב יוצר היררכיה ברורה. שילוב רע יוצר בלגן.

3 כללים לשילוב מוצלח

1. ניגוד, לא סתירה: הפונטים צריכים להיות שונים מספיק כדי ליצור היררכיה, אבל לא כל כך שונים שזה נראה כמו שני אתרים שונים
2. מקסימום 2 משפחות: כותרות + body. כל פונט נוסף מאט את האתר ומסבך את העיצוב
3. בדקו בעברית: שילוב שנראה טוב באנגלית לא בהכרח עובד בעברית — הפרופורציות שונות

5 שילובים מנצחים לעברית

שימו לב לשורה האחרונה: Heebo בלבד, במשקלים שונים. אם אתם לא בטוחים — זו הבחירה הכי בטוחה. פונט אחד (variable!) עם משקלים שונים לכותרות ולטקסט. פשוט, מהיר, ולא יכול להשתבש.

איך לבדוק שילוב לפני שמחליטים

לפני שמתחייבים לשילוב, בדקו אותו עם טקסט אמיתי:

1. כותרת + טקסט: כתבו משפט כותרת בעברית (16-24 מילים) ופסקת טקסט (50-60 מילים). הדביקו ב-Google Fonts preview ובדקו שהשילוב עובד
2. עברית + אנגלית ביחד: בדקו שגם טקסט עם מילים באנגלית (שמות טכנולוגיות, מונחים) נראה טוב — זה מצב נפוץ מאוד בתוכן טכנולוגי ישראלי
3. גדלים שונים: האם הכותרת בולטת מספיק? האם הטקסט קריא ב-16px?
4. נייד: על מסך קטן, כותרות גדולות עלולות לגלוש — בדקו שהגודל מתאים גם ב-mobile

כלי עזר: אתר fontjoy.com עוזר לגלות שילובי פונטים חדשים באמצעות AI — אבל הוא לא תמיד מביא בחשבון עברית. לכן הטבלה למעלה היא המומלצת שלנו.

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

SVG Diagram: מערכת טיפוגרפיה מלאה

ככה נראית מערכת טיפוגרפיה מקצועית — מהפונט ועד ה-CSS:

טעינת פונטים ואופטימיזציה — font-display ו-Next.js

פונטים יכולים להאט אתר משמעותית אם לא טוענים אותם נכון. הנה מה שצריך לדעת:

font-display: swap — למה זה קריטי

font-display: swap אומר לדפדפן: "תציג מיד טקסט בפונט חלופי (Arial), ותחליף כשהפונט האמיתי נטען." בלי זה, הטקסט עלול להיות בלתי נראה (FOIT — Flash of Invisible Text) עד שהפונט נטען. המשתמש רואה דף ריק למשך 1-3 שניות.

/* תמיד הוסיפו display=swap ב-Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300..900&display=swap');

preconnect — זירוז הטעינה

תגיות preconnect אומרות לדפדפן: "תתחיל להתחבר לשרת של Google Fonts עוד לפני שאתה צריך את הפונט." זה חוסך 100-300ms:

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

next/font — הפתרון המושלם ל-Next.js

אם הפרויקט שלכם Next.js (וב-2026, רוב הפרויקטים עם AI כן), next/font הוא הדרך הטובה ביותר:

// app/layout.tsx
import { Heebo, Rubik } from 'next/font/google';

const heebo = Heebo({
  subsets: ['hebrew', 'latin'],
  display: 'swap',
  variable: '--font-heebo',
});

const rubik = Rubik({
  subsets: ['hebrew', 'latin'],
  display: 'swap',
  variable: '--font-rubik',
});

export default function RootLayout({ children }) {
  return (
    <html lang="he" dir="rtl"
          className={`${heebo.variable} ${rubik.variable}`}>
      <body>{children}</body>
    </html>
  );
}

ואז ב-tailwind.config.ts:

theme: {
  fontFamily: {
    sans: ['var(--font-heebo)', 'Arial', 'sans-serif'],
    heading: ['var(--font-rubik)', 'Arial', 'sans-serif'],
  },
}

WOFF2 — הפורמט המומלץ לפונטים

כמו שיש JPEG ו-WebP לתמונות, יש פורמטים שונים לפונטים. WOFF2 (Web Open Font Format 2) הוא הפורמט המודרני שכל אתר צריך להשתמש בו:

• קטן ב-30% מ-WOFF רגיל וב-50% מ-TTF
• נתמך ב-97%+ מהדפדפנים
• דחיסה מובנית — לא צריך gzip נוסף

כשמשתמשים ב-Google Fonts או next/font, אתם מקבלים WOFF2 אוטומטית — לא צריך לעשות כלום. אבל אם אתם מעלים פונט מותאם אישית (self-hosted), ודאו שהוא בפורמט WOFF2.

טיפ: כשאתם כותבים prompt ל-AI עבור הגדרת פונטים, כללו את כל ההגדרות במקום אחד:

הגדר טיפוגרפיה לפרויקט Next.js + Tailwind:
- Heading font: Rubik (variable, Hebrew + Latin)
- Body font: Heebo (variable, Hebrew + Latin)
- השתמש ב-next/font/google עם CSS variables
- הגדר ב-tailwind.config: font-sans = Heebo, font-heading = Rubik
- font-display: swap
- Type scale: H1=36px/800, H2=28px/700, H3=22px/600, body=16px/400, small=14px/300
- RTL support: dir="rtl" lang="he"

תמונות חינמיות — Unsplash, Pexels ו-Pixabay

אתרים בלי תמונות מרגישים ריקים. תמונה טובה בראש הדף (hero section) יכולה לעשות את ההבדל בין "עוד אתר" ל-"וואו, זה נראה מקצועי". אבל תמונות מקצועיות עולות כסף — חבילת 10 תמונות ב-Shutterstock עולה $29-49, ובגטפי או shutterstock ישראל אפילו יותר.

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

Unsplash — התמונות הכי יפות

Unsplash (unsplash.com) הוא המקור מספר 1 לתמונות stock חינמיות באיכות גבוהה. צלמים מעלים תמונות ברישיון חופשי — אפשר להשתמש לכל מטרה, כולל מסחרית, בלי attribution (אבל נחמד לתת קרדיט).

יתרונות:

• איכות תמונות מדהימה — צלמים מקצועיים
• חיפוש טוב (גם באנגלית, מומלץ לחפש באנגלית)
• API חינמי (עד 50 בקשות לשעה)
• שילוב עם כלי עיצוב (Figma, Canva)

Pexels — האלטרנטיבה הטובה עם וידאו

Pexels (pexels.com) דומה ל-Unsplash — תמונות חינמיות ברישיון פתוח. אבל יש לו יתרון משמעותי: Pexels כוללת גם סרטוני וידאו חינמיים, מה שמצוין ל-hero sections עם רקע וידאו ולדפי נחיתה. הווידאו שם באיכות גבוהה ואפשר להוריד בכמה רזולוציות.

טיפ: Pexels מציע גם Pexels API חינמי — אם אתם בונים אתר שצריך להציג תמונות דינמיות (כמו placeholder images), ה-API מאוד נוח.

Pixabay — המגוון הרחב

Pixabay (pixabay.com) כוללת תמונות, וקטורים, איורים, וידאו ואפילו מוזיקה — הכל חינמי. הכמות הכי גדולה מבין השלושה, אבל האיכות הממוצעת נמוכה יותר מ-Unsplash ו-Pexels. חלק מהתמונות נראות מאוד "stock" (חיוכים מאולצים, תמונות סטודיו נטולות אופי).

טיפ: השתמשו בסינון "Photo" + "Editors Choice" לתוצאות טובות יותר. גם כדאי לסנן לפי "Orientation" (אנכי/אופקי) כדי למצוא תמונות שמתאימות למקום ספציפי בעמוד.

השוואה מהירה

3 דברים לשים לב אליהם בתמונות stock

טיפ לפרויקטים ישראליים: חפשו מילות מפתח ספציפיות — "Tel Aviv skyline", "Israeli food", "Mediterranean beach", "Middle Eastern office". יש הרבה תוכן מקומי ב-Unsplash ו-Pexels. גם "coworking space" נותן תמונות מצוינות למשרדים ישראליים (הרבה תמונות מ-WeWork שנראות כמו שמשרדים ישראליים באמת נראים).

אזהרה חשובה — AI Generated Images: כלי AI כמו Midjourney ו-DALL-E יוצרים תמונות מרשימות, אבל יש בעיות:

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

המלצה: לתמונות של אנשים — תעדיפו stock photos אמיתיים. לאיורים מופשטים, רקעים, ו-textures — AI generated עובד מצוין.

איורים — unDraw, Humaaans, Open Peeps ו-Storyset

איורים (illustrations) נותנים לאתר אופי שתמונות stock לא יכולות. הם מוסיפים חמימות, אחידות, ומאפשרים להמחיש מושגים מופשטים (כמו "שיתוף פעולה" או "cloud computing") בלי תמונות מבוימות של אנשים יושבים סביב שולחן עם חיוכים מזויפים.

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

unDraw — איורים בצבע מותאם אישית

unDraw (undraw.co/illustrations) הוא מוקשה של זהב: מאות איורים חינמיים בסגנון אחיד, ואפשר לשנות את הצבע הראשי לפני ההורדה. רוצים שכל האיורים יהיו בסגול (#a855f7) של הפרויקט? פשוט שנו את הצבע ב-UI.

למה זה קריטי: איורים שמתאימים לצבע המותג שלכם = אחידות ויזואלית. במקום 5 איורים בסגנונות שונים — כולם באותו look.

Storyset — איורים אנימטיביים

Storyset (storyset.com) — של Freepik — מציע איורים שאפשר לעשות להם אנימציה ישירות מהאתר. יש 3 סגנונות עיקריים:

• Cuate: סגנון ריאליסטי עם צללים — מתאים לאתרים עסקיים
• Bro: סגנון שטוח (flat) וצבעוני — מתאים לסטארט-אפים
• Amico: סגנון עדין ונקי — מתאים לאתרי תוכן ובלוגים

אפשר לשנות צבעים, לבחור אלמנטים, להסתיר חלקים מהאיור, ואפילו לייצא אנימציות כ-CSS, GIF, או Lottie. הכל חינמי עם attribution (צריך לתת קרדיט ל-Storyset).

Humaaans ו-Open Peeps — דמויות אנושיות

צריכים דמויות אנושיות שלא נראות "stock"? יש שתי ספריות מצוינות:

Humaaans (humaaans.com) מאפשר להרכיב דמויות ממודולים — ראש, גוף, רגליים, צבע עור, תנוחה. אפשר ליצור עשרות שילובים ייחודיים. מצוין ל-"About us" sections ו-team pages כשאין תמונות אמיתיות של הצוות.

Open Peeps (openpeeps.com) מציע דמויות בסגנון hand-drawn סקיצתי — נראה חם, אישי, ולא "קורפורטיבי". מצוין לאתרים של יזמים עצמאיים ופרילנסרים. שניהם חינמיים לגמרי.

מתי להשתמש בתמונות ומתי באיורים?

אופטימיזציית תמונות — next/image, WebP ו-lazy loading

תמונה שנטענת מהטלפון שוקלת 3-8MB. על מסך המחשב היא תיראה מצוין — אבל זמן הטעינה? אסון. גוגל מודד Core Web Vitals (מדדי ביצועים) ומוריד דירוג חיפוש לאתרים עם תמונות כבדות. במיוחד מדד LCP (Largest Contentful Paint) — שמודד כמה זמן לוקח לאלמנט הגדול ביותר (בדרך כלל תמונה) להופיע על המסך.

הסטטיסטיקה שכדאי לזכור: תמונות מהוות בממוצע 50-75% מגודל הדף. אם הדף שוקל 3MB, סביר שלפחות 2MB מזה הם תמונות. אופטימיזציית תמונות היא הדרך הכי קלה להאיץ אתר — בלי לגעת בקוד.

בואו נתקן את זה:

WebP ו-AVIF — הפורמטים המודרניים

כלל אצבע: צילומים → WebP. אייקונים ואיורים → SVG. לוגואים עם שקיפות → PNG (או SVG עדיף).

מתי AVIF ומתי WebP? AVIF חדש יותר וקטן יותר, אבל לוקח יותר זמן להמיר ולא כל הדפדפנים תומכים עדיין (92% נכון ל-2026). ב-2026 ההמלצה: השתמשו ב-WebP כברירת מחדל. next/image כבר יודע לשלוח AVIF לדפדפנים שתומכים ו-WebP לשאר — אוטומטית.

Lazy Loading — טעינה רק כשצריך

Lazy Loading (טעינה עצלה) אומר: "אל תטען את כל התמונות כשהדף נפתח — טען רק את מה שנראה על המסך. כשהמשתמש גולל למטה — טען את התמונות הבאות." זה חוסך bandwidth ומזרז את הטעינה הראשונית.

ב-HTML רגיל:

<img src="photo.webp" alt="תיאור" loading="lazy" />

חשוב: לא לעשות lazy loading לתמונות שנראות מיד (above the fold) — כמו Hero image ולוגו. רק לתמונות שמתחת לקפל — כלומר, תמונות שהמשתמש צריך לגלול כדי לראות אותן. ב-next/image, lazy loading הוא ברירת המחדל — מה שאומר שצריך לציין priority רק לתמונות שמעל הקפל.

next/image — אופטימיזציה אוטומטית

next/image היא קומפוננטת התמונות של Next.js שעושה הכל אוטומטית:

• אופטימיזציה אוטומטית: ממיר ל-WebP/AVIF
• Lazy loading: מובנה כברירת מחדל
• Responsive: מייצר גדלים שונים לגדלי מסך שונים
• Placeholder blur: מציג blur עד שהתמונה נטענת

import Image from 'next/image';

<Image
  src="/images/hero.jpg"
  alt="תיאור התמונה בעברית"
  width={1200}
  height={600}
  priority  // לתמונות above the fold
  placeholder="blur"
  blurDataURL="data:image/..."
/>

<Image
  src="/images/feature.jpg"
  alt="תיאור"
  width={600}
  height={400}
  // lazy loading כברירת מחדל
/>

priority: תמיד הוסיפו את priority לתמונת ה-Hero (התמונה הראשונה שנראית). זה אומר ל-Next.js: "תטען את התמונה הזו מיד, בלי lazy loading."

Squoosh — כלי אופטימיזציה ידני

כש-next/image לא זמין (למשל בפרויקט HTML סטטי), השתמשו ב-Squoosh (squoosh.app) — כלי חינמי של Google שרץ ישירות בדפדפן. גוררים תמונה פנימה, בוחרים פורמט (WebP/AVIF), מכוונים את האיכות, ורואים את ההבדל בגודל בזמן אמת. תמונה של 4MB יכולה להפוך ל-200KB בלי הבדל נראה לעין.

Responsive Images — תמונות שמתאימות לכל מסך

מסך של טלפון הוא 375px רוחב. מסך מחשב הוא 1920px. אין סיבה לטעון תמונה ברוחב 1920px על טלפון — זה בזבוז bandwidth. Responsive images (תמונות רספונסיביות) שולחות גודל שונה לכל מכשיר:

<!-- HTML רגיל: תמונה רספונסיבית -->
<img
  srcset="photo-640.webp 640w,
          photo-1024.webp 1024w,
          photo-1920.webp 1920w"
  sizes="(max-width: 768px) 100vw, 50vw"
  src="photo-1024.webp"
  alt="תיאור"
  loading="lazy"
/>

שימו לב: next/image עושה את זה אוטומטית — לא צריך לכתוב srcset ידנית. זו עוד סיבה למה next/image כל כך שווה.

סיכום: Prompt מומלץ לתמונות

כמו שכתבנו prompt לאייקונים ופונטים, הנה prompt לתמונות:

כללים לתמונות בפרויקט:
1. השתמש ב-next/image לכל התמונות (לא img רגיל)
2. תמונות hero: הוסף priority, אל תעשה lazy loading
3. כל שאר התמונות: lazy loading (ברירת מחדל)
4. פורמט מועדף: WebP
5. הוסף alt text בעברית לכל תמונה
6. placeholder="blur" לחוויית טעינה חלקה
7. הגדר width ו-height תמיד (מונע layout shift)
8. תמונות מ-Unsplash: השתמש ב-URL עם ?w=1200&q=80 לגודל מותאם

עם שלושת ה-prompts (אייקונים, פונטים, תמונות) — יש לכם מערכת שלמה. AI שמקבל את שלושת ההנחיות האלה בתחילת כל שיחה ייצר תוצאות עקביות ומקצועיות. חשבו על זה כמו "brief לעיצוב" — אבל במקום לשלוח למעצב, אתם שולחים ל-AI. המעצב הכי טוב בעולם לא ייצר תוצאה טובה בלי brief — ו-AI לא שונה.

SVG Diagram: זרימת אופטימיזציית תמונות

הנה התהליך המלא — מתמונת מקור ועד הצגה על המסך: