Typography
Font Family
| Variable | Property |
|---|---|
--ob-font-heading | "Barlow", system-ui, sans-serif |
--ob-font-body | "Lato", system-ui, sans-serif |
--ob-font-sans | ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
--ob-font-serif | ui-serif, Georgia, Cambria, "Times New Roman", Times, serif |
--ob-font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
Font Size
| Variable | Property | Value |
|---|---|---|
--ob-text-base-size | 62.5% | 62.5% |
--ob-text-unit | 1rem | 10px |
--ob-text-xs | calc(var(--ob-text-unit) * 1.2) | 12px |
--ob-text-sm | calc(var(--ob-text-unit) * 1.4) | 14px |
--ob-text-base | calc(var(--ob-text-unit) * 1.6) | 16px |
--ob-text-lg | calc(var(--ob-text-unit) * 1.8) | 18px |
--ob-text-xl | calc(var(--ob-text-unit) * 2) | 20px |
--ob-text-2xl | calc(var(--ob-text-unit) * 2.4) | 24px |
--ob-text-3xl | calc(var(--ob-text-unit) * 3) | 30px |
--ob-text-4xl | calc(var(--ob-text-unit) * 3.6) | 36px |
--ob-text-5xl | calc(var(--ob-text-unit) * 4.8) | 48px |
--ob-text-6xl | calc(var(--ob-text-unit) * 6) | 60px |
--ob-text-7xl | calc(var(--ob-text-unit) * 7.2) | 72px |
--ob-text-8xl | calc(var(--ob-text-unit) * 9.6) | 96px |
--ob-text-9xl | calc(var(--ob-text-unit) * 12.8) | 128px |
Line Height
| Variable | Property | Value |
|---|---|---|
--ob-line-height-xs | calc(var(--ob-text-unit) * 1.6) | 16px |
--ob-line-height-sm | calc(var(--ob-text-unit) * 2) | 20px |
--ob-line-height-base | calc(var(--ob-text-unit) * 2.4) | 24px |
--ob-line-height-lg | calc(var(--ob-text-unit) * 2.8) | 28px |
--ob-line-height-xl | calc(var(--ob-text-unit) * 2.8) | 28px |
--ob-line-height-2xl | calc(var(--ob-text-unit) * 3.2) | 32px |
--ob-line-height-3xl | calc(var(--ob-text-unit) * 3.6) | 36px |
--ob-line-height-4xl | calc(var(--ob-text-unit) * 4) | 40px |
--ob-line-height-5xl | calc(var(--ob-text-unit) * 4.8) | 48px |
--ob-line-height-6xl | calc(var(--ob-text-unit) * 6) | 60px |
--ob-line-height-7xl | calc(var(--ob-text-unit) * 7.2) | 72px |
--ob-line-height-8xl | calc(var(--ob-text-unit) * 9.6) | 96px |
--ob-line-height-9xl | calc(var(--ob-text-unit) * 12.8) | 128px |
Letter Spacing
| Variable | Property | Value |
|---|---|---|
--ob-tracking-xs | calc(var(--ob-text-unit) * -0.08) | -0.8px |
--ob-tracking-sm | calc(var(--ob-text-unit) * -0.04) | -0.4px |
--ob-tracking-base | calc(var(--ob-text-unit) * 0) | 0px |
--ob-tracking-lg | calc(var(--ob-text-unit) * 0.04) | 0.4px |
--ob-tracking-xl | calc(var(--ob-text-unit) * 0.08) | 0.8px |
--ob-tracking-2xl | calc(var(--ob-text-unit) * 0.16) | 1.6px |
--ob-tracking-3xl | calc(var(--ob-text-unit) * 0.24) | 2.4px |
--ob-tracking-4xl | calc(var(--ob-text-unit) * 0.4) | 4px |
--ob-tracking-5xl | calc(var(--ob-text-unit) * 0.8) | 8px |
--ob-tracking-6xl | calc(var(--ob-text-unit) * 1.6) | 16px |