Foundations
Typography
Text styles combine a family, size, weight, line height, and letter spacing from the foundation scales. Sizes are in rem, so text follows the reader’s font size, and Oddkin ships no font files.
Families
font.family.display aliases font.family.sans by default; a theme that wants a separate display face overrides it. Oddkin does not ship or load font files.
| Token | Value |
|---|---|
font.family.display | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif |
font.family.mono | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace |
font.family.sans | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif |
Type scale
Type and spacing are in rem with unitless line heights. Nothing forces a root size, so every size follows the reader’s font size (verified at 200%).
| Token | Value | Sample |
|---|---|---|
font.size.xs | 0.75rem | |
font.size.sm | 0.875rem | |
font.size.md | 1rem | |
font.size.lg | 1.125rem | |
font.size.xl | 1.25rem | |
font.size.2xl | 1.5rem | |
font.size.3xl | 1.875rem | |
font.size.4xl | 2.25rem |
Text styles
Use a style as a set: font: var(--odd-type-ui-weight) var(--odd-type-ui-size) / var(--odd-type-ui-line-height) var(--odd-type-ui-family). The typography recipe, @oddkin/components/css/typography.css, has a class for each style, as in the samples.
| Style | Size / weight | Line height | Letter spacing | Sample |
|---|---|---|---|---|
type.display | 2.25rem / 600 | 1.25 | -0.025em | display |
type.section | 1.5rem / 600 | 1.25 | 0 | section |
type.title | 1.25rem / 600 | 1.375 | 0 | title |
type.body | 1rem / 400 | 1.5 | 0 | body |
type.ui | 0.875rem / 500 | 1.375 | 0 | ui |
type.small | 0.75rem / 400 | 1.5 | 0 | small |
type.eyebrow | 0.75rem / 600 | 1.5 | 0.05em | eyebrow |
type.code | 0.875rem / 400 | 1.5 | 0 | code |
layout.measure is 40rem, the content measure of odd-container.