עיצוב האתר הוא הדבר הראשון שתופס לנו את העין, מחבר אותנו לערכים של המותג ומעודד אותנו להמשיך, להתעמק בתוכן ולבצע פעולות באתר. עיצוב האתר כולל מגוון גדול של בחירות סגנוניות – צבעוניות, שימוש בתמונות, שימוש בסמלים ובאינפוגרפיקה, גריד, מרווחים, ניווט ועוד. בין כל אלה לעיתים נדחקת החשיבה על טיפוגרפיה, אומנות סידור האותיות, הצידה, ולא בצדק. הבחירות הטיפוגרפיות מהוות שלב קריטי בתהליך עיצוב האתר, ויש להן השפעה עצומה על חוויית המשתמש, לא פחות מאשר לחומרים גרפיים (תמונות ואינפוגרפיקה) או רכיבי ממשק (תפריט, לחצנים, מיקרו-אינטראקציות וכו').
במאמר זה אני מתמקד ביסודות הטיפוגרפיה, אסקור את מונחי הבסיס ואת כל ההחלטות הטיפוגרפיות שעלינו לקחת בחשבון כאשר אנחנו מעצבים אתר. במאמר השני בסדרה, אני מפרט את המקורות לרכישת פונטים בעברית ונוגע במספר פרקטיקות של הטמעת גופנים באתרי WordPress.
השאיפה שלי היא לעודד כל מי שנוגע בעולמות של תוכן ועיצוב לחזור אל הטיפוגרפיה, לחקור אותה ולתת לה את המקום הראוי לה בעיצוב ברשת.
מהו פונט?
פונט (או גופן) הוא סגנון עיצוב צורת האותיות. יש פונטים בשפה אחד ויש פונטים רב-לשוניים, המכילים תווים של שפות שונות. כבר בראשית ימי הדפוס נוצרו צורות שונות לאותיות, אשר נבדלו זו מזו בסגנונן. בתקופה זו היה התחום נחלתם הבלעדית של בתי דפוס והקיף כמות מצומצמת של סגנונות. ראשית המאה העשרים הביאה איתה עושר חדש של פונטים, ועם זאת השינוי הגדול קרה בעידן הדיגיטלי. כיום כמות הפונטים הלטינים היא אדירה, וגם בעברית יש מאות רבות של פונטים. ישנן חברות אשר הזמינו פונט שיהיה יחודי להן, ופונט זה אינו ניתן לרכישה, ישנם פונטים שניתנים לרכישה באתרים המוקדשים לעניין, ויש פונטים הניתנים חינם לשימוש חופשי. כיוון שלרוב הפונטים יש מגוון משקלים (הסבר בהמשך), נפוץ כיום השימוש במונח "משפחה" על מנת לתאר פונט על סך כל משקליו.
אבחנה בין פונטי סנס וסנס סריף
עבור טקסט רץ מודפס מקובל להשתמש בפונטים סריפים כי הסריפים משמשים כרמזים, מקלים על תהליך הקריאה, ומאפשרים לעין להתעייף פחות. בגלל המאפיינים היחודיים של המסך פונטים סריפים פחות מתאימים לטקסט רץ. ב-WEB נשתמש רק בפונטים סנס סריפים.
סלאב-סריף הוא סוג מיוחד של פונט סריף. הסריפים בפונט סלאב הם ריבועיים ומקנים לפונט סגנון המתקשר עם המערב הפרוע.
חלוקת פונטים לפי תיפקוד וסגנון
לא כל הפונטים מתאימים לכל מטרה. יש פונטים קריאים מאוד שמתאימים בעיקר לטקסט רץ (בלוקים של טקסט, פיסקאות). בדפוס מקובל להשתמש בפונטים סריפים, אך באתרי אינטרנט ואפליקציות מקובל להשתמש למטרה זו בפונטים סנס-סריפים כמו אלמוני, אברהם, נרקיס בלוק, היבו ואסיסטנט.
יש פונטים שמתאימים בעיקר לכותרות – הם יצירתיים ומעניינים יותר. הם תופסים את העין, אבל פחות נוחים לקריאה בפסקאות שלמות. למשל: מוגרבי, סטנגה, אמטיק, וקריספר.
פונט יד הוא סוג נוסף של פונט האופייני לכותרות. בסגנון זה נעשה שימוש באותיות כתב ולא באותיות דפוס. לעיתים נעשה ניסיון לחקות סגנון אמיתי של כתב יד (כמו למשל באספקלריה של פונטביט) ולעיתים מקבל פונט היד דווקא קווים מרובעים האופיינים לכתב דפוס (כמו למשל בפונט פלוני יד של אאא) או קווים "בלוניים-מנופחים" (כמו למשל בפונט צלילה באו של פונטימונים).
יש פונטים שהיוצר שלהם יצר להם גם גרסה נוספת – צרה או דחוסה (מגוון המינוחים מבלבל מעט: Narrow, Condensed, Compressed – כל אלו נועדו לתאר פונטים ברמת דחיסות כזו או אחרת). הדחיסות מתבטאת בכך שכל אות תופסת פחות שטח בציר X. לפונטים צרים (לא להתבלבל עם פונטים במשקל דק – כאן איננו עוסקים במשקל) יש סגנון ייחודי משלהם אשר הופך אותם לפופולארים מאוד. עם זאת, פונטים דחוסים אינם מומלצים עבור פיסקאות, כיוון שהם פחות קריאים מפונטים רגילים. למה פונטים צרים ודחוסים כן מומלצים? בעיקר לכותרות, הנעות לפעולה וכל מקום שרוצים ליצור בו תחושה "קצת אחרת": כאשר משתמשים בהם בצורה שקולה, במשקל שאינו דק מידי ועבור כותרות – יש לפונטים דחוסים ערך עיצובי רב.
מהו משקל?
משקל הוא צורה אחת של הפונט. פונטים רבים מגיעים עם משקל אחד בלבד או שני משקלים (רגיל ומודגש), אך במשפחות פונטים מודרניות ניתן למצוא לעיתים 9 משקלים שונים ואף יותר, החל מדק מאוד (מקבל ב-WEB לרוב את המספר המייצג 100 ובמילים Ultra Light) ועד לפונט כבד מאוד (מקבל ב-WEB לרוב את המספר המייצג 900 ובמילים Ultra Black). בכותרות קצרות ניתן ליצור מראה דרמטי באמצעות שימוש במשקלים קלים מאוד או כבדים במיוחד, אך על מנת שטקסט רץ יהיה נוח לקריאה יש צורך לבחור במשקל רגיל – 400 או 500.
בנוסף, ישנן משפחות פונטים המכילות משקלים יחודיים שאינם קשורים בהכרח לעובי הכתב. כאלו הם, למשל, משקל Outline (צורת האות חלולה עם מסגרת) ומשקל stencil (צורת האות מורכבת ממספר יחידות נפרדות).
כתב ענק
יש אתרים שמשתמשים בכותרות ובטקסטים בגדלים ממוצעים, בעוד באתרים אחרים נעשה שימוש בגודל כתב גדול ומוגזם בכוונה, על מנת לתפוס את העין. לדוגמה:
צבע הכתב
כאשר מתכננים את צבעוניות האתר יש לשים לב גם לצבעי הטקסט. חשוב לבחור צבעים עם ניגודיות גבוהה, על מנת שהטקסט יהיה נוח לקריאה. לצבעים יש משמעות רגשית גדולה והם מאוד משפיעים על התחושה שהאתר מייצר. עוד על צבעים ניתן לקרוא במאמר "פלטת צבעים – איך להעביר מסר באמצעות צבע".
גובה שורה
המרווח בין השורות (נקרא גם "לדינג" – leading) משפיע מאוד על קריאות הטקסט. ככלל, בפיסקאות מומלץ להגדיר גובה שורה של 1.5em (אפשר גם מעט יותר או מעט פחות בהתאם לעיצוב הרצוי). בכותרות קצרות חשוב לשים לב שלא נקבע גובה שורה גדול, כדי לא ליצור מרווחים מיותרים. לרוב 1em יספיק. גובה שורה אינו נתון אבסולוטי – הוא מושפע מאוד מהפונט, ולכן אתם עלולים למצוא שפונט אחד נוח לקריאה עם רווח בין שורות של 1.3em, ופונט אחר נוח לקריאה עם רוח של 1.6em.
מרווח בין אותיות
בפיסקאות טקסט מומלץ להישאר עם מרווח רגיל בין אותיות (letter-spacing: 1) כיוון שהוא הנוח ביותר לקריאה, אך כאשר רוצים ליצור נראות דרמטית, ניתן לתת אופי ייחודי לכותרות או קישורים באמצעות מרווח מוגדל בין אותיות.
אורך השורה / כמות המילים בשורה
למה ברוב הבלוגים אזור התוכן מוגבל וצר יחסית? למה לא עושים שימוש בכל רוחב המסך? התשובה היא שקשה מאוד לעקוב אחרי שורות טקסט ארוכות. נסו לקרוא פיסקאות עם 30 מילים בשורה ותראו שהקריאה שלכם איטית יותר ואתם מתאמצים הרבה יותר. כדי שהטקסט יהיה קריא מומלץ לשמור על כמות מילים של 10-15 מילים בשורה. רוחב אזור התוכן, הפונט עצמו וגודל הפונט משפיעים על כמות המילים שנכנסת בשורה. כאן אצלינו באתר רוחב אזור התוכן מוגבל ל-680px ובבמוצע יש 14 מילים בשורה במסך מחשב.
לעיתים בטלפון הנייד נוצרת הבעייה ההפוכה – בגלל שטח המסך הקטן עלולות להיווצר שורות של ארבע-חמש מילים. גם שורות קצרות מידי אינן נוחות לקריאה, ולכן מומלץ לא להשאיר לטקסט הרבה שוליים בתצוגת נייד, ואם יש צורך – גם להקטין מעט את גודל הכתב (כאן ניתן לקרוא עוד על התאמה למובייל).
מרווח בין פסקאות ושימוש בטורים
גם באמצעות מרווחים מדודים בין פיסקאות או אלמנטים של טקסט ניתן ליצור מראה ייחודי. באמצעות טורים ניתן ליצור חוויה נעימה לעין וגם נוחה מאוד לקריאה.
יישור
לימין, לשמאל, ממורכז – לכל בחירה יש השפעה גדולה על התוצאה הסופית. על מנת ליצור מראה עקבי, מומלץ מאוד להחליט על ישור רצוי וליישם אותו באתר כולו. ישור לשני הצדדים יוצר בלוק טקסט שנראה לפעמים מצויין, אך ישור זה אינו עומד בדרישות הנגישות לאנשים עם צרכים מיוחדים, ולכן לא מרבים להשתמש בו.
נראות בטלפון נייד
חשוב להתאים את הטיפוגרפיה גם למסכים הקטנים של הטלפונים הניידים. יש לנו כתבה מיוחדת על עיצוב האתר לטלפונים ניידים.
התאמה בין שפות
עבור אתר רב לשוני חשוב לבחור בפונט שיש לו גם אותיות עבריות וגם אותיות לטיניות. יש פונטים שהם עבריים בלבד, אך יש להם פונטים לועזיים מקבילים המומלצים ע"י יוצרי הפונט. גם זה בסדר.
כמה פונטים צריך באתר?
ברוב האתרים ניתן להסתפק בפונט אחד או בשני פונטים (פונט לכותרות ופונט לטקסט רץ)
עבור כל פונט יש צורך במשקל אחד עד שלושה.
לא מומלץ להשתמש ביותר מידי פונטים ומשקלים באתר אחד מכמה סיבות:
קוהרנטיות – קל לעין להתרגל למראה אחיד. ערבוב של יותר מידי פונטים יוצר תחושת בלגאן.
משקל הדף – ככל שנטען יותר משקלים נשלם יותר במשך טעינת הדף ובכמות הבקשות מהשרת (Requests). אמנם קובצי פונטים אינם נחשבים קבצים כבדים במיוחד, ועדיין מבחינת אופטימיזציה לא מומלץ לטעון כמות משקלים גדולה.
טיפוגרפיה ונגישות אתרים
כאשר אתם מקבלים החלטות טיפוגרפיות שימו לב שאינכם מזניחים את החשיבה על נגישות האתר. אתם יכולים בהחלט לעצב אתר אינטרנט שיהיה שימושי גם עבור אנשים שיש להם מוגבלות קבועה או זמנית (מוגבלות ראייה, שמיעה, מוטוריקה, קוגניציה וכו') – פשוט הקפידו על הדגשים הבאים עבור טיפוגרפיה נגישה:
- גופן – בחרו בגופנים פשוטים. הימנעו מגופני כתב יד או גופנים עם מבנה לא סטנדרטי. גופני ראווה / גופני כותרות הם בעייתיים מאוד בהיבט של הנגשה.
- משקל – בחרו גופנים במשקלים בינוניים. המנעו מגופנים במשקל קיצוני – קל או שחור.
- רוחב – המנעו מגופנים צרים, דחוסים או רחבים במיוחד.
- נטוי – גופנים נטויים הם פחות קריאים ולכן אינם נגישים.
- גודל גופן – בחרו גדלי גופנים שניתנים לקריאה גם ע"י משתמשים עם קושי בראייה.
- גובה שורה – בחרו גובה שורה מתאים. שורות צמודות מידי או רחוקות מידי פוגעות בנגישות הטקסט.
- ניגודיות צבעים – ודאו שהטקסט ניגודי מספיק לעומת הרקע.
- רוחב אזור תוכן – הימנעו משורות טקסט ארוכות. שמרו על כמות מילים של 10-15 מילים בשורה.
- ישור – ישרו את כל הטקסט בהתאם לכיוון הקריאה בשפה. בעברית וערבית – ישור לימין. בשפות לטיניות – ישור לשמאל. הימנעו מישור למרכז ומישור לשני הצדדים.
- מובחנות – ודאו שיש הבדל בין סוגים שונים של טקסט – כותרות, פיסקאות, קישורים – המשתמש צריך להבחין ביניהם בלי שום מאמץ. כדאי לבדל קישורים באמצעות צבע שונה ו\או קו תחתי. הקישור צריך להגיב בעת מעבר עכבר.
- אל תגדירו גודל גופן בסיסי עבור טקסט באתר. השתמשו ביחידות REM כדי להגדיר גדלים של פסקאות, כותרות, טקסטים של כפתורים וכו'.
לסיכום
אין אתר שאין בו טיפוגרפיה. יש רק אתר שלא נעשתה בו חשיבה טיפוגרפית. במאמר זה נגענו במאפייני הטיפוגרפיה, והבאנו דוגמאות למימושים שונים של רעיונות טיפוגרפים באתרים.
קיראו את החלק השני של המאמר, בו אני מפרט את כל המקורות לפונטים בחינם ולפונטים בתשלום, מסביר על סוגי קבצים לעבודה ב-WEB, ומלמד איך להטמיע פונטים באתרי וורדפרס.
