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

איך בוחרים פונטים בעברית לאתר?

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

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

מה הופך גופן עברי לקריא ונגיש במסך?

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

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

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

קריאות היא גם שאלה של נגישות. תקן הנגישות הישראלי לאתרים נשען על הנחיות WCAG 2.0 ברמה AA, שדורשות בין היתר יחס ניגודיות של לפחות 4.5:1 לטקסט רגיל, אפשרות להגדיל את הטקסט עד 200 אחוז בלי לאבד תוכן, ושימוש בטקסט אמיתי במקום תמונות של טקסט. גופן דק באפור בהיר נכשל כאן מהר, וכך גם כותרת שעוצבה כתמונה. על העבודה עצמה כתבנו בעמוד הנגשת אתרים, ועל הקשר בין קריאות לחוויה כולה במדריך מה זה UX.

אילו גופנים בעברית יש ב-Google Fonts?

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

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

גופן משתנה או משקלים נפרדים: מה עדיף?

גופן משתנה, Variable Font, הוא קובץ אחד שמכיל טווח רציף של משקלים, ולפעמים גם צירים נוספים כמו רוחב. לפי web.dev, קובץ משתנה אחד יכול להחליף כמה קבצים נפרדים, אבל הוא בדרך כלל כבד יותר מקובץ סטטי בודד, והתועלת הגדולה שלו היא באתרים שמשתמשים בהרבה משקלים וסגנונות. כשמבקשים מ-Google Fonts את Heebo בשני משקלים, למשל, השרת מחזיר את אותו קובץ עברי לשניהם, כי הקובץ מכסה את כל הטווח.

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

איך משלבים גופן עברי עם גופן לטיני?

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

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

מה צריך לדעת על רישיון של גופן לאתר?

גופן הוא תוכנה, והשימוש בו כפוף לרישיון. לפי מאגר הקוד של Google Fonts, רוב הגופנים בקטלוג מופצים ברישיון SIL Open Font License בגרסה 1.1, וחלקם ברישיון Apache 2.0. רישיון ה-OFL מתיר להשתמש בגופן, להטמיע אותו, לשנות אותו ולהפיץ אותו, ואוסר למכור את קובץ הגופן לבדו. הוא גם קובע במפורש שמסמכים שנוצרו בעזרת הגופן לא כפופים לרישיון. בפועל, אפשר להשתמש בגופנים האלה באתר עסקי, וגם להוריד אותם ולארח אותם בשרת של האתר.

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

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

לטעון מ-Google Fonts או לארח את הגופן בשרת של האתר?

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

בצד הביצועים, ההבדל פחות חד ממה שנהוג לחשוב. הטענה הישנה הייתה שגופן משרת משותף כבר שמור בדפדפן מביקור באתר אחר, אבל לפי בלוג המפתחים של Chrome, החל מגרסה 86 של הדפדפן המטמון מופרד לפי אתר, ולכן קובץ שנטען באתר אחד לא משמש אתר אחר. מנגד, Google Fonts מפצל את הגופן אוטומטית לתתי קבוצות של תווים ומגיש WOFF2, ובאירוח עצמי את העבודה הזו צריך לעשות בעצמכם. לפי web.dev, אירוח עצמי מומלץ בעיקר כשהאתר כבר משתמש ב-CDN וב-HTTP/2.

לרוב האתרים העסקיים אירוח עצמי הוא בחירה טובה, בתנאי שעושים אותו נכון: WOFF2, רק המשקלים שבשימוש ותת-קבוצה של תווים. לפי web.dev, באירוח עצמי קל לפספס את האופטימיזציות האלה ולקבל קבצים גדולים יותר. במקרה כזה האירוח העצמי עלול להיות איטי יותר מהקישור ל-Google.

איך טוענים פונטים בלי שהעמוד יקפוץ?

שתי בעיות מוכרות נובעות מגופנים שנטענים מאוחר. בראשונה הטקסט בלתי נראה עד שהגופן מגיע. בשנייה הטקסט מוצג קודם בגופן חלופי ואז מתחלף לגופן האמיתי, ואם שני הגופנים תופסים מקום שונה, השורות זזות. לפי web.dev, שתי ההתנהגויות עלולות לגרום להזזות פריסה שנמדדות במדד CLS, אחד ממדדי Core Web Vitals. את מדידת המהירות ושיפורה פירטנו בעמוד מהירות אתר, וכאן נתמקד במה שתלוי בגופן:

• WOFF2 בלבד: לפי web.dev זה הפורמט עם הדחיסה הטובה ביותר והתמיכה הרחבה ביותר
• תת-קבוצה של תווים: עם unicode-range הדפדפן מוריד קובץ רק כשהעמוד מכיל תווים מהטווח שלו
• font-display: הערך swap מציג טקסט מיד ומחליף גופן כשהוא מגיע, והערך optional משתמש בגופן רק אם הוא מוכן בזמן וחוסך את ההחלפה
• טעינה מוקדמת: רמז preload רק לקובץ החשוב ביותר, עם crossorigin, כי קובצי גופנים נטענים בחיבור CORS. לפי web.dev, preload מתעלם מ-unicode-range
• גופן חלופי מותאם: גופן גנרי כמו sans-serif, עם size-adjust והגדרות מידות שמקרבות אותו לגופן האמיתי
• רק מה שבשימוש: משקל או סגנון שלא מופיע בעיצוב לא נטען

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