Foundation

Typography

Font families and the type scale for headings, body text and UI labels.

Type sizes are rem tokens multiplied by --ca-font-scale, so they follow the user’s browser font size. Fonts are stacks: the defaults name Inter and JetBrains Mono but the kit does not load them, so load them yourself (for example with @fontsource-variable) or replace them in your theme. --ca-font-display defaults to --ca-font-sans.

import { defineTheme } from "@codeatlasdev/ui";

export const theme = defineTheme({
  fonts: { body: "Geist, system-ui, sans-serif", mono: "Geist Mono, monospace", display: "Fraunces, serif" },
});

fonts.body, fonts.mono and fonts.display set --ca-font-sans, --ca-font-mono and --ca-font-display. See Theming.

Text-entry controls use --ca-input-font-size, which is raised to at least 16px on touch devices and below 900px so iOS Safari does not zoom into focused fields. See Mobile.

Font families

--ca-font-sans

The quick brown fox jumps over the lazy dog

--ca-font-display

Headings use the display family

--ca-font-mono

const answer = 42;

Code

<div class="families">
	<div>
		<p class="label">--ca-font-sans</p>
		<p class="sample sample--sans">The quick brown fox jumps over the lazy dog</p>
	</div>
	<div>
		<p class="label">--ca-font-display</p>
		<p class="sample sample--display">Headings use the display family</p>
	</div>
	<div>
		<p class="label">--ca-font-mono</p>
		<p class="sample sample--mono">const answer = 42;</p>
	</div>
</div>

<style>
	.families {
		display: flex;
		flex-direction: column;
		gap: var(--ca-space-5);
		width: 100%;
	}
	.label {
		margin: 0 0 var(--ca-space-1);
		font-family: var(--ca-font-mono);
		font-size: var(--ca-font-size-caption);
		color: var(--ca-text-hint);
	}
	.sample {
		margin: 0;
		font-size: var(--ca-font-size-body1);
		color: var(--ca-text-primary);
	}
	.sample--sans { font-family: var(--ca-font-sans); }
	.sample--display { font-family: var(--ca-font-display); }
	.sample--mono { font-family: var(--ca-font-mono); }
</style>

Heading scale

--ca-font-size-h1 to h6.

--ca-font-size-h1 Heading 1: The quick brown fox

--ca-font-size-h2 Heading 2: The quick brown fox

--ca-font-size-h3 Heading 3: The quick brown fox

--ca-font-size-h4 Heading 4: The quick brown fox

--ca-font-size-h5 Heading 5: The quick brown fox

--ca-font-size-h6 Heading 6: The quick brown fox

Code

<script lang="ts">
	import TypeRows from "./TypeRows.svelte";
	const rows = [1, 2, 3, 4, 5, 6].map((n) => ({ label: `Heading ${n}`, token: `--ca-font-size-h${n}` }));
</script>

<TypeRows {rows} heading />

Body and UI scale

Body, caption, label and button sizes, plus the micro and nano steps used by badges.

--ca-font-size-body1 Body 1: The quick brown fox jumps over the lazy dog

--ca-font-size-body2 Body 2: The quick brown fox jumps over the lazy dog

--ca-font-size-caption Caption: The quick brown fox jumps over the lazy dog

--ca-font-size-label Label: The quick brown fox jumps over the lazy dog

--ca-font-size-button Button: The quick brown fox jumps over the lazy dog

--ca-font-size-micro Micro: The quick brown fox jumps over the lazy dog

--ca-font-size-nano Nano: The quick brown fox jumps over the lazy dog

Code

<script lang="ts">
	import TypeRows from "./TypeRows.svelte";
	const rows = [
		{ label: "Body 1", token: "--ca-font-size-body1" },
		{ label: "Body 2", token: "--ca-font-size-body2" },
		{ label: "Caption", token: "--ca-font-size-caption" },
		{ label: "Label", token: "--ca-font-size-label" },
		{ label: "Button", token: "--ca-font-size-button" },
		{ label: "Micro", token: "--ca-font-size-micro" },
		{ label: "Nano", token: "--ca-font-size-nano" },
	];
</script>

<TypeRows {rows} />