# How Omarchy Determines Its Type Scale: Base Size and Multiplier Architecture

> Discover how Omarchy establishes its type scale using a base font size and fixed multipliers for a consistent visual hierarchy. Learn about its Style.font tokens.

- Repository: [Omacom/omarchy](https://github.com/omacom/omarchy)
- Tags: architecture
- Published: 2026-09-04

---

**Omarchy calculates its entire visual hierarchy from a single base font size using fixed multipliers, storing the result in `Style.font` tokens that QML components reference for consistent typography.**

Omarchy’s interface relies on a deterministic **type scale** that eliminates arbitrary font sizing across its QML-based shell. Rather than hardcoding pixel values, the system derives every typographic dimension from a central `Style.font.baseSize` property, applying mathematical multipliers to generate a consistent hierarchy from captions to display text.

## The Foundation: Base Size and Multiplier System

The type scale originates at `Style.font.baseSize`, which defaults to approximately **12 pt** within the Omarchy shell. This value serves as the mathematical anchor for the entire typography system. The **Style module**—implemented in `shell/Style.qml` as a QML-side helper—exposes this property and computes all dependent tokens by applying fixed multiplication factors.

When the base size changes, every dependent token automatically recalculates. This architecture ensures that themes can adjust visual density globally without hunting down individual font declarations across hundreds of UI files.

## Type Scale Tokens and Size Mapping

According to the documentation in [`docs/omarchy-shell.md`](https://github.com/omacom/omarchy/blob/main/docs/omarchy-shell.md) (lines 323-333), the mapping between semantic tokens, multipliers, and resulting point sizes follows a rigid structure:

| Token | Multiplier | Resulting Size |
|-------|------------|----------------|
| `Style.font.caption` | 0.833 | ~10 pt |
| `Style.font.bodySmall` | 0.917 | ~11 pt |
| `Style.font.body` | 1.0 | ~12 pt |
| `Style.font.subtitle` | 1.083 | ~13 pt |
| `Style.font.title` | 1.167 | ~14 pt |
| `Style.font.heading` | 1.333 | ~16 pt |
| `Style.font.display` | 2.0 | ~24 pt |
| `Style.font.displayLarge` | 2.333 | ~28 pt |

### Icon Size Inheritance

Icon dimensions integrate with the type scale through inheritance rather than direct multipliers. The `Style.font.iconSmall` token inherits the `bodySmall` size (~11 pt), while `Style.font.icon` inherits the `title` size (~14 pt). Only `Style.font.iconLarge` uses a direct multiplier of **1.5** (~18 pt), breaking from the inheritance pattern for oversized interface elements.

## Implementation in the Style Module

The calculation logic resides in the **Style module**, typically found at `shell/Style.qml` or its corresponding JavaScript implementation. This module reads `Style.font.baseSize` and applies the documented multipliers to produce computed values for every token in the hierarchy.

Components never hardcode font sizes. Instead, they reference the computed tokens:

```qml
// Example: a panel title using the “title” scale
Text {
    text: qsTr("Network")
    font.pixelSize: Style.font.title      // ≈ 14 pt
}

// Example: a small caption using the “caption” scale
Text {
    text: qsTr("v1.2.3")
    font.pixelSize: Style.font.caption    // ≈ 10 pt
}

```

## Practical Usage in QML Components

Throughout the Omarchy codebase, UI components in paths like `shell/plugins/panels/network/Panel.qml` and `shell/plugins/services/media/BarWidget.qml` demonstrate consistent application of the type scale. These files set `font.pixelSize: Style.font.*` to ensure visual alignment with the system-wide hierarchy.

Icon sizing follows the same pattern, treating font tokens as dimensional values:

```qml
// Example: an icon that follows the “icon” scale (inherits title size)
Image {
    source: "qrc:/icons/wifi.svg"
    width: Style.font.icon
    height: Style.font.icon
}

```

## Theming and Global Adjustments

To alter Omarchy’s visual density, modify `Style.font.baseSize` in your theme configuration. Setting the base to **10 pt** creates a compact interface where captions render at ~8.3 pt and display text at ~20 pt, while maintaining the exact same proportional relationships. Because every QML component references the central Style tokens rather than literal values, the entire application resizes deterministically without code changes to individual views.

## Summary

- Omarchy uses a **mathematical type scale** based on `Style.font.baseSize` (~12 pt default) and fixed multipliers defined in [`docs/omarchy-shell.md`](https://github.com/omacom/omarchy/blob/main/docs/omarchy-shell.md).
- The **Style module** (`shell/Style.qml`) implements the calculation logic, exposing semantic tokens like `body`, `title`, and `displayLarge`.
- **Icon sizes** integrate through inheritance (`icon` inherits `title`) or fixed multipliers (`iconLarge` at 1.5x).
- Changing the base size automatically propagates through all UI components, supporting rapid theme density adjustments across the entire shell.

## Frequently Asked Questions

### What is the default base font size in Omarchy?

The default base font size is approximately **12 pt**, exposed as `Style.font.baseSize` in the Style module. This value serves as the mathematical foundation for all other typographic tokens in the system.

### How do I change the type scale globally in an Omarchy theme?

Modify the `Style.font.baseSize` property in your theme configuration. All dependent tokens automatically recalculate using their fixed multipliers, allowing you to shift the entire visual hierarchy—making the interface more compact (10 pt base) or expansive (14 pt base)—without touching individual component code.

### What is the difference between the `title` and `heading` tokens?

The `title` token uses a **1.167 multiplier** (~14 pt), designed for panel headers and section labels. The `heading` token applies a **1.333 multiplier** (~16 pt), reserved for more prominent page titles and major organizational divisions. This creates a clear distinction between secondary and primary headers within the type scale.

### How are icon sizes determined in the Omarchy type scale?

Icons align with text hierarchy through inheritance. `Style.font.iconSmall` inherits the `bodySmall` size (~11 pt), `Style.font.icon` inherits the `title` size (~14 pt), and `Style.font.iconLarge` uses a dedicated **1.5 multiplier** (~18 pt). This ensures that visual icons maintain proportional relationships with adjacent text elements.