יש הגדרה שכמעט אף אחד לא יודע עליה, ומי שכן משתמש בה בדרך כלל צריך אותה: הגדלת גודל הטקסט בהגדרות הדפדפן. לא זום על העמוד, אלא הגדרה שאומרת “הטקסט בכל האתרים גדול יותר”.
מי שהגדיר אותה, ואז נכנס לרוב האתרים בישראל, לא רואה שום שינוי.
הסיבה היא יחידת מידה אחת
כשמפתח מגדיר גודל טקסט, יש לו שתי אפשרויות עיקריות.
יחידה קבועה, פיקסלים. זו אמירה מוחלטת: הטקסט הזה יהיה בגודל הזה, נקודה. היא דורסת בשקט את ההעדפה של המשתמש.
יחידה יחסית. זו אמירה יחסית: הטקסט הזה יהיה פי כך וכך מגודל הבסיס. וגודל הבסיס הוא בדיוק ההגדרה שהמשתמש קבע בדפדפן שלו.
ההבדל בקוד הוא תו אחד. ההבדל למי שהגדיל את הטקסט הוא בין אתר שהוא יכול לקרוא לבין אתר שהוא לא.
זו הסיבה שבכל אתר שאנחנו בונים כל גודל טקסט מוגדר ביחידה יחסית, בלי יוצא מן הכלל, וזה נבדק אוטומטית בכל בנייה. לא כי זה אלגנטי, אלא כי זה נופל בשקט: אף אחד לא מתלונן, הוא פשוט מוותר על האתר.
ומה התקן אומר
הקריטריון הרלוונטי דורש שאפשר יהיה להגדיל טקסט עד פי שניים בלי שתוכן או פונקציונליות ילכו לאיבוד, וזו דרישה ברמה המחייבת.
שימו לב שהדרישה היא לא רק “שהטקסט יגדל”. היא גם שבהגדלה כלום לא נשבר: טקסט לא נחתך באמצע, כפתור לא יוצא מהמסך, ושתי מילים לא מכסות אחת את השנייה. זו בדיקה שלוקחת חצי דקה ואפשר לעשות אותה עכשיו: הגדילו את העמוד ל-200 אחוז ותראו מה קורה.
המלכודת שדווקא מגיעה מעיצוב טוב
יש טכניקה מודרנית ונחמדה שמגדילה את הפונט בהדרגה ככל שהמסך רחב יותר, במקום קפיצות בין גדלים. היא נותנת תוצאה חלקה ומקצועית.
ויש לה מלכודת: אם הנוסחה נשענת רק על רוחב המסך, היא מנתקת את הטקסט מהעדפת המשתמש לגמרי. כלומר דווקא הפתרון המתקדם מבטל את כל היתרון של היחידה היחסית, ומחזיר אותנו למצב שבו הגדלת הטקסט בדפדפן לא עושה כלום.
הפתרון פשוט: הנוסחה חייבת לכלול גם רכיב יחסי, ולא רק את רוחב המסך. אנחנו בודקים את זה אוטומטית, כי זו טעות שנראית מצוין בכל בדיקה ויזואלית.
ומה שחשוב יותר מגודל האות
בסבב טיפוגרפיה שעשינו באתר של לקוחה גילינו משהו שחוזר כמעט בכל אתר: הבעיה לא הייתה גודל הפונט אלא אורך השורה.
הטווח הנוח לקריאה הוא בערך 45 עד 75 תווים בשורה. באתר ההוא היו 106. הגדלת הפונט לבדה הייתה מורידה אותנו ל-87, כלומר עדיין רחוק. מה שפתר את זה היה לצמצם את רוחב העמודה במקביל.
הסיבה פשוטה: כשהשורה ארוכה מדי, העין צריכה למצוא מחדש את תחילת השורה הבאה בכל מעבר, וזה מתיש. זה לא נראה כמו בעיה בצילום מסך, וזה מורגש היטב אחרי פסקה שלישית.
ועוד דבר שכמעט תמיד מפספסים
טקסט בדסקטופ לא אמור להיות קטן מטקסט בנייד. זה נשמע הפוך מהאינטואיציה, והסיבה פיזית: במחשב היושבים במרחק של כ-50 עד 70 סנטימטרים מהמסך, ובטלפון כ-30 עד 40. אותו גודל אות נראה קטן יותר במחשב.
סבבי נגישות נוטים להגדיל את הנייד ולהשאיר את הדסקטופ מאחור, בין היתר כי בודקים במסך גדול ורואים המון טקסט ומניחים שהכול בסדר.
ועוד שתי יחידות ששווה להכיר
גובה שורה בלי יחידה. זה נשמע כמו פרט טכני זניח, והוא לא. כשמגדירים את המרווח בין השורות כמספר יחסי בלי יחידה, כל אלמנט מחשב אותו מחדש לפי גודל הפונט שלו. כשמגדירים אותו עם יחידה, הערך המחושב יורש כלפי מטה, ופסקה עם פונט גדול בתוך אזור עם פונט קטן מקבלת שורות חנוקות. זו טעות שנראית בסדר בכותרת ומורגשת רק בפסקה.
גובה סקשן בטלפון. יחידה שמתייחסת לגובה החלון מחושבת בנייד לפי מצב שבו שורת הכתובת של הדפדפן מוסתרת. התוצאה היא סקשן שגבוה מהמסך וקופץ תוך כדי גלילה. יש יחידה חדשה שמתייחסת לגובה האמיתי, וכדאי להשתמש בה.
ומה שקל לפספס בבדיקה עצמה
כשמודדים אם משהו נשבר בהגדלה, קל למדוד בשני רוחבי מסך ולהסיק שהכול תקין. בטיפוגרפיה שמשתנה בהדרגה זה בדיוק לא מספיק, כי הבעיה מתרחשת בין הרוחבים ולא בקצוות. בסבב שעשינו מדידה בשני רוחבים החזירה “אפס בעיות”, ובדיקה בין הרוחבים גילתה עשרים ושלושה גדלים שדווקא הוקטנו.
שלוש בדיקות, פחות מחמש דקות
הגדילו את הדפדפן ל-200 אחוז ועברו על העמוד הראשי. חפשו טקסט שנחתך, כפתור שיצא מהמסך ומילים שמכסות זו את זו.
ספרו תווים בשורה בפסקה ארוכה. אם יצא הרבה מעל 75, העמודה רחבה מדי וזה מתיש לקריאה גם אם הפונט בגודל תקין.
פתחו את אותו עמוד בטלפון ובמחשב זה לצד זה. אם הטקסט במחשב נראה קטן יותר, כנראה הוא באמת קטן יותר, וזה הכיוון ההפוך מהנכון.
ולמה זה לא נופל אף פעם בבדיקה רגילה
הדבר המשותף לכל מה שתואר כאן הוא שאף אחד מהם לא נראה כמו תקלה. האתר נטען, העיצוב שלם, הטקסט קריא לחלוטין למי שבודק אותו על מסך גדול בהגדרות ברירת מחדל.
מי שכן פוגש את הבעיה הוא אדם עם הגדרה שונה, והוא לא כותב לכם על זה. הוא לא יודע שהאתר שלכם מתעלם מההעדפה שלו, הוא פשוט חווה אותו כפחות נוח מאתרים אחרים ועובר הלאה.
זו הסיבה שאצלנו זה נבדק אוטומטית בכל בנייה ולא בסבב תקופתי. תקלה שאף אחד לא מתלונן עליה היא בדיוק סוג התקלה שנשארת שנים.
לסיכום
מי שהגדיל טקסט בדפדפן עשה את זה כי הוא צריך. אתר שמתעלם מזה לא נראה שבור, הוא פשוט מאבד את האדם הזה בשקט.
שלוש בדיקות שאפשר לעשות היום: להגדיל את הדפדפן ל-200 אחוז ולראות מה נחתך, לספור כמה תווים יש בשורה בפסקה ארוכה, ולהשוות את גודל הטקסט בדסקטופ מול הטלפון. שלושתן לוקחות פחות מחמש דקות ביחד.
חשוב לומר: כל האמור כאן הוא מידע כללי ולא ייעוץ משפטי.
רוצים שנבדוק את זה על האתר שלכם? בואו נדבר ↗