Typography

Typography system with 10-step scale (0-9), font weights, and formatting components. The typography infrastructure (scale system, token structure) is from Radix Themes, but Kookie UI uses custom typography values that differ from Radix Themes.

For complete typography documentation and advanced customization, visit the Radix Themes Typography documentation. Note that Kookie UI's typography values are customized and may not match Radix Themes exactly.

Installation

npm install @kushagradhawan/kookie-ui

Usage

Use Text and Heading components to render titles and body copy. These components share size and weight props for consistent typography.

import { Text, Heading } from '@kushagradhawan/kookie-ui';
 
<Heading size="4">Page Title</Heading>
<Text size="3">Body text content</Text>

Type Scale

10-step size scale (0-9) with corresponding font size, line height, and letter spacing values:

/* Type scale tokens */
var(--font-size-0)  /* 10px - Extra small text */
var(--font-size-1)  /* 12px - Small text */
var(--font-size-2)  /* 14px - Body text */
var(--font-size-3)  /* 16px - Standard text */
var(--font-size-4)  /* 18px - Large text */
var(--font-size-5)  /* 20px - Heading text */
var(--font-size-6)  /* 24px - Large heading */
var(--font-size-7)  /* 28px - Display text */
var(--font-size-8)  /* 35px - Hero text */
var(--font-size-9)  /* 60px - Massive text */

Size Scale

Size 0

Extra small text for fine print and micro labels.

<Text size="0">Extra small text for fine print</Text>

Size 1

Small text for captions and labels.

<Text size="1">Small text for captions</Text>

Size 2

Body text for secondary content.

<Text size="2">Body text for secondary content</Text>

Size 3

Standard text for main content.

<Text size="3">Standard text for main content</Text>

Size 4

Large text for important content.

<Text size="4">Large text for important content</Text>

Size 5

Heading text for section titles.

<Heading size="5">Heading text for section titles</Heading>

Size 6

Large heading for page titles.

<Heading size="6">Large heading for page titles</Heading>

Size 7

Display text for hero sections.

<Heading size="7">Display text for hero sections</Heading>

Size 8

Hero text for main headlines.

<Heading size="8">Hero text for main headlines</Heading>

Size 9

Massive text for impact headlines.

<Heading size="9">Massive text for impact headlines</Heading>

Font Weight

Use weight prop to control text emphasis and hierarchy:

<Text weight="light">Light text</Text>
<Text weight="regular">Regular text</Text>
<Text weight="medium">Medium text</Text>
<Text weight="bold">Bold text</Text>

Available weights: thin, extralight, light, regular, medium, semibold, bold, extrabold.

Formatting Components

Compose formatting components to add emphasis and structure:

<Text>
  The <Em>most</Em> important thing to remember is,{' '}
  <Strong>stay positive</Strong>.
</Text>

<Text>
  Use <Code>inline code</Code> for technical terms.
</Text>

Font Family

Every typeface decision lives in two tiers, and nowhere else.

Stacks — which typefaces exist. Three of them, declared on :root:

--font-sans   /* backs font="sans", and body text by default */
--font-mono   /* backs font="mono" and Code */
--font-serif  /* backs font="serif", Em and Quote */

Roles — which stack each kind of text uses. Declared on .radix-themes:

--font-body     /* Text, inputs, buttons, and anything that does not opt out */
--font-heading  /* Heading — follows --font-body unless you set it */
--font-code     /* Code */
--font-strong   /* Strong */
--font-em       /* Em */
--font-quote    /* Quote */

Change a stack and every role using it moves with it. Change a role and only that role moves.

The Radix Themes names (--default-font-family, --heading-font-family, --code-font-family, --strong-font-family, --em-font-family, --quote-font-family) are aliases of the roles above, kept so Radix documentation still applies. Overriding either spelling works.

Loading Fonts

Kookie's stylesheet loads no webfonts. The defaults are system stacks, so importing the library costs zero font requests.

To use Kookie's own typefaces — Inter, JetBrains Mono, Playfair Display — import the opt-in stylesheet:

import '@kushagradhawan/kookie-ui/styles.css';
import '@kushagradhawan/kookie-ui/fonts.css';

If you already load fonts yourself, skip that file and point the stacks at your faces instead. With next/font:

import { Inter } from 'next/font/google';
 
const inter = Inter({ subsets: ['latin'], variable: '--app-sans' });
 
export default function RootLayout({ children }) {
  return (
    <html className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

:root {
  --font-sans: var(--app-sans), system-ui, sans-serif;
}

Custom Fonts

Swap a typeface everywhere it is used by overriding a stack at :root:

:root {
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-mono: 'Fira Code', 'Menlo', monospace;
  --font-serif: 'Georgia', 'Times New Roman', serif;
}

Give a single role its own typeface by overriding it at .radix-themes:

/* Serif headings over a sans body */
.radix-themes {
  --font-heading: var(--font-serif);
}

Roles are declared on .radix-themes rather than :root because <Theme> switches them per subtree — an override at :root sits on an ancestor and would be overruled. Stacks are the opposite: declare those at :root.

Theme Props

fontFamily sets the body role for a subtree:

<Theme fontFamily="sans"><YourApp /></Theme>

headingFontFamily sets the heading role independently:

<Theme fontFamily="sans" headingFontFamily="serif">
  <Heading>Set in the serif stack</Heading>
  <Text>Set in the sans stack</Text>
</Theme>

Leave headingFontFamily off and headings follow the body font — including when fontFamily changes, and including when you have set --font-heading yourself.

Individual pieces of text opt out with the font prop, which reads the stacks directly:

<Text font="mono">v1.4.2</Text>

Defaults

With @kushagradhawan/kookie-ui/fonts.css imported, the three stacks become Inter, JetBrains Mono and Playfair Display.

Credits

The typography infrastructure (10-step scale system and token structure) is from Radix Themes by WorkOS. However, Kookie UI uses custom typography values that have been modified from the original Radix Themes values. The typography system structure and approach credit goes to Radix Themes, while the specific typography values are custom to Kookie UI.