Typometer

/**
 * Fluid Modular Scale
 *
 * Defines one modular scale across two viewport-bound configurations:
 * `--base-min` and `--ratio-min` at `--vw-min`,
 * `--base-max` and `--ratio-max` at `--vw-max`.
 *
 * The browser continuously interpolates the base and ratio, then derives
 * every scale step from them as the viewport width changes.
 */

@property --100vw {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

html {
	font-size: calc(var(--base) / 16 * 100%);
}

:root {
	--base-min: 18;
	--base-max: 21;
	--ratio-min: 1.333;
	--ratio-max: 1.5;

	/* Viewport sizes: */
	--vw-min: 360;
	--vw-max: 1440;

	/* Unitless viewport width: */
	--100vw: 100vw;
	--w: calc(tan(atan2(var(--100vw), 1px)));

	/* Interpolation: */
	--progress: clamp(
		0, (var(--w) - var(--vw-min)) / (var(--vw-max) - var(--vw-min)), 1
	);
	--base: calc(
		var(--base-min) + (var(--base-max) - var(--base-min)) * var(--progress)
	);
	--ratio: calc(
		var(--ratio-min) + (var(--ratio-max) - var(--ratio-min)) * var(--progress)
	);

	--steps: 3;
	--step: calc(1 / var(--steps));

	--fs-label-1: calc(1rem * pow(var(--ratio), -3 * var(--step)));
	--fs-label-2: calc(1rem * pow(var(--ratio), -2 * var(--step)));
	--fs-label-3: calc(1rem * pow(var(--ratio), -1 * var(--step)));
	--fs-body-1: 1rem;
	--fs-body-2: calc(1rem * pow(var(--ratio), 1 * var(--step)));
	--fs-body-3: calc(1rem * pow(var(--ratio), 2 * var(--step)));
	--fs-accent-1: calc(1rem * pow(var(--ratio), 3 * var(--step)));
	--fs-accent-2: calc(1rem * pow(var(--ratio), 4 * var(--step)));
	--fs-accent-3: calc(1rem * pow(var(--ratio), 5 * var(--step)));
	--fs-heading-1: calc(1rem * pow(var(--ratio), 6 * var(--step)));
	--fs-heading-2: calc(1rem * pow(var(--ratio), 7 * var(--step)));
	--fs-heading-3: calc(1rem * pow(var(--ratio), 8 * var(--step)));
	--fs-heading-4: calc(1rem * pow(var(--ratio), 9 * var(--step)));
	--fs-heading-5: calc(1rem * pow(var(--ratio), 10 * var(--step)));
	--fs-heading-6: calc(1rem * pow(var(--ratio), 11 * var(--step)));
	--fs-heading-7: calc(1rem * pow(var(--ratio), 12 * var(--step)));
	--fs-heading-8: calc(1rem * pow(var(--ratio), 13 * var(--step)));
	--fs-heading-9: calc(1rem * pow(var(--ratio), 14 * var(--step)));
}