Typography

You can easily adjust font stacks and scale the size of of the entire design system up or down.

Guidelines

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.

Font Families

Kelp uses three font stacks, adapted from Modern Font Stack.

• --font-primary is used for body content, forms, buttons, and most default components.
• --font-secondary is used for headings.
• --font-monospace is used for <code> and <pre> elements.

You can modify them in the kelp.theme cascade layer, or use the Theme Builder tool.

@layer kelp.theme {
	:where(:root) {

		--font-primary: ui-sans-serif, system-ui, sans-serif;
		--font-secondary: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
		--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	
	}
}

Relative Units

Kelp uses em units for everything instead of rem units.

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>

Font Size

The --font-size-base variable defines the base font size in Kelp

The default value is 112.5%, which is 18px in browsers that use the default medium font size.

It’s defined on the html element. Because Kelp uses em units for sizing, adjusting its value scales the margin, padding, and font sizes of your entire site up or down.

The --font-size-code variable sets the size of inline <code> elements, and it’s default value is 0.875em.

You can modify both in the kelp.theme cascade layer, or use the Theme Builder tool.

@layer kelp.theme {
	:where(:root) {

		--font-size-base: 112.5%;
		--font-size-code: 0.875em;
	
	}
}