התאמת הטיפוגרפיה להעדפות המשתמש באמצעות שירות CSS

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

Adam Argyle

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

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

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

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

תהליך ההגדרה

כדי לעזור לך להתמקד בערכים של הגדרות ה-CSS והגופן, אבל גם לתת לנו משהו לקרוא ולראות, הנה ה-Markup שבו אפשר להשתמש כדי לראות תצוגה מקדימה של העבודה:

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

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

לסיום, כדי למרכז את ההדגמה ולתמוך בה, קצת CSS:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

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

טעינת הגופן המשתנה Roboto Flex

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

טוענים את הגופן המשתנה באמצעות ה-API @font-face של CSS:

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

בשלב הבא, מחילים את הגופן על תוכן כלשהו. הקוד הבא ב-CSS מחיל את זה על הכול:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

מאפיינים מותאמים אישית של CSS ושאילתות מדיה – שילוב מנצח

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

הגדרות כשאין העדפות (ברירת מחדל)

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

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

ההגדרות כשהעדפה היא ניגודיות גבוהה

למשתמשים שציינו שהם מעדיפים ניגודיות גבוהה בהגדרות המערכת שלהם, צריך להגדיל את הערך של --base-weight מ-400 ל-700:

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

עכשיו יש יותר ניגודיות בזמן הקריאה.

ההגדרות כשהעדפה היא לניגודיות נמוכה

למשתמשים שציינו העדפה לניגודיות נמוכה בהגדרות המערכת, צריך להקטין את הערך של --base-weight מ-400 ל-200:

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

עכשיו יש פחות ניגודיות בזמן הקריאה.

ההגדרות כשההעדפה היא מצב כהה

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

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

הכול ביחד

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

או, לצורך הנאה, כולם יחד עם עיצוב בתוך עיצוב ב-CSS:

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

התוצאה היא חוויית קריאה שבה הגופן מותאם להעדפות של המשתמש. קוד המקור המלא זמין בהמשך ב-Codepen.