עשר "מכות" טיפוגרפיות

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

1. מתיחת אותיות

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

אותיות מתוחות
אותיות מתוחות - מתיחת אותיות מפירה את הפרופורציות המקוריות של האות

2. שימוש באריאל במדיה מודפסת

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

3. קומיק סנס

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

מודעה הקוראת להחרים את קומיק סנס
מודעה הקוראת להחרים את קומיק סנס

4. טיימז ניו רומן באתר בעברית

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

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

5. יישור טקסט לשני הצדדים באתר

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

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

6. שמירת טקסט כג׳ייפג

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

גשם של פיקסלים אפורים מעל המילה "האקדמית"
הלבן שברקע הטקסט שנשמר כתמונת ג׳ייפג אינו לבן לגמרי - יש בו פיקסלים אפורים

7. אין מספיק קונטרסט בין טקסט לרקע

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

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

8. סגנונות מתנגשים בין פונט עברי לפונט לועזי

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

חוסר התאמה בין פונט עברי (טיפוגרף) ללועזי (הלווטיקה)
חוסר התאמה בין פונט עברי (טיפוגרף) ללועזי (הלווטיקה)

9. שימוש בפונטים חינמיים

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

שימוש בפונט חינמי משווה לאתר מראה ילדותי ולא מקצועי
שימוש בפונט חינמי משווה לאתר מראה חובבני

10. קו מודגש מסביב לאותיות (stroke)

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

שימוש ב-stroke מסביב לאותיות
שימוש ב-stroke מסביב לאותיות

תגיות:

תגובה אחת