5 דברים שאתם צריכים לדעת על פונטי רשת

פונטי רשת (webfonts) אלו הם פונטים שניתן להטמיע באתרי אינטרנט.

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

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

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

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

1. חוקיות

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

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

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

Font Squirrel
פונטים חינמיים באתר Font Squirrel

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

ב. ספריית פונטים חיצונית

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

גרסת רשת של נרקיס - מספריית fonts.com
גרסת רשת של נרקיס - מספריית fonts.com

2. הינטינג

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

 

אותו הפונט עם ובלי הינטינג
אותו הפונט עם ובלי הינטינג

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

3. מהירות

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

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

4. שילוב בין לועזי לעברי

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

התאמת פונט אנגלי לספויילר של פונטביט
פונט ספויילר של פונטביט בצורתו הגולמית (למעלה) לעומת פונט ספויילר בשילוב עם הפונט הלועזי Titllium Text

5. הדגשה

היזהרו מ-font-weight:bold כשאתם משתמשים בפונטי רשת, אחרת יווצר faux-bold (הדגשה מזוייפת). במקום זאת, כתבו font-weight:normal, והשתמשו במשקל המודגש של הפונט.

אז למה כן להשתמש בפונטי רשת?

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

תגיות:, , ,

10 תגובות

  1. היי לביא, אחלה מאמר. תודה על הפרגון לפיקסל פרפקט. הבלוג נראה מצויין. בהצלחה!

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

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

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

    • "אני חושב שיהיה מועיל יותר אם תעלה את התלונות שלך ישירות מול מפתחי דפדפנים והתקן, בידיהם היכולת לשנות ולשפר את ההצע הקיים."
      א. אלו אינן תלונות, אלא דברים שצריך להיות מודעים אליהם; להיפך, ברור שפונטי רשת נחוצים וטובים, החידוש הוא שיש בעיות איתם
      ב. אולי לא הדגשתי זאת מספיק, אך ה-woff הוא פיתוח מצויין של יוצרי התקנים, וכל הכבוד להם – וגם לדפדפנים על האימוץ של הסטנדרט
      ג. בעיית ההינטינג לא תיעלם עד שווינדוז xp לא תיעלם – אין מה לעשות 🙂 יש כמה פונטי רשת לועזיים שמשקיעים בהינטינג שלהם בגלל הבעיה הזו – והמחיר בהתאם

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

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

    • ואפשר לצטט יפה מהתנ״ך גם עם SBL Hebrew:
      http://www.sbl-site.org/educational/BiblicalFonts_SBLHebrew.aspx

      אני משתמשת בו בעבודה שאני כותבת על התרגום הוולשי של התנ״ך, עם המון (מאות) דוגמאות דו־לשוניות, ולדעתי זה נראה מצויין.

  5. כתבה מצוינת!
    ניתן לרכוש ולהתרשם מ200 פונטים מדליקים בעברית באתר הבא – http://www.tmlfonts.com

    רפי
  6. מאמר מצויין, למדתי ממנו הרבה במיוחד את המושג הינטינג.

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

    אלעד