45 lines
1.7 KiB
CSS
45 lines
1.7 KiB
CSS
/* ============================================================
|
|
typography.css — Nychthemeron type system
|
|
------------------------------------------------------------
|
|
Three voices:
|
|
· Cinzel — inscriptional Roman capitals, the voice of
|
|
the gods. Headings, titles, the brand.
|
|
· IBM Plex Sans — the mortal voice. Body, UI, forms.
|
|
· IBM Plex Mono — the scribe. Code, data, tabular figures.
|
|
============================================================ */
|
|
:root {
|
|
/* families */
|
|
--font-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
|
|
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
|
|
|
|
/* weights */
|
|
--weight-regular: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
|
|
/* type scale — a measured climb, base 14px */
|
|
--text-xs: 0.75rem; /* 10.5px — labels, captions */
|
|
--text-sm: 0.875rem; /* 12.25px — secondary UI */
|
|
--text-base: 1rem; /* 14px — body */
|
|
--text-lg: 1.125rem; /* 15.75px — lead body */
|
|
--text-xl: 1.4rem; /* 19.6px — card titles */
|
|
--text-2xl: 1.75rem; /* 24.5px — section heads */
|
|
--text-3xl: 2.5rem; /* 35px — page titles */
|
|
--text-4xl: 3.5rem; /* 49px — display */
|
|
--text-5xl: 5rem; /* 70px — hero display */
|
|
|
|
/* line-heights */
|
|
--leading-tight: 1.15;
|
|
--leading-snug: 1.35;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.65;
|
|
|
|
/* letter-spacing — Cinzel breathes wide */
|
|
--tracking-tight: -0.01em;
|
|
--tracking-normal: 0;
|
|
--tracking-wide: 0.02em;
|
|
--tracking-wider: 0.08em;
|
|
--tracking-widest: 0.18em; /* small-caps eyebrows */
|
|
}
|