רשת 8 נקודות: טיפוגרפיה באינטרנט

טיפוגרפיה באינטרנט מבלבלת. האם אתה יודע את השיטות המומלצות?

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

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

שלושת הארכיטיפים של מערכות טיפוגרפיה

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

אתר שיווק

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

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

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

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

ה- <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. הטיפוגרפיה בדף מחושבת בקפידה כדי לעבוד בכל גודל מסך.

"שימוש במתמטיקה כדי לעשות כיוון אמנות דינמי" - ליי טיילור

אתר בלוג / מידע

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

מאמר בינוני זה הוא דוגמה לחוויה אינטרנטית הבנויה לקריאה לטווח ארוך.

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

מוצר

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

עיצוב החומרים של גוגל הוא שפת עיצוב פופולרית החלה על מקרים רבים לשימוש במוצרים.

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

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

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

יישום טיפוגרפיית האינטרנט - במציאות

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

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

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

המלכודת - Ems, Rems, and Pixel, oh my!

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

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

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

מדוע כל כך הרבה מערכות תכנון מבוססות על גודל יחסי בימינו? התשובה היא "נגישות".

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

השימוש באבני כסף ורכבים באתר / באפליקציה שלך הוא עוצמתי להפליא. ישנם הרבה מקרי שימוש מעניינים מאוד והם צריכים להיות חלק חשוב מערכת הכלים שלך.

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

8pt טיפוגרפיה רשת

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

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

להלן דוגמאות מכמה שמות מוכרים: Google Material, Pivotal, Atlassian, Intuit.

הפניות וקריאה קשורה

  • פרייאנקה גודבול: מסגרת ליצירת מערכת רווחים צפויה והרמונית להעברה מהירה יותר של עיצוב עיצוב
  • ריצ'רד רוטר: האלמנטים של הסגנון הטיפוגרפי המיושמים באינטרנט
  • איאן ייטס: כיצד לבנות קנה מידה טיפוגרפי מודולרי
  • נתן קרטיס: חלל במערכות עיצוב
  • וינסנט דה אוליביירה: צלילה עמוקה CSS: מדדי גופן, גובה קו ויישור אנכי
  • Kezz Bracey: מדוע כדאי להשתמש בפריסות מבוססות Rem

מאמרים קודמים של רשת 8 נקודות:

  1. מבוא למערכת רשת 8 הנקודות
  2. רשת 8 נקודות: גבולות ופריסות
  3. רשת 8 נקודות: קצב אנכי

שאלות:

זה משהו שאני עדיין בוחן. האם יש לך דוגמה טובה לשתף? האם יש לך גישה שונה למערכת טיפוגרפיה 8pt?

אם יש לך מחשבות, השאיר תגובה או פנה לטוויטר.