> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> The Inter + JetBrains Mono type system, the 8-step scale, and how VARAHI loads fonts without a third-party request.

# Typography

VARAHI uses two self-hosted type families and a single 8-step scale that every
section reads from. You never pick a font size in a section — you pick a *role*.

![Typography specimen](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/typography-specimen.png)

Rendered type hierarchy

***

## The two families

| Role | Token | Family | Where it is used |
| - | - | - | - |
| Display | `--font-display` | **Inter** | Hero titles, section headings |
| Heading | `--font-heading` | **Inter** | Sub-headings, card titles |
| Body | `--font-body` | **Inter** | Paragraphs, descriptions, product copy |
| Label | `--font-label` | **JetBrains Mono** | Eyebrows, badges, technical readouts |
| Mono | `--font-mono` | **JetBrains Mono** | SKU, prices, specifications, counters |

> [!NOTE]
>
> **Why two families?** Inter is a neutral, highly legible UI face that disappears
> behind the product. JetBrains Mono is used only where a value is *technical* — a measured spec, a stock counter, a price — and mono makes those read as data rather
> than as marketing copy. Using it for the eyebrow labels is what gives the theme its
> "instrument panel" character.

***

## The scale

| Token | Size | Typical use |
| - | - | - |
| `--text-display-lg` | 72px | Hero title (desktop) |
| `--text-display-lg-mobile` | 40px | Hero title (mobile) |
| `--text-headline-lg` | 48px | Large section heading |
| `--text-headline-md` | 32px | Section heading |
| `--text-body-lg` | 18px | Lead paragraph, product description |
| `--text-body-md` | 16px | Body copy |
| `--text-label-md` | 14px | Labels, buttons, nav links |
| `--text-technical-sm` | 12px | Technical readouts, captions, eyebrow text |

### Line height and tracking

| Token | Value | Applied to |
| - | - | - |
| `--leading-display` | `1.08` | Display and headline text — tight, editorial |
| `--leading-body` | `1.6` | Body copy — open, readable |
| `--tracking-display` | `-0.04em` | Display type — negative tracking at large sizes |
| `--tracking-label` | `0.1em` | Uppercase label text |
| `--tracking-mono` | `0.15em` | Monospace values |

> [!WARNING]
>
> Uppercase label text needs the tracking. If you override `--tracking-label` to `0`,
> long uppercase strings will read as a solid block and lose their "technical" read.

***

## How fonts are loaded

> **Self-hosted, no third-party request**
>
> Every font file lives in `assets/` and is served from your own CDN. There is no
> request to Google Fonts, which means no extra DNS lookup, no third-party
> connection on your customer's critical path, and no GDPR question.

> **font-display: swap**
>
> Text renders immediately in the fallback face and swaps to the real font when it
> arrives. No invisible text, no layout shift.

> **Latin-only subsets**
>
> Each face is subset to Latin + Latin Extended, cutting the payload by roughly
> two thirds. Cyrillic, Greek and Vietnamese are excluded deliberately.

> **Mobile loads less**
>
> Below 768px, VARAHI loads only **Inter 400** and the icon font. JetBrains Mono and
> Inter 500 are declared inside a `min-width: 768px` media query, so phones never
> download them. This is why mobile pages stay light.

### Font files in the theme

| File | Family | Weight | Size |
| - | - | - | - |
| `font-16.woff2` | Inter | 400 | 47 KB |
| `font-23.woff2` | Inter | 500 | 47 KB (desktop only) |
| `jetbrains-mono-variable.woff2` | JetBrains Mono | 400–800 variable | 30 KB (desktop only) |
| `font-24.woff2` | Material Symbols Outlined | icons | 5 KB |

***

## Changing the fonts

VARAHI ships with Inter and JetBrains Mono hard-coded because the type system depends
on their metrics. If you must change them:

**1. Add your font file**

Upload it to `assets/`. Use `woff2` and subset to Latin.

**2. Declare the @font-face**

Add it in the `<style>` block in `layout/theme.liquid`, alongside the existing
declarations.

**3. Point the tokens at it**

In `snippets/css-variables.liquid`, change `--font-display`, `--font-heading`,
`--font-body`, `--font-label` and `--font-mono`.

**4. Re-check the type scale**

A different family has different metrics. Re-check that `--text-display-lg` at
`--leading-display` does not clip descenders, and that your longest uppercase
label still fits its container.

> [!WARNING]
>
> The Material Symbols icon font is **not** swappable. It is a ligature-based icon
> font: the words `shopping_cart` and `favorite` in the markup are transformed into
> glyphs. A different icon font would need the markup rewritten.

***

> **[Color system](https://varaahi.vritservicespro.com/settings/colors.md)**
>
> The tokens that sit behind the type.

> **[Header & navigation](https://varaahi.vritservicespro.com/settings/header-navigation.md)**
>
> Logo lockup, mega menu, localization.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.