Typography

Apsara provides a comprehensive typography system with carefully crafted font families, sizes, weights, and spacing to ensure readable and consistent text across your application.

Font Families

Apsara includes three font family categories for different use cases.

Token	Default Value	Use Case
`--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

Token	Font
`--rs-font-inter`	Inter
`--rs-font-lora`	Lora
`--rs-font-josefin-sans`	Josefin Sans
`--rs-font-jetbrains-mono`	JetBrains Mono
`--rs-font-menlo`	Menlo

Font Weights

Token	Value	Use Case
`--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.

Font Sizes

Token	Size	Use Case
`--rs-font-size-micro`	10px	Fine print, timestamps
`--rs-font-size-mini`	11px	Captions, badges
`--rs-font-size-small`	12px	Secondary text, labels
`--rs-font-size-regular`	14px	Default body text
`--rs-font-size-large`	16px	Large body text, introductions

Line Heights

Token	Value
`--rs-line-height-micro`	12px
`--rs-line-height-mini`	16px
`--rs-line-height-small`	16px
`--rs-line-height-regular`	20px
`--rs-line-height-large`	24px

Letter Spacing

Token	Value
`--rs-letter-spacing-micro`	0.5px
`--rs-letter-spacing-mini`	0.5px
`--rs-letter-spacing-small`	0.4px
`--rs-letter-spacing-regular`	0.25px
`--rs-letter-spacing-large`	0.5px

Title Text

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

Font Sizes

Token	Size	Use Case
`--rs-font-size-t1`	20px	Small headings (h4)
`--rs-font-size-t2`	24px	Section headings (h3)
`--rs-font-size-t3`	28px	Page headings (h2)
`--rs-font-size-t4`	32px	Main titles (h1)

Line Heights

Token	Value
`--rs-line-height-t1`	24px
`--rs-line-height-t2`	32px
`--rs-line-height-t3`	36px
`--rs-line-height-t4`	40px

Letter Spacing

Token	Value
`--rs-letter-spacing-t1`	0
`--rs-letter-spacing-t2`	0
`--rs-letter-spacing-t3`	0
`--rs-letter-spacing-t4`	0

Monospace Text

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

Font Sizes

Token	Size
`--rs-font-size-mono-mini`	11px
`--rs-font-size-mono-small`	12px
`--rs-font-size-mono-regular`	14px
`--rs-font-size-mono-large`	16px

Line Heights

Token	Value
`--rs-line-height-mono-mini`	16px
`--rs-line-height-mono-small`	16px
`--rs-line-height-mono-regular`	20px
`--rs-line-height-mono-large`	24px

Letter Spacing

Token	Value
`--rs-letter-spacing-mono-mini`	0px
`--rs-letter-spacing-mono-small`	0px
`--rs-letter-spacing-mono-regular`	0px
`--rs-letter-spacing-mono-large`	0px

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:

Token	Traditional Value
`--rs-font-title`	Lora, serif
`--rs-font-body`	Josefin Sans, sans-serif

Usage

1/* Body text */
2.paragraph {
3  font-family: var(--rs-font-body);
4  font-size: var(--rs-font-size-regular);
5  font-weight: var(--rs-font-weight-regular);
6  line-height: var(--rs-line-height-regular);
7  letter-spacing: var(--rs-letter-spacing-regular);
8}
9
10/* Headings */
11.heading {
12  font-family: var(--rs-font-title);
13  font-size: var(--rs-font-size-t2);
14  font-weight: var(--rs-font-weight-medium);
15  line-height: var(--rs-line-height-t2);
16}
17
18/* Code */
19.code {
20  font-family: var(--rs-font-mono);
21  font-size: var(--rs-font-size-mono-small);
22  line-height: var(--rs-line-height-mono-small);
23}
24
25/* Small text */
26.caption {
27  font-size: var(--rs-font-size-small);
28  line-height: var(--rs-line-height-small);
29  letter-spacing: var(--rs-letter-spacing-small);
30}

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