בקצרה: לאתר של עסק בוחרים בדרך כלל שני פונטים בעברית: גופן תצוגה עם אופי לכותרות, וגופן נקי וקריא מאוד לטקסט. בודקים שלגופן הטקסט יש כמה משקלים, אותיות ברורות בגודל קטן ותמיכה טובה בספרות ובלטינית, שהרישיון מתאים לאתר, ושהגופנים נטענים מהר. גופן שנמצא כמעט בכל אתר ישראלי חוסך החלטה, אבל גם מוריד מהייחוד של העסק.
למה הגופן משפיע כל כך
בחירת פונטים בעברית לאתר היא אחת ההחלטות שהכי משפיעות על התחושה, ואחת שהכי הרבה עסקים מדלגים עליה. רוב האתרים משתמשים באותם שניים-שלושה גופנים חינמיים, ולכן נראים דומים גם כשהצבעים שונים. זו אחת הסיבות שכל כך הרבה אתרים נראים אותו דבר.
הגופן נקרא לפני שהמילים נקראות. גופן דחוס ועבה נשמע נועז. גופן עגול נשמע חם. גופן דק ומסודר נשמע שקט ורציני. גולש לא יגיד "איזה גופן מעניין", אבל הוא ירגיש אם האתר נשמע כמו עסק מקצועי עם אופי, או כמו עוד תבנית.
שני תפקידים, לרוב שני גופנים
- גופן לכותרות: יכול להיות בעל אופי חזק, דחוס, עבה או מיוחד. הוא מופיע במעט מילים ובגודל גדול, ולכן מותר לו להיות מורכב.
- גופן לטקסט: חייב להיות קריא מאוד בגודל קטן, גם בטלפון וגם בפסקאות ארוכות. כאן עדיף גופן נקי ופשוט.
שני גופנים מספיקים כמעט תמיד. שלושה ומעלה כבר מתחילים להרגיש לא מסודר, ולטעון לאט יותר. לפעמים אפשר להוסיף גופן שלישי קטן לתפקיד מאוד מסוים, כמו גופן מונוספייס לאלמנטים בלטינית, אבל זה החריג.
דוגמה מהאתר שלי: לכותרות אני משתמש ב-Karantina, גופן תצוגה עברי דחוס עם הרבה אופי, ולכל שאר הטקסט ב-IBM Plex Sans Hebrew, שנקרא בקלות גם בגודל קטן. הכותרות נשמעות חזקות, והטקסט נשאר נוח לקריאה.
מה הופך גופן לטקסט לטוב
- אותיות פתוחות וברורות, שקל להבדיל ביניהן: ד ו-ר, ה ו-ח, ו ו-ז, ס ו-ם.
- גובה אותיות נדיב, שנשאר קריא בגודל קטן.
- כמה משקלים (רגיל, בינוני, מודגש), כדי ליצור היררכיה בלי להחליף גופן.
- תמיכה טובה בספרות ובאותיות לטיניות, כי באתר תמיד יש מספרי טלפון, מיילים ושמות באנגלית.
- ספרות שמתיישרות יפה בטבלה או במחירון, ולא קופצות בגובה.
גופן לכותרות עם אופי
כאן יש מקום לבטא את העסק. סטודיו לעיצוב יכול לבחור גופן תצוגה דחוס ודרמטי. משרד עורכי דין יכול לבחור גופן מסודר עם קווים חדים ושקטים. גן ילדים יכול לבחור גופן מעוגל וחם. השאלה היא לא "מה יפה", אלא "מה נשמע כמו העסק הזה". גופן תצוגה נכון הוא גם אחד הכלים הפשוטים ביותר לתחושה של מותג, כפי שמוסבר במדריך למראה יוקרתי לעסק קטן.
איך משלבים שני גופנים
שני הגופנים צריכים להיות שונים מספיק כדי שיהיה ניגוד, אבל לא עד כדי כך שהם נראים כמו שני אתרים שונים. כמה שילובים שעובדים לרוב:
- גופן תצוגה דחוס לכותרות, עם גופן טקסט רחב ונקי.
- גופן כותרות עגול, עם גופן טקסט ישר ושקט.
- גופן כותרות עם ניגוד בעובי הקווים, עם גופן טקסט בעובי אחיד.
שני גופנים דומים מדי נראים כמו טעות. שני גופנים עם אופי חזק נלחמים זה בזה.
איפה מוצאים פונטים בעברית
- Google Fonts: מבחר של גופנים עבריים חינמיים לשימוש מסחרי, כולל גופני תצוגה מעניינים. נוח, אבל חלק מהגופנים שם נמצאים כמעט בכל אתר, ולכן כדאי לחפש גם מעבר לראשונים ברשימה.
- בתי גופנים ישראליים: מוכרים רישיונות לגופנים מקצועיים, לרוב עם יותר משקלים ואופי ייחודי.
- גופנים חינמיים אחרים: כדאי לבדוק את הרישיון. לא כל גופן שמופיע להורדה מותר לשימוש באתר מסחרי.
רישוי
גופן מסחרי נקנה ברישיון, ולעיתים יש רישיון נפרד לאתר (web) ולהדפסה. לפני שמשתמשים בגופן באתר, ודאו שהרישיון מתאים, ושמרו את הקבלה. זה נכון גם לגופן שהמעצב "כבר יש לו": רישיון שנקנה לשימוש של המעצב לא תמיד מכסה אתר של לקוח.
מהירות טעינה
כל גופן וכל משקל הוא עוד קובץ שהדפדפן טוען. ארבעה משקלים של שני גופנים זה כבר הרבה. כמה כללים:
- לבחור שניים-שלושה משקלים לכל גופן, ולא את כל המשפחה.
- לטעון רק את טווח האותיות שבאמת צריך: עברית, ספרות ולטינית בסיסית.
- להגדיר גופן גיבוי דומה, כדי שהטקסט יופיע מיד ולא יקפוץ ממקום למקום כשהגופן הנכון מגיע.
קפיצה כזאת של טקסט נמדדת אצל גוגל כחלק מ-Core Web Vitals (CLS). עוד על הקשר בין עיצוב למהירות במדריך למהירות אתר ועיצוב.
גודל, ריווח וקריאות
גם הגופן הטוב ביותר נכשל אם הוא קטן מדי או צפוף מדי. בטלפון, טקסט רגיל בדרך כלל לא קטן מ-16 פיקסלים. גובה שורה נדיב עוזר מאוד בעברית, שבה האותיות צפופות יחסית. ושורה ארוכה מדי במחשב מעייפת, לכן כדאי להגביל את רוחב הפסקאות כך שהעין לא תלך לאיבוד בדרך לשורה הבאה. גודל וניגודיות הם גם חלק מתקן הנגישות ת"י 5568, ואתר צריך להישאר קריא גם כשמגדילים את הטקסט, כפי שמוסבר במדריך לנגישות אתרים.
טעויות נפוצות
- גופן מיוחד גם לטקסט הרגיל, שקשה לקרוא בפסקה.
- גופן בלי משקל מודגש, ואז הדפדפן "מזייף" הדגשה שנראית מרוחה.
- גופן עברי עם אותיות לטיניות חלשות, שנראה רע ליד שם באנגלית.
- גופן לטיני יפה בלי תמיכה בעברית, כך שהעברית מוצגת בגופן ברירת מחדל של המכשיר.
- טקסט באותיות מודגשות לכל אורך העמוד.
- גופן שנבחר רק כי הוא ברירת המחדל של הפלטפורמה.
על הבעיות הייחודיות לעברית, כמו פיסוק ומספרים, כתבתי במדריך לטעויות עיצוב בעברית.
איך בודקים גופן לפני שמחליטים
- כתבו פסקה אמיתית מהאתר, לא "לורם איפסום", והציגו אותה בגופן הטקסט בטלפון.
- קראו שלוש פסקאות ברצף. אם זה קל, גופן הטקסט עובד.
- שימו את הכותרת הראשית בגופן התצוגה ושאלו: האם זה נשמע כמו העסק?
- כתבו שורה עם מספר טלפון, מייל ושם באנגלית, ובדקו שהכול נראה שייך.
- בדקו את המשקל המודגש ואת הגודל הקטן ביותר שתשתמשו בו, למשל בכיתוב מתחת לתמונה.
נניח שיש לכם משרד עורכי דין. אתם מתלבטים בין גופן תצוגה עגול וידידותי לבין גופן מסודר עם קווים חדים. כשתכתבו בשניהם את הכותרת "ליווי משפטי בגירושין ובירושה", תשמעו מיד איזה מהם נשמע כמו המשרד שלכם. הבדיקה הזאת לוקחת עשר דקות ושווה יותר מכל דיון תיאורטי.
למה זה קל יותר באתר בקוד
בפלטפורמות בניית אתרים הבחירה מוגבלת לרוב לרשימת הגופנים שלהן, והשליטה בטעינה, במשקלים ובטווח האותיות חלקית. באתר בקוד אפשר לטעון כל גופן שיש לו רישיון מתאים, בדיוק במשקלים שצריך. ההבדלים מוסברים בהשוואה בין Wix לאתר בקוד.
לסיכום
שני גופנים, אחד עם אופי לכותרות ואחד קריא מאוד לטקסט, ברישיון מתאים ובטעינה מהירה: זה כל הסוד. בכל אתר שאני בונה אני מציע גופן עם אופי שמתאים לעסק לפני שמתחילים לעצב, ולא משתמש באותו גופן ברירת מחדל בכל פרויקט. לדוגמה, האתר של אפרת שכטר עבר מתבנית לאתר מותג בעיצוב אישי. אפשר לראות את השונות בין העסקים בתיק העבודות, או לקרוא על אתר תדמית.
רוצים אתר שעובד בשביל העסק?
ספרו לי מה אתם צריכים, ותקבלו כיוון ברור והצעת מחיר מסודרת.