Use the <Text> and <Heading> components to render titles and body copy.

import { Text, Heading } from "@propeldata/ui-kit";

These components share size and weight props and map to the underlying type system to ensure consistent typography throughout your app.

​
Type scale

The typographic system is based on a 9-step size scale.

Aa

1

Aa

2

Aa

3

Aa

4

Aa

5

Aa

6

Aa

7

Aa

8

Aa

9

Every step has a corresponding font size, line height and letter spacing value which are all designed to be used in combination.

StepSizeLetter spacingLine height
112px0.0025em16px
214px0em20px
316px0em24px
418px-0.0025em26px
520px-0.005em28px
624px-0.00625em30px
728px-0.0075em36px
835px-0.01em40px
960px-0.025em60px

​
Font weight

The following weights are supported.

​
Available weights

Light

Regular

Medium

Bold

Weights can be customized to map to your own typeface.

WeightDefault value
Light300
Regular400
Medium500
Bold700

​
Font family

By default, Propel Themes uses a system font stack for portability and legibility. Continue to the next section to learn about customizing your theme with a custom font.

TypeDefault value
Text-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

​
Customization

Propel Themes typography can be customized by overriding the corresponding CSS variables of the token system. Refer to the source code for the full list of the typographic tokens.

Make sure that your CSS is applied after the Propel Themes styles so that it takes precedence.

​
Custom fonts

You can provide your own fonts, however, how you choose to import and serve them is up to you. It is only required that you specify your named fonts using the correct syntax.

To customize the font family used in your theme, remap the corresponding font-family tokens:

.propel-themes {
  --default-font-family:  /* Your custom default font */
  --heading-font-family: /* Your custom font for <Heading> components */
  --code-font-family: /* Your custom font for <Code> components */
  --strong-font-family: /* Your custom font for <Strong> components */
  --em-font-family: /* Your custom font for <Em> components */
  --quote-font-family: /* Your custom font for <Quote> components */
}

​
With next/font

To load custom fonts via next/font, use the variable option to define a CSS variable name. Then, add that CSS variable class to your HTML document.

import { Inter } from "next/font/google";

const inter = Inter({
	subsets: ["latin"],
	display: "swap",
	variable: "--font-inter",
});

export default function RootLayout({ children }) {
	return (
		<html lang="en" className={inter.variable}>
			<body>{children}</body>
		</html>
	);
}

Finally, assign the CSS variable in your custom CSS:

.propel-themes {
	--default-font-family: var(--font-inter);
}

​
Custom font weights

To customize the exact font weights used in your theme, remap the corresponding font-weight tokens to your own values:

.propel-themes {
	--font-weight-light: 200;
	--font-weight-regular: 300;
	--font-weight-medium: 600;
	--font-weight-bold: 800;
}

​
Advanced settings

There’s a number of advanced typographic features that can be customized. These include a font size multiplier for certain components, font style, letter spacing, and leading trim. For example, you can customize the headings to render with a relatively larger font size than your default font, different leading trim values, and tighter letter spacing:

.propel-themes {
	--heading-font-family: "Untitled Sans", sans-serif;
	--heading-font-size-adjust: 1.05;
	--heading-font-style: normal;
	--heading-leading-trim-start: 0.42em;
	--heading-leading-trim-end: 0.38em;
	--heading-letter-spacing: -0.01em;
}

Was this page helpful?

Dark modeSpacing