Typography

Overview of the typography system and text tokens in Apsara.

Typography tokens cover font families, sizes, weights, and spacing. They follow the active style variant: modern uses Inter, traditional uses Lora and Josefin Sans. Text built on the tokens stays consistent and changes with the style.

Font families

Apsara includes three font family categories for different use cases.

TokenValueDescription
--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

TokenValueDescription
--rs-font-inter
Inter
Modern sans-serif font
--rs-font-lora
Lora
Elegant serif font
--rs-font-josefin-sans
Josefin Sans
Geometric sans-serif font
--rs-font-jetbrains-mono
JetBrains Mono
Developer-focused monospace font
--rs-font-menlo
Menlo
System monospace font

Font weights

TokenValueDescription
--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.

TokenValueDescription
--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.

TokenValueDescription
--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.

TokenValueDescription
--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

Style variants

Apsara supports different style variants that change typography to match your design preference.

Traditional style

When using data-style="traditional", the font families change to:

TokenValueDescription
--rs-font-title
Lora, serif
Title font in traditional style
--rs-font-body
Josefin Sans, sans-serif
Body font in traditional style

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