Fonts

You can adjust the font stacks used in Kelp, and scale the size of of the entire design system up or down.

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;
	
	}
}

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;
	
	}
}