Typography

Overview of the typography system and text tokens in Apsara.

Apsara provides a comprehensive typography system with carefully crafted font families, sizes, weights, and spacing. Typography tokens adapt based on the active style variant—modern style uses Inter for a clean, technical aesthetic while traditional style uses Lora and Josefin Sans for a warmer, editorial feel. Using these tokens ensures your text styling remains consistent and automatically adapts to style changes.

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

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