Typography
Font Family
Variable | Property |
---|---|
"Barlow", system-ui, sans-serif | |
"Lato", system-ui, sans-serif | |
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" | |
ui-serif, Georgia, Cambria, "Times New Roman", Times, serif | |
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
Font Size
Variable | Property | Value |
---|---|---|
62.5% | 62.5% | |
1rem | 10px | |
calc(var(--ob-text-unit) * 1.2) | 12px | |
calc(var(--ob-text-unit) * 1.4) | 14px | |
calc(var(--ob-text-unit) * 1.6) | 16px | |
calc(var(--ob-text-unit) * 1.8) | 18px | |
calc(var(--ob-text-unit) * 2) | 20px | |
calc(var(--ob-text-unit) * 2.4) | 24px | |
calc(var(--ob-text-unit) * 3) | 30px | |
calc(var(--ob-text-unit) * 3.6) | 36px | |
calc(var(--ob-text-unit) * 4.8) | 48px | |
calc(var(--ob-text-unit) * 6) | 60px | |
calc(var(--ob-text-unit) * 7.2) | 72px | |
calc(var(--ob-text-unit) * 9.6) | 96px | |
calc(var(--ob-text-unit) * 12.8) | 128px |
Line Height
Variable | Property | Value |
---|---|---|
calc(var(--ob-text-unit) * 1.6) | 16px | |
calc(var(--ob-text-unit) * 2) | 20px | |
calc(var(--ob-text-unit) * 2.4) | 24px | |
calc(var(--ob-text-unit) * 2.8) | 28px | |
calc(var(--ob-text-unit) * 2.8) | 28px | |
calc(var(--ob-text-unit) * 3.2) | 32px | |
calc(var(--ob-text-unit) * 3.6) | 36px | |
calc(var(--ob-text-unit) * 4) | 40px | |
calc(var(--ob-text-unit) * 4.8) | 48px | |
calc(var(--ob-text-unit) * 6) | 60px | |
calc(var(--ob-text-unit) * 7.2) | 72px | |
calc(var(--ob-text-unit) * 9.6) | 96px | |
calc(var(--ob-text-unit) * 12.8) | 128px |
Letter Spacing
Variable | Property | Value |
---|---|---|
calc(var(--ob-text-unit) * -0.08) | -0.8px | |
calc(var(--ob-text-unit) * -0.04) | -0.4px | |
calc(var(--ob-text-unit) * 0) | 0px | |
calc(var(--ob-text-unit) * 0.04) | 0.4px | |
calc(var(--ob-text-unit) * 0.08) | 0.8px | |
calc(var(--ob-text-unit) * 0.16) | 1.6px | |
calc(var(--ob-text-unit) * 0.24) | 2.4px | |
calc(var(--ob-text-unit) * 0.4) | 4px | |
calc(var(--ob-text-unit) * 0.8) | 8px | |
calc(var(--ob-text-unit) * 1.6) | 16px |