Type

Both headings and paragraph text use Museo Sans. Headings, buttons and bolded text use the 900 weight while paragraph and other elements use the 500 weight.

The font sizing is based on the concept of Fluid Type. It uses 16px as the base on mobile screens and 18px as the base on desktop screens (1240px and larger):

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
  --step--2: clamp(0.69rem, calc(0.66rem + 0.15vw), 0.78rem);
  --step--1: clamp(0.83rem, calc(0.8rem + 0.18vw), 0.94rem);
  --step-09: calc(0.9 * var(--step-0));
  --step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --step-1: clamp(1.2rem, calc(1.15rem + 0.26vw), 1.35rem);
  --step-2: clamp(1.44rem, calc(1.38rem + 0.31vw), 1.62rem);
  --step-3: clamp(1.73rem, calc(1.65rem + 0.38vw), 1.94rem);
  --step-4: clamp(2.07rem, calc(1.98rem + 0.45vw), 2.33rem);
  --step-5: clamp(2.49rem, calc(2.38rem + 0.54vw), 2.8rem);
}

Using this, we can set

html {
  font-size: 16px;
}
body {
  font-size: var(--step-0);
}
/* additional styles in html and body removed for clarity */

See the Type component for examples.