Static fonts

Variable fonts

Interesting visual interest

1
2
3
4
5
6
7
8
9
10
11
/* Font in use: Bandeins Strange Variable */
h1 {
  font-variation-settings: "wght" 400, "wdth" 100;
  animation: strange 7s cubic-bezier(0.91, 0.32, 0.43, 1.03) infinite;
}

@keyframes strange {
  50% {
    font-variation-settings: "wght" 200, "wdth" 800;
  }
}

Same font...

1
2
3
4
h1 {
    --heading-spac: 120;
    font-variation-settings: "SPAC" var(--heading-spac);
}

...different design

1
2
3
4
h1 {
    --heading-spac: 100;
   font-variation-settings: "SPAC" var(--heading-spac);        
}

Step 1: Set font size and line height variables

1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
  /* p tag's font size scale values */
  --p-min: 1;
  --p-mid: 1.125;

  /* p tag's line height scale values */
    --p-h-min: 1.2;
    --p-h-mid: 1.4;

  /* breakpoint values */
  --screen-small: 25;
  --screen-medium: 45;
}

Step 3: Scale font size and line height with given breakpoints

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (min-width: 25em) {
  font-size: calc(
    (var(--p-min) * 1em) + (var(--p-max) - var(--p-min)) *
      (
        (100vw - (var(--screen-small) * 1em)) /
          (var(--screen-xlarge) - var(--screen-small))
      )
  );

  line-height: calc(
    (var(--p-h-min) * 1em) + (var(--p-h-max) - var(--p-h-min)) *
      (
        (100vw - (var(--screen-small) * 1em)) /
          (var(--screen-xlarge) - var(--screen-small))
      )
  );
}

Improve reading experince with Optical sizing on small screen

1
2
3
4
5
6
7
8
p {
  --text-opsz: 20;
  font-variation-settings: "opsz" var(--text-opsz);

  @media screen and (min-width: 25em) {
    --text-opsz: 16;
  }
}

Improve contrast on dark mode

1
2
3
4
5
6
7
8
9
10
p {
  --text-GRAD: 0;
  font-variation-settings: "GRAD" var(--text-GRAD);
}

@media (prefers-color-scheme: dark) {
  p {
    --text-GRAD: 0.1;
  }
}