נקטו זהירות בגודל הפונטים

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

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

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

השתמשו ב-CSS במקום בתגית font

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

שימוש נכון בתכונות הפונט ב-CSS

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

גודל: כבדו את העדפות המשתמשים, והימנעו מפונט קטן לתוכן

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

יחידות: אל תשתמשו ביחידות אורך מוחלטות עבור תצוגת המסך

• אל תגדירו את ה-font-size ב-pt, או ביחידות אורך מוחלטות אחרות עבור גיליונות סגנון של מסך. הם אינם מוצגים באופן אחיד בכל הפלטפורמות, והתקן הגלישה (לדוגמה, דפדפן) אינו יכול לשנות של גודלם. השתמשו ביחידות כאלה לסגנונות של מדיה עם תכונות פיזיות קבועות או ידועות (לדוגמה, דפוס).
• השתמשו ביחידות אורך יחסיות, כמו אחוזים או em (טוב יותר).
• טוב מכך – אם הוגדר גודל פונט בסיסי למסמך, השתמשו בגודל מוחלט ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) או בגודל יחסי ([ larger | smaller ]) כשאתם מגדירים את גודל הפונט לאלמנט מסוים בתוך המסמך.
  

משפחת הפונטים הקריאים

אם אתם משתמשים ב-font-size קטן, העדיפו font-family (משפחת פונטים) קריאה עם יחס גודל אות (aspect value) גבוה (ראו את הסעיף על font-size-adjust במפרט ה-CSS2 המסביר את יחס גודל האות). סביר יותר שמשפחת פונטים זו תהיה קריאה בגדלים קטנים כאלה.

קריאה נוספת

כמה מהעצות כאן שונות משלנו. כפי שאמר ברט בוס בעקבות קאטו, "Corpus 1em, nihil minor".

• פונטים, במפרט ה-CSS2 של W3C.
• מה לא נכון באלמנט ה-FONT? מאת וורן סטיל.
• הגודל קובע, מאת טוד פארנר.
• קמפיין האות הגדולה של לייטהאוס אינטרנשונל.
• יצירת טקסט קריא: עיצוב עבור אנשים עם ליקויי ראייה, מאת אריס ארדיטי.

על ה"טיפים להבטחת איכות"

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

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

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