Typography & Interaction

			<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/assets/reset.css" rel="stylesheet">
		<link href="setup.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<section>
			<h2>Line/<wbr>bounding box</h2>
		</section>
		<section>
			<h2 class="precise">Much better!</h2>
		</section>
	</body>
</html>

index.html

			body {
	--base: 1rem;

	display: grid;
	font-family: 'Helvetica', sans-serif;
	gap: calc(2 * var(--base));
	padding: var(--base);
}

section { background-color: gold; }

h2 { font-size: calc(var(--base) * 3); }

setup.css

			h2 {
	/* Just to see things better, and a transparent blue. */
	font-size: calc(var(--base) * 5);
	background-color: hsla(200, 100%, 50%, 33%);
}

.precise {
	--block--start:  -0.2em;  /* Font/line-height-dependent! */
	--block--end:    -0.23em; /* Just adjust until you get it. */
	--inline--start: -0.07em;
	--inline--end:   -0.06em;

	display: flow-root; /* Cinches the `block-size`. */
	inline-size: fit-content; /* Cinches the `inline-size`. */
	margin-inline-end: var(--inline--end);
	margin-inline-start: var(--inline--start);

	/* The `&` (nested selector) here just means `.precise`. */
	&::before,
	&::after {
		content: ''; /* Gives us “empty” pseudos to work with. */
		display: block;
		visibility: hidden; /* We don’t need to see it or click it. */
	}

	&::before { margin-block-start: var(--block--start); }
	&::after { margin-block-end: var(--block--start); }
}

style.css