Typografie mit CSS an die Präferenzen der Nutzenden anpassen

Eine Methode, um eine Schriftart an die Anforderungen der Nutzenden anzupassen. damit sie Ihre Inhalte möglichst gut lesen können.

Adam Argyle

Es war eine aufregende Zeit für Nutzende, die Nutzenden in den Designprozess Designschaffenden und Entwickelnden. So können Nutzer direkt loslegen konsumierenden Inhalten, sind ihre Präferenzen umfassend in das Designergebnis integriert.

In diesem Blogpost geht es um die Verwendung von CSS-Medienabfragen mit einer variablen Schriftart, noch weiter zu verbessern. Schriftgrad und -stärke können angepasst werden. mit font-variation-settings, wodurch sich Microtuning je nach Präferenzen und Kontexte, wie z. B. die Präferenz für den dunklen Modus oder den hohen Kontrast. Wir können und passen Sie eine variable Schriftart an die jeweilige Nutzererfahrung an.

• Der dunkle Modus hat eine etwas geringere Farbabstufung.
• Bei einem hohen Kontrast wird die Schrift kräftiger.
• Bei geringer Kontrast wird eine dünnere Schrift verwendet.

Hier erfahren Sie mehr über den CSS-Code und die variable Schriftart, diesen bedeutsamen Moment!

Einrichtung wird durchgeführt

Damit wir uns auf die Werte der Einstellungen für CSS und Schriftvariationen konzentrieren können, erhalten wir aber auch etwas zu lesen und zu sehen ist, könnt ihr mit dem folgenden Markup eine Vorschau eures Werks anzeigen:

<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>

Wird kein CSS hinzugefügt, wird die Schriftgröße automatisch an die Nutzereinstellungen angepasst. Dieses Video aus einer anderen Demo zeigt, wie die font-size-Einstellung in Pixeln alle Nutzereinstellungen unterdrücken und warum Sie die Schriftgröße in Rems festlegen sollten:

Zum Schluss noch ein wenig CSS, um die Demo zu zentrieren und zu unterstützen:

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

  h1 {
    text-wrap: balance;
  }
}

Mit diesem Demo-Setup können Sie mit dem Testen und Implementieren dieser praktischen Typografie-UX beginnen .

Schriftart der Roboto Flex-Variablen laden

Die adaptive Strategie hängt von einer variablen Anpassungen, insbesondere GRAD und wght. Der adaptive Zielnutzer die Präferenzen in diesem Artikel für Farbschema und Kontrast sind, die beide werden diese Achsen an die Anforderungen der Nutzenden angepasst.

Laden Sie die Schriftart der Variablen mit der CSS API @font-face:

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

Als Nächstes wenden Sie die Schriftart auf einige Inhalte an. Sie wird vom folgenden CSS-Code angewendet für: alles:

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

Benutzerdefinierte CSS-Eigenschaften und Medienabfragen mit Erfolg

Sobald die Schriftart geladen ist, können Sie Nutzereinstellungen abfragen und die Variable Schriftarteinstellungen anpassen.

Einstellungen, wenn keine Einstellungen vorhanden sind (Standardeinstellung)

Die folgenden Anfangsstile sind die Standardstile oder eine andere Darstellungsform. die Stile für Nutzende ganz ohne Vorlieben.

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

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

Einstellungen, wenn hoher Kontrast gewünscht ist

Für Nutzer, die in ihrem System einen hohen Kontrast bevorzugen Einstellungen den --base-weight-Wert von 400 auf 700 erhöhen:

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

Jetzt gibt es beim Lesen mehr Kontrast.

Einstellungen mit niedrigem Kontrast

Für Nutzer, die in ihrem System einen geringen Kontrast angegeben haben Einstellungen, verringern Sie den --base-weight-Wert von 400 auf 200:

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

Jetzt gibt es beim Lesen weniger Kontrast.

Einstellungen, wenn der dunkle Modus bevorzugt wird

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

Die Wahrnehmung von Helligkeit bei Dunkelheit und Dunkelheit bei Licht berücksichtigt.

Alles unter einem Dach

@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;
    }
  }
}

Oder Sie nutzen CSS-Verschachtelungen, um die Arbeit zu erledigen:

@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 }
  }
}

Das Ergebnis ist ein Leseerlebnis, bei dem die Schriftart an die Einstellungen. Den vollständigen Quellcode finden Sie unten im Codepen.