Skip to main content

​
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

Rendered type hierarchy

​
The two families

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

​
Line height and tracking

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

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.
Text renders immediately in the fallback face and swaps to the real font when it arrives. No invisible text, no layout shift.
Each face is subset to Latin + Latin Extended, cutting the payload by roughly two thirds. Cyrillic, Greek and Vietnamese are excluded deliberately.
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

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

The tokens that sit behind the type.

Header & navigation

Logo lockup, mega menu, localization.