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

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

Adam Argyle

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

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

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

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

בתהליך ההגדרה

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

<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. משתמש היעד המותאם במאמר הזה מתייחסות לערכת צבעים ולניגודיות, ושניהם יתאים אישית את הצירים האלה כך שיתאימו להעדפה הרצויה של המשתמש.

טוענים את גופן המשתנה באמצעות @font-face API של 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.