Typometer

/* Static Scale */

:root {
	--font-size--label-1: 14px;
	--font-size--label-2: 16px;
	--font-size--label-3: 18px;
	--font-size--body-1: 21px;
	--font-size--body-2: 24px;
	--font-size--body-3: 28px;
	--font-size--accent-1: 32px;
	--font-size--accent-2: 36px;
	--font-size--accent-3: 41px;
	--font-size--heading-1: 47px;
	--font-size--heading-2: 54px;
	--font-size--heading-3: 62px;
	--font-size--heading-4: 71px;
	--font-size--heading-5: 81px;
	--font-size--heading-6: 93px;
	--font-size--heading-7: 106px;
	--font-size--heading-8: 122px;
}

/**
 * Fluid Scale
 *
 * Define the minimum and maximum base size and ratio,
 * then let the browser handle the transition. As the
 * viewport grows, every token scales smoothly in between.
 */

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

: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)) * 1px
	);
	--ratio: calc(
		var(--ratio-min) + (var(--ratio-max) - var(--ratio-min)) * var(--progress)
	);

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

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

/**
 * Computed Scale
 *
 * No automatic fluid behavior. Override variables inside
 * @media rules to adapt to different screens.
 */

:root {
	--base: 21px;
	--ratio: 1.5;
	--steps: 3;
	--step: calc(1 / var(--steps));

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

	/* Override the ratio to adjust for mobile screens: */

	@media (width < 768px) {
		--ratio: 1.39;
	}
}