_typography.scss

font-family

Hier tragen wir die Schriftfamilien für den Body, die Headings und eventuelle Schriftakzente ein.
Manche Schriften haben einen eigenen Schnitt für italic (Figtree), manche für verschiedene Schriftstärken (DinPro Regular, DinPro Medium). Die global font family tokens müssen entsprechend angepasst werden.

// global font-family tokens
$-ff-base: "Figtree", var(--font-fallback-default);
$-ff-heading: "Figtree", var(--font-fallback-default);
$-ff-accent: "Figtree", var(--font-fallback-default);

// eigener Schriftschnitt für italic, medium/bold, ...
$-ff-italic: "Figtree italic", var(--font-fallback-default);
$-ff-bold: "DinPro-Medium", var(--font-fallback-default);

// contextual font-family tokens
$font-family-body: $-ff-base;
$font-family-heading: $-ff-heading;
$font-family-accent: $-ff-accent;
// wenn vorhanden:
$font-family-italic: $-ff-italic;
$font-family-bold: $-ff-bold;

Die /base/_html-element.scss fragt ab, ob die Variablen vorhanden sind, und verwendet entsprechend die font-family oder font-weight bzw. font-style. Hier muss nichts weiter gemacht werden.

@use 'sass:meta';
@use "../abstracts/" as *;

b,
strong {
  @if meta.variable-exists(font-family-bold) {
    font-family: $font-family-bold;
    font-weight: $font-weight-body;
  } @else {
    font-family: $font-family-body;
    font-weight: $font-weight-bold;
  }
}
i,
em {
  @if meta.variable-exists(font-family-italic) {
    font-family: $font-family-italic;
    font-style: normal;
  } @else {
    font-family: $font-family-body;
    font-style: italic;
  }
}
...
figcaption {
  contain: inline-size; // [2]
  font-size: $font-size-200;
  @if meta.variable-exists(font-family-italic) {
    font-family: $font-family-italic;
    font-style: normal;
  } @else {
    font-family: $font-family-body;
    font-style: italic;
  }
}

Auch in der utilites/_font-families.scss bzw. der utilites/_font-weight.scss sind entsprechende Abfragen enthalten, damit es keine Überraschungen bei der Verwendung der Klassen gibt.

In allen anderen Dateien lohnt sich die Abfrage nicht, dort können einfach die font-family bzw. der font-style als Zweizeiler definiert werden:

.class-bold {
  font-family: $font-family-bold;
  font-weight: $font-weight-body;
}
.class-italic {
  font-family: $font-family-italic;
  font-style: normal;
}

font-weight

Wenn die Schriftstärke nicht durch einen Schriftschnitt abgedeckt ist, werden anschließend die verwendeten Schriftstärken definiert. So viele wie nötig, so wenige wie möglich! Alle nicht verwendeten Stärken werden gelöscht, damit nicht versehentlich eine nicht vorhandene Schriftstärke verwendet wird. Variable Fonts bringen allerdings von Haus aus alle Schriftstärken mit.

// global font-weight tokens
// variable font - font-weight from 100 to 1000
$-fw-300: 300;
$-fw-400: 400;
$-fw-500: 500;
$-fw-600: 600;
$-fw-700: 700;
$-fw-800: 800;
$-fw-900: 900;

// contextual font-weight tokens
$font-weight-body: $-fw-400;
$font-weight-bold: $-fw-600;

font-size

Bei den Schrifgrößen ist zu beachten, dass sich eine Änderung der root-font-size auf die Breakpoints auswirkt. Die Schriftgrößen für hero - h3 müssen natürlich immer an die Schriftart angepasst werden.

// global font-size tokens
// *** WHEN ADDING A FONT SIZE HERE,
// *** ALSO ADD IT TO _utilites.scss
$-fs-200: 0.75rem;
$-fs-300: 0.875rem;
$-fs-400: 1rem;
$-fs-500: 1.125rem;
// clamp between 30rem and 62rem ($breakpoint-mobile-menu)
// h3
$-fs-600: clamp(1.125rem, 1.008rem + 0.391vw, 1.25rem);
// h2
$-fs-700: clamp(1.5rem, 1.031rem + 1.563vw, 2rem);
// h1
$-fs-800: clamp(2rem, 1.063rem + 3.125vw, 3rem);
// hero
$-fs-900: clamp(3rem, 0.188rem + 9.375vw, 6rem);

// contextual font-size tokens
// <small> represents side-comments and small print
// copyright, legal text, ...
$font-size-200: $-fs-200;
$font-size-small: $-fs-200;
$font-size-300: $-fs-300;
$font-size-smaller: $-fs-300;
$font-size-400: $-fs-400;
$font-size-body: $-fs-400;
$font-size-500: $-fs-500;
$font-size-bigger: $-fs-500;

$font-size-600: $-fs-600;
$font-size-h3: $-fs-600;
$font-size-700: $-fs-700;
$font-size-h2: $-fs-700;
$font-size-800: $-fs-800;
$font-size-h1: $-fs-800;
$font-size-900: $-fs-900;
$font-size-hero: $-fs-900;