Skip to main content

Typography

Tokens
Font Family
VariableProperty
--ob-font-heading"Barlow", system-ui, sans-serif
--ob-font-body"Lato", system-ui, sans-serif
--ob-font-sansui-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-serifui-serif, Georgia, Cambria, "Times New Roman", Times, serif
--ob-font-monoui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
Font Size
VariablePropertyValue
--ob-text-base-size62.5%62.5%
--ob-text-unit1rem10px
--ob-text-xscalc(var(--ob-text-unit) * 1.2)12px
--ob-text-smcalc(var(--ob-text-unit) * 1.4)14px
--ob-text-basecalc(var(--ob-text-unit) * 1.6)16px
--ob-text-lgcalc(var(--ob-text-unit) * 1.8)18px
--ob-text-xlcalc(var(--ob-text-unit) * 2)20px
--ob-text-2xlcalc(var(--ob-text-unit) * 2.4)24px
--ob-text-3xlcalc(var(--ob-text-unit) * 3)30px
--ob-text-4xlcalc(var(--ob-text-unit) * 3.6)36px
--ob-text-5xlcalc(var(--ob-text-unit) * 4.8)48px
--ob-text-6xlcalc(var(--ob-text-unit) * 6)60px
--ob-text-7xlcalc(var(--ob-text-unit) * 7.2)72px
--ob-text-8xlcalc(var(--ob-text-unit) * 9.6)96px
--ob-text-9xlcalc(var(--ob-text-unit) * 12.8)128px
Line Height
VariablePropertyValue
--ob-line-height-xscalc(var(--ob-text-unit) * 1.6)16px
--ob-line-height-smcalc(var(--ob-text-unit) * 2)20px
--ob-line-height-basecalc(var(--ob-text-unit) * 2.4)24px
--ob-line-height-lgcalc(var(--ob-text-unit) * 2.8)28px
--ob-line-height-xlcalc(var(--ob-text-unit) * 2.8)28px
--ob-line-height-2xlcalc(var(--ob-text-unit) * 3.2)32px
--ob-line-height-3xlcalc(var(--ob-text-unit) * 3.6)36px
--ob-line-height-4xlcalc(var(--ob-text-unit) * 4)40px
--ob-line-height-5xlcalc(var(--ob-text-unit) * 4.8)48px
--ob-line-height-6xlcalc(var(--ob-text-unit) * 6)60px
--ob-line-height-7xlcalc(var(--ob-text-unit) * 7.2)72px
--ob-line-height-8xlcalc(var(--ob-text-unit) * 9.6)96px
--ob-line-height-9xlcalc(var(--ob-text-unit) * 12.8)128px
Letter Spacing
VariablePropertyValue
--ob-tracking-xscalc(var(--ob-text-unit) * -0.08)-0.8px
--ob-tracking-smcalc(var(--ob-text-unit) * -0.04)-0.4px
--ob-tracking-basecalc(var(--ob-text-unit) * 0)0px
--ob-tracking-lgcalc(var(--ob-text-unit) * 0.04)0.4px
--ob-tracking-xlcalc(var(--ob-text-unit) * 0.08)0.8px
--ob-tracking-2xlcalc(var(--ob-text-unit) * 0.16)1.6px
--ob-tracking-3xlcalc(var(--ob-text-unit) * 0.24)2.4px
--ob-tracking-4xlcalc(var(--ob-text-unit) * 0.4)4px
--ob-tracking-5xlcalc(var(--ob-text-unit) * 0.8)8px
--ob-tracking-6xlcalc(var(--ob-text-unit) * 1.6)16px