Skip to main content

Typography

Font Family
VariableProperty
"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
VariablePropertyValue
62.5%62.5%
1rem10px
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
VariablePropertyValue
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
VariablePropertyValue
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