Foundation

Typography

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

Type sizes are rem tokens, so they follow the user’s browser font size. Fonts are stacks: load Inter and JetBrains Mono yourself (for example with @fontsource-variable) or replace them in your theme.

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 and small screens 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-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-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--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} />