Type lab↗

Tune a modular scale, try the original typefaces, edit the specimen, and export a responsive CSS system.

--text-xs10.2px

Make room for good ideas.

--text-sm12.8px

Make room for good ideas.

--text-base16.0px

Make room for good ideas.

--text-md15.5—20.0px

Make room for good ideas.

--text-lg18.8—25.0px

Make room for good ideas.

--text-xl22.7—31.3px

Make room for good ideas.

--text-2xl27.3—39.1px

Make room for good ideas.

--text-3xl33.0—48.8px

Make room for good ideas.

--text-4xl39.7—61.0px

Make room for good ideas.

Inspect generated CSS +

:root {
  --text-xs: 0.6400rem;
  --text-sm: 0.8000rem;
  --text-base: 1.0000rem;
  --text-md: clamp(0.9688rem, 0.8750rem + 0.4167vw, 1.2500rem);
  --text-lg: clamp(1.1719rem, 1.0417rem + 0.5787vw, 1.5625rem);
  --text-xl: clamp(1.4160rem, 1.2370rem + 0.7957vw, 1.9531rem);
  --text-2xl: clamp(1.7090rem, 1.4648rem + 1.0851vw, 2.4414rem);
  --text-3xl: clamp(2.0599rem, 1.7293rem + 1.4694vw, 3.0518rem);
  --text-4xl: clamp(2.4796rem, 2.0345rem + 1.9780vw, 3.8147rem);
}

body { font-family: "PP Neue Machina", sans-serif; }

A look under the surface

Useful by design.
Curious by nature.

A modular scale multiplies a base size by a fixed ratio. Fluid CSS interpolates between 360px and 1440px viewports. Rem units retain the user’s font-size preferences. Font files are not included in the export.

size = base × ratio ^ step
font-size: clamp(minimum, intercept + slope × 1vw, maximum)