Share on facebook
Share on linkedin
Share on whatsapp
Share on email

טיפוגרפיה עברית באתרים – חלק ב'

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

איפה ניתן לרכוש פונטים לאתר?

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

חברות פונטים ישראליות

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

איך נציג באתר טקסט מודגש?

הצגת טקסט מודגש באתר יכולה להתבצע בשתי דרכים: או ע"י שימוש בקבצים יחודיים של הפונט המודגש (למשל: Open-Sans-Hebrew-Condensed-Bold.woff) או באמצעות היכולת האוטומטית של הדפדפן להציג טקסט מודגש. כאשר אנחנו מעלים לאתר קובץ במשקל אחד בלבד (למשל – רגיל) ואז מגדירים לו להיות מודגש (באמצעות HTML / CSS / Elementor וכו') הדפדפן לא משתמש במשקל Bold שנוצר ע"י יוצר הפונט (כי לא סיפקנו לו קובץ מתאים). במצב כזה הדפדפן בעצמו מעבה את הפונט כדי שיראה מודגש וכבד יותר. אלא שהדפדפן עושה את הפעולה הזאת בצורה לא טובה, אשר פוגעת באיכות הטיפוגרפית של האתר. 

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

 

הטמעת טקסט כתמונה ולא כטקסט חי

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

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

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

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

מתי כן יש הגיון בטקסט בתוך תמונה?

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

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

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

Varela Round יפה אך מגיע במשקל אחד בלבד, Amatic המיוחד והדקיק מתאים לפעמים בתור פונט כותרות, ויש מעצבים רבים אשר אוהבים להשתמש ב-Alef וב-Rubik (אני פחות מתחבר אליהם). שאר הפונטים מתאימים אולי למקרים מסויימים מאוד.

פונטים מצויינים נוספים שזמינים בחינם הם Open Sans Hebrew ו-Open Sans Hebrew Condensed, פונטים שנוצר מתוך הסגנון של הפונטים הלטינים Open Sans ו- Open Sans Condensed, פונט חינמי, סנס-סריפי, הפופולארי מאוד בממשקים.

עוד פונטים בחינם יש כאן (לא כולם זמינים להורדה כפונטים לאינטרנט): freefonts.co.il.

פורמטים יחודיים להטמעת פונטים באתרי אינטרנט

לרוב קובצי OTF ו-TTF הם הקבצים הנפוצים לשימוש במחשב ובעבודות דפוס. לעומת זאת, באינטרנט משתמשים בפורמטים המתאימים להצגה באתרים: woff, woff2 ו-eot. דפדפנים מוגבלים ברוב המקרים בסוגי הקבצים בהם הם יכולים להשתמש, ועל מנת להגיע לכיסוי ראוי של מגוון הדפדפנים הקיים בשוק מומלץ תמיד להעלות יותר מסוג קובץ אחד.

הפונט שאני רוצה לא זמין בקבצי web. יש מה לעשות?

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

איך מטמיעים פונט באתר וורדפרס?

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

תבנית – תבניות פופולריות (OceanWP, ASTRA ועוד) מגיעות עם אפשרות לבחירה של מגוון פונטים מ-Google Fonts, ובתוך זה הפונטים העבריים.

טיפוגרפיה באזור ההתאמה האישית בתבנית OceanWp
טיפוגרפיה באזור ההתאמה האישית בתבנית OceanWp - בחירת פונט.

לחלק מהתבניות יש HOOK מיוחד לטעינה של פונטים (כדי שהם יופיעו באזור ה"התאמה אישית").  בתבנית OceanWP, למשל, ניתן להוסיף פונט לאזור ההתאמה האישית עם ההוק ocean_add_custom_fonts (המקום לקוד הזה הוא בקובץ functions.php בתבנית הבת):


// Add custom fonts to oceanWp font settings
function ocean_add_custom_fonts() {
return array( 'almoni tzar', 'mugrabi' );
}

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

* על מנת לדעת אם התבנית בה אתם משתמשים תומכת בהוספה של פונטים דרך ממשק או הוק קיראו את התיעוד שלה (Documentation).

אלמנטור – אלמנטור הוא תוסף לבניית דפים, אשר פופולארי מאוד בערך משנת 2017. התוסף מאפשר לבחור בין מגוון פונטים של Google Fonts, וגם את Open Sans Hebrew ניתן לבחור בו. האפשרות הטובה ביותר היא להגדיר באופן גלובלי פונטים לכותרות ולפיסקאות הטקסט – פונטים ברירת מחדל. הגדרות אלו משפיעות על כל החלקים באתר אשר נבנו עם אלמנטור (ולא על כל דף לחוד). על מנת להגיע לאפשרות זו יש ללחוץ על הסמל של שלושת הקווים האופקיים (המבורגר) שממוקם בראש ה-Editor (מעל אזור הוידג'טים). לאחר שבוחרים פונטים חשוב ללחוץ על כפתור "החל" ולא להסתפק בלחיצה על כפתור "עידכון".

1.
גופני ברירת מחדל באלמנטור
2.

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

אם מעוניינים להטמיע באתר פונטים שנרכשו עבורו, ניתן להוסיף פונטים נוספים דרך הממשק הנוח שאלמנטור מעניק לנו. לשם כך יש לצאת מהממשק של אלמנטור, אל לוח הבקרה של WordPress (לוח הבקרה – אלמנטור – Custom Fonts). לכל משפחה ניתן להעלות דרך הממשק עד תשעה משקלים שונים. חשוב להטמיע עבור כל משקל יותר מקובץ אחד, על מנת לכסות תמיכה בדפדפנים שונים.

elementor custom fonts

תוסף – באמצעות התוסף Use Any Fonts ניתן להטמיע באתר פונטים מותאמים אישית ללא כתיבת קוד CSS כלל. התוסף תומך כמעט בכל התבניות וה Page Builders. אני לא ממליץ להשתמש בתוסף לצורך הטמעת פונטים, אך משתמשים רבים מוצאים אפשרות זאת כנוחה. התוסף אמין מאוד וזוכה לתמיכה מעולה – 100,000 התקנות פעילות ן-4.5 כוכבים (מעל 800 מדרגים).

Use Any Font. מקור: דף התוסף
Use Any Font. מקור: דף התוסף בספרייה של וורדפרס.

CSS – ניתן להטמיע פונטים בקלות יחסית באמצעות טכנולוגיית Font Face. בחלק מהחברות, כאשר רוכשים פונט מקבלים קוד הטמעה מוכן. את הקוד יש להדביק בקובץ CSS שיוצרים בתבנית הבת (למשל Custom.css).


/* Webfont Source: https://alefalefalef.co.il/asimon
Licensed pageviews limit: 100,000/month */

@font-face{
	font-family: 'asimon';
	font-weight: 400; /*(regular)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-regular-aaa.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-regular-aaa.woff') format('woff');
}
@font-face{
	font-family: 'asimon';
	font-weight: 700; /*(bold)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-bold-aaa.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-bold-aaa.woff') format('woff');
}
@font-face{
	font-family: 'asimon';
	font-weight: 900; /*(black)*/
	font-style: normal;
	src: url('YOUR_FULL_URL_PATH_HERE/asimon-black-aaa.woff2') format('woff2'),
		url('YOUR_FULL_URL_PATH_HERE/asimon-black-aaa.woff') format('woff');
}

אחרי הטמעת הפונט ב-Font Face יש להגדיר באילו מצבים (סלקטורים) הפונט צריך להיות מוצג (צעד זה אינו רלוונטי כאשר מכניסים את הפונט לתבנית באמצעות Hook). לדוגמה:


h1 { 
	font-family: 'asimon', 'Dosis', sans-serif; 
	font-weight: 400; 
	font-size: 3em; 
}

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

סיכום

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

שיתוף

Share on facebook
Share on whatsapp
Share on linkedin

רוצה שנחזור אליך ונקבע פגישה?

נציג "האייל" יחזור אליך בשעות הקרובות וישמח לשוחח איתך.