floor-typography-css/src/headings.css

Vanilla CSS normalizer and the extra minimum for an intuitive default CSS for typography and web-apps.

h1, .h1,
h2, .h2,
h3, .h3 {
	font-weight: bold;
}

h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: normal;
}

h1, .h1 {
	--_heading-added-lead: .125;
	--_heading-line-height: calc(
		1 +
		var(--h1-added-lead, var(--_heading-added-lead))
	);
	font-size: calc(
		var(--h1-min-font-size, 1em) *
		(1 + var(--added-lead, .6)) /
		var(--_heading-line-height)
	);
	line-height: var(--_heading-line-height);
}

h2, .h2 {
	--_heading-added-lead: .25;
	--_heading-line-height: calc(
		1 +
		var(--h2-added-lead, var(--_heading-added-lead))
	);
	font-size: calc(
		var(--h2-min-font-size, 1em)
		* (1 + var(--added-lead, .6)) /
		var(--_heading-line-height)
	);
	line-height: var(--_heading-line-height);
}

h3, .h3 {
	--_heading-added-lead: calc(var(--added-lead, .6));
	--_heading-line-height: calc(
		1 +
		var(--h3-added-lead, var(--_heading-added-lead))
	);
	font-size: calc(
		var(--h3-min-font-size, 1em)
		* (1 + var(--added-lead, .6)) /
		var(--_heading-line-height)
	);
	line-height: var(--_heading-line-height);
}

h4, .h4 {
	--_heading-line-height: calc(
		1 +
		var(--h4-added-lead, var(--added-lead, .6))
	);
	font-size: calc(
		var(--h4-min-font-size, 1em)
		* (1 + var(--added-lead, .6)) /
		var(--_heading-line-height)
	);
	line-height: var(--_heading-line-height);
}

h5, .h5 {
	--_heading-line-height: calc(
		1 +
		var(--h5-added-lead, var(--added-lead, .6))
	);
	font-size: calc(
		var(--h5-min-font-size, 1em)
		* (1 + var(--added-lead, .6)) /
		var(--_heading-line-height)
	);
	line-height: var(--_heading-line-height);
}

h6, .h6 {
	--_heading-line-height: calc(
		1 +
		var(--h6-added-lead, var(--added-lead, .6))
	);
	font-size: calc(
		var(--h6-min-font-size, 1em)
		* (1 + var(--added-lead, .6)) /
		var(--_heading-line-height)
	);
	line-height: var(--_heading-line-height);
}