- 5xl2.986remdesign for what people feel
- 4xl2.488remthe interface is the product
- 3xl2.074remthe interface is the product
- 2xl1.728remevery screen makes a promise
- xl1.44remevery screen makes a promise
- lg1.2remGood typography is invisible. It does its work without asking to be noticed, and the reader never stops to admire the letterforms.
- base1remGood typography is invisible. It does its work without asking to be noticed, and the reader never stops to admire the letterforms.
- sm0.833remCAPTION · METADATA · 12 SEP 2026
- xs0.694remCAPTION · METADATA · 12 SEP 2026
body on background19.80:1AAAheadings on background19.80:1AAA
css · rem
/* type scale — 16px × 1.2 */
/* generated with koalia.design/tools/type-scale */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
:root {
--font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-heading: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
--text-xs: 0.694rem;
--text-sm: 0.833rem;
--text-base: 1rem;
--text-lg: 1.2rem;
--text-xl: 1.44rem;
--text-2xl: 1.728rem;
--text-3xl: 2.074rem;
--text-4xl: 2.488rem;
--text-5xl: 2.986rem;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 400;
line-height: 1.5;
letter-spacing: 0em;
color: #0a0a0a;
background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #0a0a0a;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }