2025.05.29

Systemic Typography

Approaches to typographic implementations inside design systems.

• Use as classes – or event data attribs if you want – on native elements
• Also on custom components
• Map component prop variations to the classes as well
• Core system and extentions

// CSS Only Typography
:root {
	--text-scale-1: var(--some-value);
	--text-scale-2: var(--some-value);
	--text-scale-3: var(--some-value);
	--text-scale-4: var(--some-value);
}

// global.css
@layer type {
	.headline {
		font-size: var(--text-scale-3);
		…
	}
	.subhead {
		font-size: var(--text-scale-2);
		…
	}
	.body {
		font-size: var(--text-scale-1);
		…
	}
}

// local.css
@layer type {
	.headline {
		font-size: var(--text-scale-4);
		…
	}
	.subhead {
		font-size: var(--text-scale-3);
		…
	}
	.subsubhead {
		font-size: var(--text-scale-2);
		…
	}
	.body {
		font-size: var(--text-scale-1);
		…
	}
}

// Tailwind Only Typography

// global.css
@layer type {
	.headline {
		@apply font-size-300;
		@apply font-weight-400;
		@apply leading-tight;
		@apply tracking-loose;
		@apply text-color-off-black;
	}
	.subhead {
		@apply font-size-200;
		@apply font-weight-600;
		@apply leading-tight;
		@apply text-color-off-black;
	}
}

// local.css
@layer type {
	.headline {
		@apply font-size-600;
	}
	.subhead {
		@apply font-size-300;
		@apply font-weight-400;
	}
	.subsubhead {
		@apply font-size-200;
		@apply font-weight-600;
		@apply leading-tight;
		@apply text-color-off-black;
	}
}

// In use;

<Text 
	className="headline" 
	as="h1">
	Cool Headline
</Text>

<h2 class="subhead">
	With a Subhead
</h2>

<p class="body">
	Lorem ipsum…
</p>

// Migration:

<Text 
	fontSize=300
	fontWeight=600>
	Old Style
</Text>

<Text 
	as="h1"
	className="headline">
	New Style
</Text>

Elsewhere