clamp.css

clamp.css

:is(body, body *) {
	&,
	&::before,
	&::after {
		--font-size-clamp-min: calc(var(--font-size-min) * pow(var(--font-size-ratio-min), var(--font-size-level)));
		--font-size-clamp-max: calc(var(--font-size-max) * pow(var(--font-size-ratio-max), var(--font-size-level)));
		--font-size-clamp-preferred: calc(
			(var(--font-size-clamp-max) - var(--font-size-clamp-min)) / (var(--layout-width-max) - var(--layout-width-min))
		);
		--font-size-clamp: clamp(
			var(--font-size-clamp-min) * var(--rem-ratio),
			(var(--font-size-clamp-min) * var(--rem-ratio)) -
				(var(--font-size-clamp-preferred) * var(--layout-width-min) * var(--rem-ratio)) +
				(var(--font-size-clamp-preferred) * var(--clamp-variable-unit)),
			var(--font-size-clamp-max) * var(--rem-ratio)
		);

		font-size: var(--font-size-clamp);
	}
}

utilities.css

.text-2xl {
	--font-size-level: 4;
}

.text-xl {
	--font-size-level: 3;
}

.text-lg {
	--font-size-level: 2;
}

.text-md {
	--font-size-level: 1;
}

.text-base {
	--font-size-level: 0;
}

.text-sm {
	--font-size-level: -1;
}

.text-xs {
	--font-size-level: -2;
}

var.css

/* Define the viewport width (in pixels) */
@property --layout-width-min {
	syntax: '<integer>';
	inherits: false;
	initial-value: 375;
}

@property --layout-width-max {
	syntax: '<integer>';
	inherits: false;
	initial-value: 1280;
}

/* Font Size */
@property --font-size-base {
	syntax: '<integer>';
	inherits: false;
	initial-value: 16;
}

@property --font-size-min {
	syntax: '<integer>';
	inherits: false;
	initial-value: 14;
}

@property --font-size-max {
	syntax: '<integer>';
	inherits: false;
	initial-value: 16;
}

@property --font-size-ratio-min {
	syntax: '<number>';
	inherits: false;
	initial-value: 1.125;
}

@property --font-size-ratio-max {
	syntax: '<number>';
	inherits: false;
	initial-value: 1.2;
}

@property --font-size-level {
	syntax: '<integer>';
	inherits: false;
	initial-value: 0;
}

@property --clamp-variable-unit {
	syntax: '<length>';
	inherits: false;
	initial-value: 100dvi;
}

:root {
	--rem-ratio: calc(1rem / var(--font-size-base));
	--em-ratio: calc(1em / var(--font-size-base));
}