Typography

Kelp’s typography follows a few basic guidelines…

1. Relative units for everything.
2. All native elements have a margin-block-end by default.
3. The default spacing for elements is equal to their line height: 1.5.

These help create a consistent, cohesive look through the UI without any classes.

Base font size

Kelp defines the base font-size as a percentage on the html element…

html {
	font-size: var(--font-size-base);
}

The --font-size-base CSS variable is set to 112.5% (18px in most browsers).

You can adjust it up or down in the kelp.theme cascade layer, and the entire UI will scale up or down proportionately.

/* Reduce the base font-size to 16px */
@layer kelp.theme {
	:where(:root) {
		--font-size-base: 100%;
	}
}

em units instead of rem

Kelp uses em units for everything.

This allows you to scale things like margins and padding proportionally with font-size changes. It also makes it really easy to adjust the size of all elements inside a parent element.

With em units, instead of doing this…

<div class="callout">
	<h2 class="size-xl">Hello world!</h2>
	<p class="size-xl">How are you today?</p>
	<button class="size-xl">Say hi</button>
</div>

You can do this…

<div class="callout size-xl">
	<h2>Hello world!</h2>
	<p>How are you today?</p>
	<button>Say hi</button>
</div>

And all of the elements inside the .callout, as well as the border radius, padding, and margins, will scale up proportionately.

Unlike rem units, em units will compound, so be mindful not to accidentally nest .size-* classes.

<!-- The <h2> element will get bigger twice -->
<div class="callout size-xl">
	<h2 class="size-2xl">Hello world!</h2>
</div>