Typography

Typography has two tiers: core primitives (font family / size / weight / line-height / letter-spacing) and semantic composite styles that compose those primitives into a ready-to-use type style.

Core typography

font family

Token	Value
`--moments-core-font-family-primary`	`Klarheit-Kurrent`
`--moments-core-font-family-secondary`	`Klarheit-Grotesk`

Token	Value
`--moments-core-font-size-100`	`0.75rem` = 12px
`--moments-core-font-size-125`	`0.813rem` = 13.01px
`--moments-core-font-size-150`	`0.875rem` = 14px
`--moments-core-font-size-200`	`1rem` = 16px
`--moments-core-font-size-250`	`1.125rem` = 18px
`--moments-core-font-size-300`	`1.25rem` = 20px
`--moments-core-font-size-350`	`1.375rem` = 22px
`--moments-core-font-size-475`	`1.688rem` = 27.01px
`--moments-core-font-size-650`	`2.125rem` = 34px
`--moments-core-font-size-1075`	`3.188rem` = 51.01px

font weight

Token	Value
`--moments-core-font-weight-400`	`400`
`--moments-core-font-weight-500`	`500`
`--moments-core-font-weight-700`	`700`

line height

Token	Value
`--moments-core-line-height-200`	`1rem` = 16px
`--moments-core-line-height-300`	`1.25rem` = 20px
`--moments-core-line-height-400`	`1.5rem` = 24px
`--moments-core-line-height-500`	`1.75rem` = 28px
`--moments-core-line-height-600`	`2rem` = 32px
`--moments-core-line-height-700`	`2.25rem` = 36px
`--moments-core-line-height-1100`	`3.25rem` = 52px

letter spacing

Token	Value
`--moments-core-letter-spacing-100`	`-0.063rem` = -1.01px
`--moments-core-letter-spacing-200`	`0rem` = 0px

text decoration

Token	Value
`--moments-core-text-decoration-none`	`none`
`--moments-core-text-decoration-underline`	`underline`

Semantic typography

Each style is previewed with its resolved values; the second column lists which core token each property references.

Style (preview)	Composed from (core tokens)
`--moments-semantic-typography-heading-xlarge` The quick brown fox	family`--moments-core-font-family-primary`Klarheit-Kurrent weight`--moments-core-font-weight-700`700 size`--moments-core-font-size-650`2.125rem line-height`--moments-core-line-height-700`2.25rem letter-spacing`--moments-core-letter-spacing-100`-0.063rem
`--moments-semantic-typography-heading-large` The quick brown fox	family`--moments-core-font-family-primary`Klarheit-Kurrent weight`--moments-core-font-weight-700`700 size`--moments-core-font-size-475`1.688rem line-height`--moments-core-line-height-500`1.75rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-heading-medium` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-350`1.375rem line-height`--moments-core-line-height-400`1.5rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-heading-small` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-250`1.125rem line-height`--moments-core-line-height-300`1.25rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-xlarge` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-250`1.125rem line-height`--moments-core-line-height-500`1.75rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-xlarge-strong` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-250`1.125rem line-height`--moments-core-line-height-500`1.75rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-xlarge-link` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-250`1.125rem line-height`--moments-core-line-height-500`1.75rem letter-spacing`--moments-core-letter-spacing-200`0rem text-decoration`--moments-core-text-decoration-underline`underline
`--moments-semantic-typography-paragraph-large` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-200`1rem line-height`--moments-core-line-height-400`1.5rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-large-strong` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-200`1rem line-height`--moments-core-line-height-400`1.5rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-large-link` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-200`1rem line-height`--moments-core-line-height-400`1.5rem letter-spacing`--moments-core-letter-spacing-200`0rem text-decoration`--moments-core-text-decoration-underline`underline
`--moments-semantic-typography-paragraph-medium` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-150`0.875rem line-height`--moments-core-line-height-300`1.25rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-medium-strong` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-150`0.875rem line-height`--moments-core-line-height-300`1.25rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-medium-link` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-150`0.875rem line-height`--moments-core-line-height-300`1.25rem letter-spacing`--moments-core-letter-spacing-200`0rem text-decoration`--moments-core-text-decoration-underline`underline
`--moments-semantic-typography-paragraph-small` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-100`0.75rem line-height`--moments-core-line-height-200`1rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-small-strong` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-100`0.75rem line-height`--moments-core-line-height-200`1rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-paragraph-small-link` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-400`400 size`--moments-core-font-size-100`0.75rem line-height`--moments-core-line-height-200`1rem letter-spacing`--moments-core-letter-spacing-200`0rem text-decoration`--moments-core-text-decoration-underline`underline
`--moments-semantic-typography-action-xlarge` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-250`1.125rem line-height`--moments-core-line-height-300`1.25rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-action-large` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-200`1rem line-height`--moments-core-line-height-300`1.25rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-action-medium` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-150`0.875rem line-height`--moments-core-line-height-200`1rem letter-spacing`--moments-core-letter-spacing-200`0rem
`--moments-semantic-typography-action-small` The quick brown fox	family`--moments-core-font-family-secondary`Klarheit-Grotesk weight`--moments-core-font-weight-500`500 size`--moments-core-font-size-100`0.75rem line-height`--moments-core-line-height-200`1rem letter-spacing`--moments-core-letter-spacing-200`0rem