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

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

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

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

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

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

מהו פונט?

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

צורות שונות לאות אלף
הפונטים: מגוון צורות לאות העברית "אלף".

אבחנה בין פונטי סנס וסנס סריף

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

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

סריף, סנס סריף, סלאב סריף

חלוקת פונטים לפי תיפקוד וסגנון

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

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

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

יש פונטים שהיוצר שלהם יצר להם גם גרסה נוספת – צרה או דחוסה (מגוון המינוחים מבלבל מעט: Narrow, Condensed, Compressed – כל אלו נועדו לתאר פונטים ברמת דחיסות כזו או אחרת). הדחיסות מתבטאת בכך שכל אות תופסת פחות שטח בציר X. לפונטים צרים (לא להתבלבל עם פונטים במשקל דק – כאן איננו עוסקים במשקל) יש סגנון ייחודי משלהם אשר הופך אותם לפופולארים מאוד. עם זאת, פונטים דחוסים אינם מומלצים עבור פיסקאות, כיוון שהם פחות קריאים מפונטים רגילים. למה פונטים צרים ודחוסים כן מומלצים? בעיקר לכותרות, הנעות לפעולה וכל מקום שרוצים ליצור בו תחושה "קצת אחרת": כאשר משתמשים בהם בצורה שקולה, במשקל שאינו דק מידי ועבור כותרות – יש לפונטים דחוסים ערך עיצובי רב.

השוואה בין פונטים רגילים למקביליהם הצרים והדחוסים

מהו משקל?

משקל הוא צורה אחת של הפונט. פונטים רבים מגיעים עם משקל אחד בלבד או שני משקלים (רגיל ומודגש), אך במשפחות פונטים מודרניות ניתן למצוא לעיתים 9 משקלים שונים ואף יותר, החל מדק מאוד (מקבל ב-WEB לרוב את המספר המייצג 100 ובמילים Ultra Light) ועד לפונט כבד מאוד (מקבל ב-WEB לרוב את המספר המייצג 900 ובמילים Ultra Black). בכותרות קצרות ניתן ליצור מראה דרמטי באמצעות שימוש במשקלים קלים מאוד או כבדים במיוחד, אך על מנת שטקסט רץ יהיה נוח לקריאה יש צורך לבחור במשקל רגיל – 400 או 500. 

מגוון משקלים בפונט אלמוני חדש
הפונט "אלמוני חדש" של הטיפוגרף אברהם קורנפלד (אאא)

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

כתב ענק

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

2016.oneis.us
sidebearings.com
culture.basicagency.com
www.builtbybuilt.com
florentbiffi.com
www.dragonrouge.com

צבע הכתב

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

גובה שורה

המרווח בין השורות משפיע מאוד על קריאות הטקסט. ככלל, בפיסקאות מומלץ להגדיר גובה שורה של 1.5em (אפשר גם מעט יותר או מעט פחות בהתאם לעיצוב הרצוי). בכותרות קצרות חשוב לשים לב שלא נקבע גובה שורה גדול, כדי לא ליצור מרווחים מיותרים. לרוב 1em יספיק. גובה שורה אינו נתון אבסולוטי – הוא מושפע מאוד מהפונט, ולכן אתם עלולים למצוא שפונט אחד נוח לקריאה עם רווח בין שורות של 1.3em, ופונט אחר נוח לקריאה עם רוח של 1.6em.

מרווח בין אותיות

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

אורך השורה / כמות המילים בשורה

למה ברוב הבלוגים אזור התוכן מוגבל וצר יחסית? למה לא עושים שימוש בכל רוחב המסך? התשובה היא שקשה מאוד לעקוב אחרי שורות טקסט ארוכות. נסו לקרוא פיסקאות עם 30 מילים בשורה ותראו שהקריאה שלכם איטית יותר ואתם מתאמצים הרבה יותר. כדי שהטקסט יהיה קריא מומלץ לשמור על כמות מילים של 10-15 מילים בשורה. רוחב אזור התוכן, הפונט עצמו וגודל הפונט משפיעים על כמות המילים שנכנסת בשורה. כאן אצלינו באתר רוחב אזור התוכן מוגבל ל-680px ובבמוצע יש 14 מילים בשורה במסך מחשב.

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

מרווח בין פסקאות ושימוש בטורים

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

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

יישור

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

נראות בטלפון נייד

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

התאמה בין שפות

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

כמה פונטים צריך באתר?

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

לסיכום

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

שיתוף

Share on facebook
Share on whatsapp
Share on linkedin

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

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