Typography

Typography tokens cover font families, sizes, weights, and spacing. Sizes and line heights follow the theme's scaling setting; the families are CSS variables you can redeclare. Text built on the tokens stays consistent and changes with the theme.

Font families

Apsara includes three font family categories for different use cases.

--rs-font-title

Inter, sans-serif

Headings and titles

--rs-font-body

Inter, sans-serif

Body text and paragraphs

--rs-font-mono

Menlo, JetBrains Mono, monospace

Code and technical content

Available fonts

--rs-font-inter

Inter

Modern sans-serif font

--rs-font-jetbrains-mono

JetBrains Mono

Developer-focused monospace font

--rs-font-menlo

Menlo

System monospace font

Font weights

--rs-font-weight-regular

400

Body text, descriptions

--rs-font-weight-medium

500

Headings, labels, emphasis

Body text

Font sizes, line heights, and letter spacing for body content.

--rs-font-size-micro

10px

Fine print, timestamps

--rs-line-height-micro

12px

Line height for micro

--rs-letter-spacing-micro

0.5px

Letter spacing for micro

--rs-font-size-mini

11px

Captions, badges

--rs-line-height-mini

16px

Line height for mini

--rs-letter-spacing-mini

0.5px

Letter spacing for mini

--rs-font-size-small

12px

Secondary text, labels

--rs-line-height-small

16px

Line height for small

--rs-letter-spacing-small

0.4px

Letter spacing for small

--rs-font-size-regular

14px

Default body text

--rs-line-height-regular

20px

Line height for regular

--rs-letter-spacing-regular

0.25px

Letter spacing for regular

--rs-font-size-large

16px

Large body text, introductions

--rs-line-height-large

24px

Line height for large

--rs-letter-spacing-large

0.5px

Letter spacing for large

Title text

Font sizes, line heights, and letter spacing for headings and titles.

--rs-font-size-t1

20px

Small headings (h4)

--rs-line-height-t1

24px

Line height for t1

--rs-letter-spacing-t1

0

Letter spacing for t1

--rs-font-size-t2

24px

Section headings (h3)

--rs-line-height-t2

32px

Line height for t2

--rs-letter-spacing-t2

0

Letter spacing for t2

--rs-font-size-t3

28px

Page headings (h2)

--rs-line-height-t3

36px

Line height for t3

--rs-letter-spacing-t3

0

Letter spacing for t3

--rs-font-size-t4

32px

Main titles (h1)

--rs-line-height-t4

40px

Line height for t4

--rs-letter-spacing-t4

0

Letter spacing for t4

Monospace text

Font sizes, line heights, and letter spacing for code and technical content.

--rs-font-size-mono-mini

11px

Small code snippets

--rs-line-height-mono-mini

16px

Line height for mono mini

--rs-letter-spacing-mono-mini

0px

Letter spacing for mono mini

--rs-font-size-mono-small

12px

Inline code

--rs-line-height-mono-small

16px

Line height for mono small

--rs-letter-spacing-mono-small

0px

Letter spacing for mono small

--rs-font-size-mono-regular

14px

Code blocks

--rs-line-height-mono-regular

20px

Line height for mono regular

--rs-letter-spacing-mono-regular

0px

Letter spacing for mono regular

--rs-font-size-mono-large

16px

Large code displays

--rs-line-height-mono-large

24px

Line height for mono large

--rs-letter-spacing-mono-large

0px

Letter spacing for mono large

Changing the fonts

Font families are CSS variables rather than a theme setting. Redeclare them on .rs-theme, the class every theme element carries:

rs-theme {
--rs-font-body: "Geist", system-ui, sans-serif;
--rs-font-title: "Geist", system-ui, sans-serif;
--rs-font-mono: "Geist Mono", monospace;
5}

@raystack/apsara/style.css imports Inter and JetBrains Mono for you; @raystack/apsara/style-no-fonts.css is the same stylesheet with those imports stripped, for self-hosted fonts. The scale above is tuned for Inter's metrics, so another family may need its line heights and tracking adjusted. See Fonts.

Usage

Type tokens carry size, weight, and line height together. Set them as a group so a change to the scale reaches every surface at once.

1/* Dashboard metric display */
2.metric-label {
3  font-family: var(--rs-font-body);
4  font-size: var(--rs-font-size-small);
5  font-weight: var(--rs-font-weight-regular);
6  line-height: var(--rs-line-height-small);
7  letter-spacing: var(--rs-letter-spacing-small);
8  text-transform: uppercase;
9}
10
11.metric-value {
12  font-family: var(--rs-font-title);
13  font-size: var(--rs-font-size-t3);
14  font-weight: var(--rs-font-weight-medium);
15  line-height: var(--rs-line-height-t3);
16}
17
18/* Article or blog post layout */
19.article-title {
20  font-family: var(--rs-font-title);
21  font-size: var(--rs-font-size-t4);
22  line-height: var(--rs-line-height-t4);
23  font-weight: var(--rs-font-weight-medium);
24}
25
26.article-meta {
27  font-size: var(--rs-font-size-mini);
28  line-height: var(--rs-line-height-mini);
29  letter-spacing: var(--rs-letter-spacing-mini);
30}
31
32.article-body {
33  font-family: var(--rs-font-body);
34  font-size: var(--rs-font-size-regular);
35  line-height: var(--rs-line-height-regular);
36}
37
38/* Terminal or log output */
39.log-output {
40  font-family: var(--rs-font-mono);
41  font-size: var(--rs-font-size-mono-small);
42  line-height: var(--rs-line-height-mono-small);
43}
44
45.log-timestamp {
46  font-family: var(--rs-font-mono);
47  font-size: var(--rs-font-size-mono-mini);
48  line-height: var(--rs-line-height-mono-mini);
49}
50
51/* Data table headers and cells */
52.table-header {
53  font-size: var(--rs-font-size-small);
54  font-weight: var(--rs-font-weight-medium);
55  line-height: var(--rs-line-height-small);
56  letter-spacing: var(--rs-letter-spacing-small);
57}
58
59.table-cell {
60  font-size: var(--rs-font-size-regular);
61  line-height: var(--rs-line-height-regular);
62}

Best practices

Use semantic sizing - Match font sizes to their intended purpose (body, titles, code)
Pair sizes with line heights - Always use the corresponding line height token for each font size
Maintain hierarchy - Use font weights and sizes to establish clear visual hierarchy
Consider readability - Use appropriate letter spacing for different text sizes