פונטים בעברית

שדרגו את האתר שלכם עם פונטים בעברית

גם אם אתם לא נעזרים במעצב כדי לבנות את האתר או אפליקציית ה-web שלכם, זה לא אומר שהם לא צריכים להיראות במיטבם. ואכן, מפתחים רבים משקיעים זמן רב בעיצוב האתר שבנו בעצמם, אבל שוכחים פרט אחד קטן שיכול לגרום לאתר להיראות מהוקצע יותר – אני מדבר כמובן על שימוש בגופן (פונט, font) שאינו אחד מברירות המחדל של הדפדפן.

אני כבר יכול לשמוע את רווחת האנחה של חלקכם: "אצלי הכל בסדר, אני משתמש בפונט Arial…". אז זהו – שזה לא פתרון מספיק טוב. גופן אריאל (וכמוהו כל הפונטים שמגיעים עם הדפדפן / מערכת ההפעלה), למרות היותו קריא ונוח, הפך כבר מזמן לשחוק ומאוס בעיני משתמשים רבים. השימוש בו עלול לגרור תגובות כמו "האתר הזה נמצא עדיין בבנייה" או "האפליקציה נראית לא מקצועית".

כדי להמחיש כמה משמעותי ההבדל, הנה כמה תמונות מסך מאתר allmovies.co.il, שההבדל היחיד ביניהן הוא הפונט:

שימוש בפונט ברירת המחדל של הדפדפן
שימוש בפונט ברירת המחדל של הדפדפן (Chrome)
שימוש בפונט הנפוץ אריאל
שימוש בפונט הנפוץ "אריאל"
שימוש בפונט החינמי אלף
שימוש בפונט החינמי "אלף"

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

מה חשוב כשבוחרים פונט?

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

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

    הנה קוד המאפשר לייצר את התמונה למעלה.

  2. מגיע במספר פורמטים. קיימים מספר סוגים נפוצים לקבצי פונט, כגון TTF, WOFF, SVG ועוד. חלקם נראים טוב יותר בדפדפנים מסויימים, חלקם שוקלים פחות, וחלקם נתמכים רק בדפדפנים חדשים. השתדלו לבחור גופן המגיע בכמה שיותר פורמטים, כך שייראה במיטבו על כל הדפדפנים הנפוצים.
  3. מאוחסן ב-CDN. שימוש בפונט המאוחסן ב-CDN (רשת דיוור תוכן), עשויה לחסוך את הורדת הפונט ע"י הדפדפן במידה והורד כבר בעבר. בנוסף, שימוש ב-CDN מאפשר הורדת הפונט במקביל לתוכן אחר באתר שלכם, ובכך האצת טעינת האתר וצמצום תופעת ה-FOUT.
  4. בעל איכות גבוהה וכמה שפחות פגמים. ניתן לוודא זאת ע"י הגדלת הפונט ומעבר על האותיות אחת אחת.

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

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

אך אם אתם כמוני – ואוהבים לבנות אתרים בעברית, אל דאגה! אספתי מספר פונטים חינמיים המתאימים לשימוש ב-web.

אלף

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

Open Sans בעברית

גופן Open Sans הינו נפוץ מאוד בשפות רבות. לאחרונה עוצבה הגרסה העברית שלו ע"י ינק יונטף, והיא מסופקת ע"י Google Fonts להורדה בחינם, במשקלים רבים.

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

Noto בעברית

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

גופנים נוספים

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

תגובה אחת בנושא “שדרגו את האתר שלכם עם פונטים בעברית”

  1. מידע מצוין, משהו שלא נתתי דעתי עליו עד כה, תודה צח!

    שאלה מעט קשורה – האם אתה במקרה יודע אם אפשר איכשהו להחזיק אתר פשוט בעברית ב-GitHub Pages? כשניסיתי להשתמש ב-markdown שלהם ראיתי שזה לא יעבוד, אין יישור לימין..
    אתה מכיר אולי איזו דרך פשוטה לכתוב תוכן טקסטואלי בעברית ולהעלות אותו ל-GitHub Pages ככה שייראה נורמלי? או שלדעתך עדיף להימנע, ואם כן, מה היית ממליץ במקום?

    תודה,
    יוני

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים