Typography
Varla typography is built for clarity in dense, technical surfaces
—headlines for authority, body for readability, mono for numbers and precision.
EB Garamond
Use EB Garamond for section titles, hero headlines, and key narrative statements. Keep it clean and no decorative effects.
EB Garamond / Medium
Use for hero headlines or a single emphasized heading per section.
EB Garamond / Regular
Use for default headlines and section titles.
Weight & tracking
EB Garamond is used in Regular and Medium to keep headlines consistent and. Use Medium for larger headings (40px+), and use Regular for smaller headings and supporting titles (min 24px).
Default type settings use -1% tracking and a 120% line height for a clean and compact. Keep these defaults whenever possible, and only tighten tracking slightly on very large headlines if spacing starts to feel loose.
Inter
Use Inter for body copy, labels, navigation, and helper text where clarity matters most. Keep it neutral and readable, with no stylized emphasis or decorative effects.
Inter / Medium
Use for emphasis: active states, key labels, and table headers.
Inter / Regular
Use for body text, long reads, and standard UI labels.
Weight & tracking
Inter is used in Regular and Medium to keep body + UI text clear and neutral. Use Regular for body copy and standard UI labels, and use Medium for emphasis in UI—active states, key labels, and table headers—without adding decorative styling.
Use ~150% line height for body text, and ~130–140% for short labels/headings. Keep tracking 0% by default, avoid negative tracking on small text, and ensure it still reads well with increased text spacing.
Geist Mono
Use Geist Mono for numbers, tables, and technical strings where alignment matters —prices, odds, PnL, IDs, and code-like labels. Keep it utilitarian and precise, with no decorative effects.
Geist Mono / Medium
Use for standard numbers, values, and technical strings in tables.
Geist Mono / Regular
Use for highlighted metrics: totals, primary values, or states.
Weight & tracking
Geist Mono is used in Regular and Medium so numbers and technical strings are consistent and easy to compare. Use Regular for standard values (prices, odds, IDs, table rows), and Medium for key metrics (totals, primary values, selected states).
Set tracking to +8% by default for both weights, with a 100% line height for a tight, technical rhythm. Keep these defaults across tables and inline values, and only adjust when readability breaks (e.g., very small sizes or multi-line snippets).
Typography hierarchy
Varla uses a three-type system—editorial clarity for headlines,
neutral clarity for reading, and mono precision for data.