Typography

Fluxion typography documentation defines the public type system used across the design system.

This page documents semantic families, semantic weights, the semantic type scale and the stable desktop and mobile heading presets that Fluxion exposes from Figma.

Scope snapshot

Families3

Approved semantic font families.

Weights9

Semantic weight scale for implementation.

Scale14

Font size and line-height pairings.

Presets8

Viewport-specific heading compositions from Custom V2.

Consumption guidance

Use families and weights as the semantic base

Font family and weight tokens define the approved typographic building blocks for Fluxion. They should be treated as system primitives for text styling.

Use the scale for text styles

The semantic type scale is the default relationship between font size and line height. Use it to build body text and supporting text consistently.

Use presets for designed heading compositions

Desktop and mobile heading presets capture stable product-facing combinations that should be reused when the design requires that specific heading behavior.

How this page is organized

families define which fonts are available to the system
weights define the approved weight scale
scale defines default font size and line height pairings
presets define stable heading combinations for desktop and mobile

Font families

Font family tokens define the approved type families available to Fluxion.

Semantic font families define the approved type families that product work should reference instead of hardcoding fonts.

Fluxion Aa

semantic.typography.font.family.monoSemantic

font/font-mono

Geist Mono

Fluxion Aa

semantic.typography.font.family.sansSemantic

font/font-sans

Geist

Fluxion Aa

semantic.typography.font.family.serifSemantic

font/font-serif

Georgia

Font weights

Font weight tokens define the semantic weight scale available to the system.

Semantic font weights define the approved weight scale that components and content styles should consume.

semantic.typography.font.weight.100Semantic

font-weight/thin

100

semantic.typography.font.weight.200Semantic

font-weight/extralight

200

semantic.typography.font.weight.300Semantic

font-weight/light

300

semantic.typography.font.weight.400Semantic

font-weight/normal

400

semantic.typography.font.weight.500Semantic

font-weight/medium

500

semantic.typography.font.weight.600Semantic

font-weight/semibold

600

semantic.typography.font.weight.700Semantic

font-weight/bold

700

semantic.typography.font.weight.800Semantic

font-weight/extrabold

800

semantic.typography.font.weight.900Semantic

font-weight/black

900

Type scale

The semantic type scale defines the default relationship between font size and line height.

The semantic type scale defines the default relationship between font size and line height across the system.

Scale

xxs

Semantic

Fluxion type scale

Font size

semantic.typography.scale.xxs.fontSizeSemantic

text/xxs/font-size

10px

Line height

semantic.typography.scale.xxs.lineHeightSemantic

text/xxs/line-height

12px

Scale

xs

Semantic

Fluxion type scale

Font size

semantic.typography.scale.xs.fontSizeSemantic

text/xs/font-size

12px

Line height

semantic.typography.scale.xs.lineHeightSemantic

text/xs/line-height

16px

Scale

sm

Semantic

Fluxion type scale

Font size

semantic.typography.scale.sm.fontSizeSemantic

text/sm/font-size

14px

Line height

semantic.typography.scale.sm.lineHeightSemantic

text/sm/line-height

20px

Scale

base

Semantic

Fluxion type scale

Font size

semantic.typography.scale.base.fontSizeSemantic

text/base/font-size

16px

Line height

semantic.typography.scale.base.lineHeightSemantic

text/base/line-height

24px

Scale

lg

Semantic

Fluxion type scale

Font size

semantic.typography.scale.lg.fontSizeSemantic

text/lg/font-size

18px

Line height

semantic.typography.scale.lg.lineHeightSemantic

text/lg/line-height

28px

Scale

xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.xl.fontSizeSemantic

text/xl/font-size

20px

Line height

semantic.typography.scale.xl.lineHeightSemantic

text/xl/line-height

28px

Scale

2xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.2xl.fontSizeSemantic

text/2xl/font-size

24px

Line height

semantic.typography.scale.2xl.lineHeightSemantic

text/2xl/line-height

32px

Scale

3xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.3xl.fontSizeSemantic

text/3xl/font-size

30px

Line height

semantic.typography.scale.3xl.lineHeightSemantic

text/3xl/line-height

36px

Scale

4xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.4xl.fontSizeSemantic

text/4xl/font-size

36px

Line height

semantic.typography.scale.4xl.lineHeightSemantic

text/4xl/line-height

40px

Scale

5xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.5xl.fontSizeSemantic

text/5xl/font-size

48px

Line height

semantic.typography.scale.5xl.lineHeightSemantic

text/5xl/line-height

48px

Scale

6xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.6xl.fontSizeSemantic

text/6xl/font-size

60px

Line height

semantic.typography.scale.6xl.lineHeightSemantic

text/6xl/line-height

60px

Scale

7xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.7xl.fontSizeSemantic

text/7xl/font-size

72px

Line height

semantic.typography.scale.7xl.lineHeightSemantic

text/7xl/line-height

72px

Scale

8xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.8xl.fontSizeSemantic

text/8xl/font-size

96px

Line height

semantic.typography.scale.8xl.lineHeightSemantic

text/8xl/line-height

96px

Scale

9xl

Semantic

Fluxion type scale

Font size

semantic.typography.scale.9xl.fontSizeSemantic

text/9xl/font-size

128px

Line height

semantic.typography.scale.9xl.lineHeightSemantic

text/9xl/line-height

128px

Desktop heading presets

Desktop presets combine semantic typography tokens into stable large-screen heading styles.

Desktop presets capture the intended heading combinations for larger layouts.

Desktop preset

SM

Custom

Fluxion heading

Font family

custom.desktop.typography.heading.sm.fontFamilyCustom

heading-sm/font-family

Geist

Font size

custom.desktop.typography.heading.sm.fontSizeCustom

heading-sm/font-size

24px

Font weight

custom.desktop.typography.heading.sm.fontWeightCustom

heading-sm/font-weight

700px

Line height

custom.desktop.typography.heading.sm.lineHeightCustom

heading-sm/line-height

32px

Letter spacing

custom.desktop.typography.heading.sm.letterSpacingCustom

heading-sm/letter-spacing

0px

Desktop preset

MD

Custom

Fluxion heading

Font family

custom.desktop.typography.heading.md.fontFamilyCustom

heading-md/font-family

Geist

Font size

custom.desktop.typography.heading.md.fontSizeCustom

heading-md/font-size

30px

Font weight

custom.desktop.typography.heading.md.fontWeightCustom

heading-md/font-weight

700px

Line height

custom.desktop.typography.heading.md.lineHeightCustom

heading-md/line-height

36px

Letter spacing

custom.desktop.typography.heading.md.letterSpacingCustom

heading-md/letter-spacing

0px

Desktop preset

LG

Custom

Fluxion heading

Font family

custom.desktop.typography.heading.lg.fontFamilyCustom

heading-lg/font-family

Geist

Font size

custom.desktop.typography.heading.lg.fontSizeCustom

heading-lg/font-size

36px

Font weight

custom.desktop.typography.heading.lg.fontWeightCustom

heading-lg/font-weight

700px

Line height

custom.desktop.typography.heading.lg.lineHeightCustom

heading-lg/line-height

40px

Letter spacing

custom.desktop.typography.heading.lg.letterSpacingCustom

heading-lg/letter-spacing

0px

Desktop preset

XL

Custom

Fluxion heading

Font family

custom.desktop.typography.heading.xl.fontFamilyCustom

heading-xl/font-family

Geist

Font size

custom.desktop.typography.heading.xl.fontSizeCustom

heading-xl/font-size

48px

Font weight

custom.desktop.typography.heading.xl.fontWeightCustom

heading-xl/font-weight

700px

Line height

custom.desktop.typography.heading.xl.lineHeightCustom

heading-xl/line-height

48px

Letter spacing

custom.desktop.typography.heading.xl.letterSpacingCustom

heading-xl/letter-spacing

0px

Mobile heading presets

Mobile presets adapt the heading system for compact screens.

Mobile presets adapt the same semantic type system to smaller viewports.

Mobile preset

SM

Custom

Fluxion heading

Font family

custom.mobile.typography.heading.sm.fontFamilyCustom

heading-sm/font-family

Geist

Font size

custom.mobile.typography.heading.sm.fontSizeCustom

heading-sm/font-size

24px

Font weight

custom.mobile.typography.heading.sm.fontWeightCustom

heading-sm/font-weight

700px

Line height

custom.mobile.typography.heading.sm.lineHeightCustom

heading-sm/line-height

32px

Letter spacing

custom.mobile.typography.heading.sm.letterSpacingCustom

heading-sm/letter-spacing

0px

Mobile preset

MD

Custom

Fluxion heading

Font family

custom.mobile.typography.heading.md.fontFamilyCustom

heading-md/font-family

Geist

Font size

custom.mobile.typography.heading.md.fontSizeCustom

heading-md/font-size

30px

Font weight

custom.mobile.typography.heading.md.fontWeightCustom

heading-md/font-weight

700px

Line height

custom.mobile.typography.heading.md.lineHeightCustom

heading-md/line-height

36px

Letter spacing

custom.mobile.typography.heading.md.letterSpacingCustom

heading-md/letter-spacing

0px

Mobile preset

LG

Custom

Fluxion heading

Font family

custom.mobile.typography.heading.lg.fontFamilyCustom

heading-lg/font-family

Geist

Font size

custom.mobile.typography.heading.lg.fontSizeCustom

heading-lg/font-size

30px

Font weight

custom.mobile.typography.heading.lg.fontWeightCustom

heading-lg/font-weight

700px

Line height

custom.mobile.typography.heading.lg.lineHeightCustom

heading-lg/line-height

36px

Letter spacing

custom.mobile.typography.heading.lg.letterSpacingCustom

heading-lg/letter-spacing

0px

Mobile preset

XL

Custom

Fluxion heading

Font family

custom.mobile.typography.heading.xl.fontFamilyCustom

heading-xl/font-family

Geist

Font size

custom.mobile.typography.heading.xl.fontSizeCustom

heading-xl/font-size

30px

Font weight

custom.mobile.typography.heading.xl.fontWeightCustom

heading-xl/font-weight

700px

Line height

custom.mobile.typography.heading.xl.lineHeightCustom

heading-xl/line-height

36px

Letter spacing

custom.mobile.typography.heading.xl.letterSpacingCustom

heading-xl/letter-spacing

0px