טיפוגרפיה וחווית משתמש

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

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

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

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

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

מקור: wikipedia

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

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

www.pineapplethief.com

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

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

www.jeroenhoman.com

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

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

 

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

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

www.rxbalance.com

www.pulchry.com

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

www.notpretty.com

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

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

thedesigncubicle.com

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

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

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

כדאי להגדיר ב-CSS את הפרמטרים הבסיסיים הבאים עבור אזורי טקסט הניתנים לעריכה על ידי המשתמש:

• אורך מקסימלי של שורה
• ריווח בין מילים
• ריווח בין שורות
• יישור הטקסט

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

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

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

webtypography.net

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

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

תמונת האצבע המפנה לכתבה לקוחה מהאתר http://plentyofcolour.com