תוֹכֶן
עיצוב אתרים רספונסיבי ונגישות אתרים הגיעו בגילם, והופיעו אופנים חדשים של הצגת טקסט למשתמשים מקוונים. כתוצאה מכך, בחירת סוגים נגישה חשובה מתמיד.
סוג אינטרנט: קישורים מהירים01. עיצוב גופן
02. הקלד יישום
03. סוג טכני
שפע המידע הנוגע לעיצוב סוגים נגישים, מתודולוגיית יישום וקוד הוא מדהים למדי, אך דבר אחד ברור: קריאות התוכן היא המטרה העיקרית כמעט לכל אתר.
סופר גופנים עבד עם Mencap למחקר, בדיקה ועיצוב גופנים נגישים לבעלי מוגבלויות. הנה כמה מהממצאים שלנו.
01. עיצוב גופן
קריאות מול קריאות
הקריאות קשורה לשאלות כמו: האם אתה יכול לזהות את האות או המילה? האם אתה יכול לפרש ולהבין את המילה הזו? הקריאות עוסקת: עד כמה חווית הקריאה נוחה? עיצוב סוג נגיש הוא קריא וקריא כאחד.
סריף לעומת סאנס
המחקר שלנו עם Mencap מצביע על כך שגופני sans-serif הם הסגנון הנגיש ביותר, מכיוון שהפרטים באותיות מחולקות נחשבים מורכבים על ידי בעלי לקויות קריאה.
לגופנים של Sans יש מבנה פשוט; הם יושבים קרוב יותר לכתב היד המלומד שלנו. צורות ללא מונו ליניארי מוצגות בצורה ברורה ובצורה חזקה יותר בגודל פיקסל קטן, אפילו בסביבות העיבוד הקשות ביותר.
צורות אותיות
בחירת גופן עם איכויות זיהוי אופי חזקות מסייעת לקריאות. בעלי לקויות ראייה יכולים למצוא אותיות מסוימות מבלבלות, ולכן חשוב שצורות האותיות מוגדרות בבירור. עבריינים נפוצים הם 'אני' (עין ההון), 'אני' (עין תחתונה), 'ל' (אל) ו- '1' (אחד). 'C' סגור יכול להיראות כמו 'O'.
דלפק פתוח צורות קריאה מסייעות. השילוב של 'r' ו- 'n' יכול לקרוא כמו 'm'. גם עליות וירידות ארוכות חשובות. הם עוזרים להגדיר צורות מילים חיצוניות שהעין יכולה לסרוק ולפרש במהירות.
פרופורציות גופן
פרופורציות גדולות x וגודל בינוני-רחב נגישות ביותר. גובה x גדול יותר גורם לרוב למכתב לבן גדול יותר באות, מה שיכול לסייע בהגדרה ובהירות. לרוב, סגנונות רוחב מעובה ודחוסים מקודמים כמאפשרים פריסה קולחת ותגובתית יותר, אך חשוב להבין כי על ידי שימוש בגופן מרוכז בו מקום מוגבל (למשל בנייד), אתה עשוי גם להקטין את הנגישות.
רמז
רמזים מתארים את המידה שבה צריך להפעיל או לכבות פיקסלים כדי לשפר את איכות האות בגודל פיקסל ספציפי. למרות שיפורים ברזולוציית המסך, רמז לגופנים הוא עדיין תהליך עיצוב חיוני. רוב היציקה אוטומטית רומזת ומשיגה תוצאות טובות מאוד, אך שמרו על ציפיות: שום כמות של רמזים לא תגרום למשקל כבד להיראות טוב ב 12 פיקסלים.
02. הקלד יישום
גודל חשוב. שים לב שגדלים בפועל יכולים להשתנות מאוד בין הגופנים
מִשׁקָל
קבע היררכיה על ידי הקצאת תפקידים לכל גופן. היררכיה מאפשרת לעין לפרק מידע לחוויה ברורה. השתמש במשקולות פתוחות ובינוניות עבור כותרות משנה וגוף. הגדר מבחן להערכה בפלטפורמות הדפדפן - המשקל יכול להשתנות באופן דרמטי מסביבה אחת לאחרת. אם תרצה, יישם את תערובת ה- Rendering Type כדי לאזן את המראה.
גודל
גודל חשוב. שים לב שכל גופן יושב בקנה מידה אחר בגוף הסוג, והגדלים בפועל יכולים להשתנות מאוד בין הגופנים: 14 פיקסלים בגופן אחד יכולים להיות שווה ערך ל 18 פיקסלים באחרת. הגודל הממוצע לגוף נע בין 14px ל- 16px. ככלל, 16px פלוס נחשב לכלול ביותר. גודל הגופן יכול להשפיע גם על איכות העיבוד. מצא את הנקודות המתוקות המספקות את תוצאות העיבוד הטובות ביותר לפלטפורמות העיקריות שלך.
גובה קו ואורך
תן לסוג מקום לנשום. העין שלך צריכה להיות מסוגל לעקוב משורה אחת לשורה בקלות. הנחיות הנגישות לתוכן באינטרנט (WCAG) ממליצות על גובה שורה של 1.5 להעתקת גוף. הערך, צמצם או הגדל לפי הצורך. סריקת שורות ארוכות של טקסט נבדקת בעיניך. מחקרים מצביעים על כך שאורך השורה המקוון הממוצע נע סביב 70-80 תווים. הגבל שורות לא יותר מ -16 מילים.
צֶבַע
כמו כל האלמנטים החזותיים, סוג חייב להיות בעל ניגודיות מספקת. סוג אפור על רקע לבן יכול להיות קשה לקריאה אם האפרוריות ומשקל הגופן קל מדי. FS ללא כותרת של Fontsmith "מדורג" היטב משקולות שיעזרו למשתמשים לאזן את המראה שלה. סוג לבן על רקע כהה 'יזרח' על המסך ויגרום לו להיראות הדוק יותר, וחלק מהגופנים עשויים לדרוש התאמות של שטח האות.
03. סוג טכני
אסטרטגיות לטעינת גופן
חיבורים איטיים וקבצי גופנים גדולים מאפשרים טעינת טקסט איטית. גודל WOFF יחיד עם ערכת תווים אירופית מלאה יגדל בגודל 36-50KB. יש לשקול את מצבי FOUT (הבזק של טקסט לא מעוצב) או FOIT (הבזק של טקסט בלתי נראה). FOIT הוא ברירת המחדל השולטת בדפדפן ובמונחים אסתטיים FOIT רצוי, אך במונחי נגישות FOUT היא בהחלט הדרך ללכת.
הסיבה לכך היא שרואים תוכן כלשהו עדיף על שום תוכן בכלל. שואף להציג טקסט בגופן חזור עד שכל גופני האינטרנט נטענים, מה שמונע כל שיפוט מתמשך של אלמנטים מרובים בדף. יישום באמצעות Web Font Loader והגדרת קובץ cookie, מכיוון שהדבר ממזער את FOUT בהמשך האתר.
גופני Fallback
הבחירה מוגבלת במיוחד בנייד. טבלת התאימות הניידת של ג'ורדן מור מדגימה את הבעיה.בעת בחירת נפילה, צא למשקלים ופרופורציות דומים. כוונן את מדדי החזרה, כך שיתאימו לגודל הגופן שבחרת. הודיעו על החלטת הבחירה שלכם על ידי כיסוי גופן נגיש על התיקון והשופט.
עיבוד טקסט
השתמש ב- optimiseLegibility כדי לאפשר קארנינג ולשפר את איכות העיבוד. הגדרה זו מאפשרת גם ליגטורות, שאותן תוכלו להשבית במידת הצורך על ידי הגדרת .classname {font-feature-settings: "liga" 0; }.
הגנה על גופנים
נדרש שנים של מאמץ והשקעה כדי לפתח גופן איכותי. זה רק הוגן, בהתחשב בתפקיד החשוב שיש לסוג בכל פרויקטי האינטרנט, שתנקוט בצעדים כדי להגן על ההשקעה בהם. השתמש ב- CORS כדי לפרוס גופנים, וודא שרק לאתרים המותרים יש גישה לקבצים.
אנו שואפים להפוך את הסוג לנגיש ככל שיהיה. עבדנו עם קבוצות שילוט וסביבה כדי ליצור גופן למציאת דרכים מהמאה ה- 21, FS Millbank, במטרה לסייע בניווט בסביבות עמוסות. עם FS ללא כותרת אנו שואפים ליצור רשת קריאה יותר, ולהבטיח שטיפוגרפיה נגישה פתוחה לכל.
מאמר זה פורסם במקור ב מגזין נטו גיליון 286. הירשם כאן.
מאמרים קשורים
- 40 גופני האינטרנט החינמיים הטובים ביותר
- התחל בעבודה עם נגישות לאינטרנט
- 10 כלים חיוניים למעצבי UX פרילנסרים
