פונטים וטיפוגרפיה למפתחים - מה שלא מלמדים בקורס עיצוב¶
כשמדברים על ביצועי אתר, כולם קופצים ישר לתמונות ולג'אווהסקריפט. אבל יש רכיב אחד שכמעט תמיד נשכח, והוא בדרך כלל הדבר הראשון שהמשתמש מבחין בו: הטקסט. גופנים הם קובץ שצריך להוריד בדיוק כמו כל משאב אחר, ואיך שמטפלים בהם משפיע ישירות על התחושה של האתר, גם אם הוא "טכני" יותר מעיצובי.
טעינת גופנים - font-display¶
כשהדפדפן מוריד גופן מותאם אישית, הוא צריך להחליט מה לעשות עם הטקסט עד שהגופן מוכן. התכונה font-display ב-CSS נותנת לכם שליטה על ההתנהגות הזו. הערך swap אומר לדפדפן להציג מיד את הטקסט בגופן חלופי, ולהחליף אותו לגופן האמיתי ברגע שהוא נטען. הערך optional שמרני יותר: אם הגופן לא נטען מהר מספיק, הדפדפן פשוט מוותר עליו לגמרי בטעינה הזו וממשיך עם הגופן החלופי. ההבדל הזה קריטי לתחושת המהירות של הדף, כי הוא קובע אם המשתמש רואה תוכן מיד או מחכה למסך ריק.
@font-face {
font-family: "MyFont";
src: url("/fonts/myfont.woff2") format("woff2");
font-display: swap;
}
טקסט מוסתר וטקסט שמתחלף - FOIT ו-FOUT¶
שני מושגים שכדאי להכיר: FOIT זה מצב שבו הטקסט פשוט לא מוצג בכלל עד שהגופן המותאם נטען, כלומר המשתמש רואה חלל ריק. FOUT זה כשהטקסט מוצג מיד בגופן חלופי, ואז "קופץ" לגופן הסופי ברגע שהוא מוכן. אף אחת מהאפשרויות לא מושלמת. FOIT נותן תחושה של דף תקוע, ו-FOUT יכול לגרום לקפיצה קטנה בפריסה אם הגופנים שונים מאוד בגודל שלהם. הבחירה ב-font-display היא בעצם בחירה מודעת בין שתי הבעיות האלה, ולרוב swap הוא הפשרה הסבירה ביותר.
גופן אחד עם הרבה משקלים - Variable Fonts¶
בעבר, אם רציתם להשתמש בגופן ב-regular, bold ו-italic, הייתם צריכים להוריד שלושה או ארבעה קבצים נפרדים. גופנים משתנים פותרים את זה בכך שהם דוחסים טווח שלם של משקלים, ולפעמים גם רוחב ונטייה, לתוך קובץ אחד. במקום לבחור בין כמה קבצים, אתם שולטים במשקל דרך CSS:
זה אומר פחות בקשות רשת ופחות קבצים לנהל, במחיר של קובץ בודד שיכול להיות גדול יותר מגופן סטטי בודד. שווה לבדוק אם הגופן שאתם משתמשים בו תומך בפורמט הזה לפני שאתם משקיעים בו.
מחסנית גיבוי - Fallback Font Stack¶
לפני שהגופן המותאם נטען, ולפעמים אם הוא נכשל לגמרי, הדפדפן נופל חזרה על מה שכתבתם בתכונת font-family. חשוב לבנות את השרשרת הזו בתשומת לב, ולא רק להוסיף sans-serif בסוף ולשכוח מזה. שרשרת טובה כוללת גופן שדומה בגובה ובמרווחים לגופן המקורי, כדי שהקפיצה כשהגופן האמיתי נטען תהיה עדינה ככל האפשר:
אירוח עצמי מול CDN לגופנים¶
יש כאן שיקול שלא תמיד חושבים עליו: מאיפה הגופן נטען. שירותי CDN לגופנים נוחים, כי הם מנוהלים עבורכם ולפעמים המשתמש כבר הוריד את אותו קובץ גופן מאתר אחר, כך שהוא כבר קיים במטמון הדפדפן שלו. מצד שני, זה אומר שהדפדפן פונה לדומיין חיצוני נוסף בזמן הטעינה, מה שיכול להוסיף חיבור רשת נפרד, ומעביר מידע על המבקרים באתר שלכם לצד שלישי. אירוח עצמי של קבצי הגופנים נותן לכם שליטה מלאה, בלי תלות בזמינות של שירות חיצוני ובלי לשתף נתוני משתמשים עם עוד גורם. אין תשובה אחת נכונה, זו בחירה בין נוחות לשליטה, ושווה לקבל אותה במודע.
עקרונות קריאות בסיסיים¶
מעבר לכל הטכנולוגיה, יש כמה כללי אצבע פשוטים שמשפרים קריאות בצורה מיידית. line-height שנע בסביבות 1.5 עד 1.6 לטקסט רץ נותן לעין מרחב נשימה בין השורות. שורות ארוכות מדי מעייפות את הקורא, כי קשה למצוא את תחילת השורה הבאה, אז הגבלת רוחב עמודת הטקסט עוזרת גם היא. אלה לא כללים טכניים מסובכים, אבל הם ההבדל בין דף שנעים לקרוא בו לדף שגורם לעייפות עיניים בלי שהמשתמש בכלל מבין למה.
בקורס צד לקוח עוברים על עקרונות ה-CSS שעליהם כל הנושאים האלה נשענים, כך שאם משהו כאן נשמע לא מוכר, שווה להתחיל משם.
לסיכום¶
גופנים הם לא רק עניין של עיצוב, הם משאב שצריך לטעון, לנהל ולתחזק בדיוק כמו כל דבר אחר בעמוד. הבחירות הקטנות האלה, מ-font-display ועד למחסנית הגיבוי, משפיעות על התחושה הראשונית שהמשתמש מקבל מהאתר שלכם.
אם יש לכם שאלות או שתרצו לשתף איך אתם מתמודדים עם טעינת גופנים בפרויקטים שלכם, אשמח לשמוע.