פונטים לאתרים בעברית: איך בוחרים, ומה בודקים לפני

אותן מילים, ארבעה קולות

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

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

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

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

• עברית ואנגלית מאותה משפחה. באתר ישראלי תמיד יש מילים באנגלית: שם של מוצר, Instagram, כתובת מייל. כשללטינית אין עיצוב תואם, הדפדפן מביא פונט אחר, ושתי המילים באותה שורה נראות כמו שני אנשים שלא מכירים.
• ספרות וסימנים. כתבו שורה כמו ״פתוח מ־08:00 עד 22:00 · קפה ב־14₪ · 20% הנחה״ ובדקו שהשקל, האחוז והשעות יושבים טוב ליד האותיות.
• גרש וגרשיים. ג׳, צ׳, צה״ל. בפונט שלא תוכנן לזה הם נופלים לפונט אחר, או נראים כמו מירכאות באנגלית.
• טקסט קטן בטלפון. פונט שנראה מדהים בכותרת ענקית יכול להתפרק ב־16 פיקסלים. בדקו פסקה שלמה במסך של טלפון. מילה אחת גדולה לא מספרת כלום.
• משקלים. לטקסט רץ צריך לפחות רגיל ומודגש. לכותרות אפשר להסתפק במשקל אחד, אם הוא טוב.

פונט לכותרת, פונט לטקסט

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

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

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

למה אתרים שנבנו עם AI נראים אותו דבר

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

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

השתמש בפונט [שם הפונט לכותרות] לכותרות ובפונט [שם הפונט לטקסט] לכל שאר הטקסט.
ודא שלשני הפונטים יש אותיות עבריות, ושאף טקסט באתר לא נופל לפונט של המערכת.
טען רק את המשקלים שבשימוש, בפורמט WOFF2, עם font-display: swap.

פונטים חינמיים, ומתי שווה לשלם

ב־Google Fonts יש כמה פונטים עבריים טובים וחינמיים לאתר, ביניהם Heebo, Assistant, Rubik, IBM Plex Sans Hebrew ו־Frank Ruhl Libre למי שרוצה סריף. הם מצוינים לטקסט רץ, ובדיוק בגלל זה הם נמצאים בכל מקום.

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

גם ב־Taster בנינו פונטים עבריים משלנו. פנינה ומישור מבוססים על פונטים פתוחים, ברישיון OFLOFLרישיון פתוח לפונטים. מתיר להשתמש בפונט, גם באתר מסחרי, ולשנות אותו לפי הכללים שלו., והשאר עוצבו אצלנו מאפס. אפשר להקליד בכל אחד מהם ולראות אותו עם הטקסט שלכם:

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

פונט שנטען מהר

פונט יפה שנטען לאט הוא עדיין דף ריק בשתי השניות הראשונות. ארבעה דברים שעושים את ההבדל:

• WOFF2WOFF2פורמט דחוס של קובצי פונט לאתרים. נטען מהר, וכל הדפדפנים המודרניים תומכים בו. בלבד. זה הפורמט הדחוס של היום, וכל הדפדפנים המודרניים תומכים בו.
• רק המשקלים שבשימוש. כל משקל הוא עוד קובץ לטעון. פונט משתנהפונט משתנהקובץ פונט אחד שמחזיק את כל המשקלים, מדק ועד מודגש, במקום קובץ נפרד לכל משקל. מחזיק את כל המשקלים בקובץ אחד.
• font-display: swap. הטקסט מופיע מיד בפונט גיבוי ומתחלף כשהפונט מגיע. בלי זה, בחיבור איטי רואים דף ריק.
• טעינה מוקדמת לפונט של הכותרת, עם <link rel="preload">, כי הוא הדבר הראשון שרואים.

@font-face {
  font-family: "Shellda";
  src: url("/fonts/shellda.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

שאלות שעולות