5 דברים שאתם צריכים לדעת על פונטי רשת
פונטי רשת (webfonts) אלו הם פונטים שניתן להטמיע באתרי אינטרנט.
ישנם ארבעה פורמטים שונים של פונטי רשת:
- ttf - כמעט כל הדפדפנים יודעים להציג פונטים מסוג זה, שוקל הרבה
- eot - אקספלורר, כהרגלו, משתמש בפורמט מיוחד של מייקרוסופט
- svg - לאייפון ולאייפד
- woff - סטנדרט חדש, פתוח וקל משקל, המיועד לאינטרנט - נתמך על ידי דפדפנים מודרניים
אין סיבה להירתע מריבוי הפורמטים; ישנו כלי בשם Font Squirrel שמייצא את כל הפורמטים בלחיצת כפתור. ואם בעברית חשקה נפשכם, תוכלו להעזר במדריך ליצירת פונטי רשת בעברית ב-Font Squirrel.
זהו השלב שבו אתם אמורים להגיד: "אז למה כולם משתמשים באריאל?" ובכן, בעוד שהיו זמן רב כלים המאפשרים להטמיע פונטים באתרים, יש כמה בעיות בטכנולוגיה הזו:
1. חוקיות
כידוע, רוב הפונטים הטובים הם אלו שצריך לקנות. בדרך כלל, רשיון השימוש של פונט קנוי לא מתיר הטמעה שלו באתר אינטרנט, מהסיבה הפשוטה שניתן להוריד פונט מוטמע (כמו כל דבר אחר שנמצא באתר אינטרנט). בשנתיים האחרונות פונטי הרשת עלו לשיח של מפתחי האתרים וצצו להם שני מודלים מרכזיים:
א. הטמעה עצמאית של פונטי רשת
פתרון המצריך העלאה של פונטים לשרת שלכם. חינם: פונט סקווירל מספק חבילות מוכנות להורדה של פונטי רשת שרשיון השימוש שלהם מתיר הטמעה באתרים.
בעברית אין הרבה פתרונות חינמיים, אני רק מכיר את קולמוס - ספריית פונטים ברשיון חופשי הכוללת גרסאות טובות של מרים, אהרוני ודוד. רכישה: מספר חברות מוכרות פונטים ברשיון מיוחד רק לרשת (ללא פורמט ttf). בארץ עודד עזר נוהג כך, ובחו"ל - חברת fontfont. יתרונו של פתרון זה: קונים פונט לכל החיים
ב. ספריית פונטים חיצונית
פתרון שלא מצריך להתעסק עם קבצי פונטים. כדי להטמיע את הפונט באתר, מקשרים לספריה חיצונית המארחת את הפונטים על השרתים שלה. חינם: גוגל מספקת את הפתרון בצורה חינמית באתר Google Webfonts. בתשלום: ישנן חברות כמו fonts.com ו-typekit, שמספקות ספריה מצומצמת בחינם וכן ספריה מורחבת בתשלום על בסיס חודשי. יתרונו של פתרון זה: מאפשר גישה לספרייה גדולה של פונטים, אין צורך לקנות כל פונט בנפרד.
2. הינטינג
פונט מורכב מצורות גיאומטריות - ווקטוריות. המסך שלנו מורכב מריבועים - פיקסלים. הינטינג (hinting) - הנחיות כיצד יש לרנדר את הפונט (הווקטורי) על גבי מסך (פיקסלים). הפונטים שמייקרוסופט פיתחה (אריאל, ג'ורג'יה, וורדנה, טהומה) מצויידים בהינטינג איכותי ומושקע - מה שיוצר קריאות טובה על המסך בכל גודל. לעומת זאת, פונטים שאינם מושקעים ברמת ההינטינג עלולים להיראות פחות טוב בגדלים מסויימים. שימו לב שישנו פער בין הרינדור של ווינדוז - הנוטה לפיקסול, לעומת הרינדור של מק - הנוטה לצורות חלקות.
מומלץ לעשות ניסיונות בגדלים שונים ובדפדפנים שונים, והכי חשוב - במערכות ווינדוז. הנטיה כרגע, באתרים רבים, היא להשתמש בפונטי רשת לכותרות ולא לגוף הטקסט בגלל ההינטינג.
3. מהירות
פונטי רשת הם בעצם עוד קבצים שהדפדפן מוריד בזמן טעינת הדף. המשמעות היא זמן טעינה שעלול להיות ארוך יותר. כדי לצמצם בגודל הקובץ מומלץ להשתמש רק בתווים שאתם צריכים. למשל, אם בפונט יש אותיות קיריליות, או תווים מיוחדים, ניתן לוותר עליהם. בכל שירות שצויין בפוסט זה יש אפשרות לבחור שפה מסויימת ובכך לצמצם תווים מיותרים.
4. שילוב בין לועזי לעברי
חייבים לתת קרדיט לאריאל בתחום אחד - יש לו גם אנגלית וגם עברית והם נראים טוב ביחד. ברגע שתתחילו להשקיע בפונט עברי מיוחד לכותרות - תתקלו בבעיה של התאמת פונט עברי ללועזי. מעבר לבעיה של מציאת פונט מתאים, ב-css אין דרך להגדיר פונט אחד לעברית ופונט אחר לאנגלית. הפתרון שאני מצאתי הוא סימון המילים הלועזיות בתגית bdo - המיועדת לשינוי כיוון הטקסט - וב-css להגדיר את הפונט הלועזי רק לתגית bdo. לחילופין תוכלו לקנות גרסת אינטרנט של פונט רץ (המכילה את ווספר הלועזי) מעודד עזר
5. הדגשה
היזהרו מ-font-weight:bold כשאתם משתמשים בפונטי רשת, אחרת יווצר faux-bold (הדגשה מזוייפת). במקום זאת, כתבו font-weight:normal, והשתמשו במשקל המודגש של הפונט.
אז למה כן להשתמש בפונטי רשת?
למרות הבעיות בפונטי רשת, יש הרבה יתרונות לשימוש בהם: אפשר ליצור תכנים דינמיים בפונט מיוחד, אין צורך להשתמש בתמונות במקום טקסט חי, קל יותר לעדכן את האתר ואפשר לבחור את הטקסט. בפוסט הבא נציג כמה דוגמאות יפות לשימושים בפונטי רשת כדי לראות איך עושים את זה נכון.