Typography System
Typography
Fine-art typography system using variable fonts, OpenType features, and mathematical scaling. Implements classical typography rules with modern web capabilities. Supports multiple font families, optical sizing, and locale-specific rules.
| Name | Description |
|---|---|
--font-sans |
Sans-serif font stack ("Inter", "Instrument Sans Variable", system-ui, -apple-system, sans-serif). |
--font-serif |
Serif font stack ("Source Serif 4", "Newsreader", "Instrument Serif", serif). |
--font-monospace |
Monospace font stack ("IBM Plex Mono", ui-monospace, monospace). |
--font-text |
Semantic body font family (defaults to --font-sans). |
--font-header |
Semantic heading font family (defaults to "Inter"). |
--font-interface |
Semantic UI font family (defaults to --font-sans). |
--font-inter-feature |
OpenType stylistic feature set for Inter font. |
--font-instrument-feature |
OpenType stylistic feature set for Instrument Sans. |
--font-weight |
Normal text font weight (400). |
--font-weight-bold |
Bold text font weight (600). |
--font-header-weight |
Heading font weight anchor (700). |
--font-weight-h1 |
Level 1 heading weight. |
--font-weight-h2 |
Level 2 heading weight. |
--font-weight-h3 |
Level 3 heading weight. |
--font-weight-h4 |
Level 4 heading weight. |
--font-weight-h5 |
Level 5 heading weight. |
--font-weight-h6 |
Level 6 heading weight. |
--font-letter-spacing |
Body letter spacing default (normal). |
--font-header-letter-spacing |
Heading letter spacing default (normal). |
--list-indent |
Default list item indentation (var(--space)). |
Typography Elements & Patterns
Typography
Headings, inline styling, small-caps overlines, keycaps, marks, and blockquotes.
| Name | Description |
|---|---|
.overline |
Small-caps letterspaced kicker label with top border rule. |
.bold |
Strong bold text weight utility. |
.menu |
UI interface font role application. |
.ui |
UI interface font role application. |
.interface |
UI interface font role application. |
.font-interface |
Explicit interface font family utility. |
.font-mono |
Monospace font family utility. |
mark |
Highlight mark element with optical trim padding and theme tinting. |
kbd |
Keyboard keycap with raised shadow and monospace font. |
a:hover |
Color and underline accent transition for hyperlinks. |
a[target="_blank"] |
External link with automatic arrow indicator (↗). |
Heading Rhythm & Grid Snapping
Typography
Half-baseline rhythm snapping mixin for heading hierarchy.
| Name | Description |
|---|---|
@mixin |
grid-line-height Heading line-height mixin snapping leading to half-baseline rhythm increments. |
All classes
CORE ELEMENT STYLING
| Class | Declares |
|---|---|
.overline |
font-variant-caps: small-caps |
INTERFACE & CODE
| Class | Declares |
|---|---|
.menu, .ui, .interface, .font-interface |
font-family: var(--font-interface), system-ui, sans-serif |