/* ============================================================ * typography.css * Generated by Harmonic Type Lab (12-TET, factor 2^(1/12)) * DIN 1450: x-Höhen aller Schriften sind auf gemeinsame Basis * angeglichen. Referenz: Barlow 400 @ base-size. * Reference chord: Major 7th * Base size (Barlow ref): 16.00px * Rounded: no (precise rem) * ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,700;1,400&family=Noto+Sans+Mono:wght@400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"); @import url("./typographic-grid.css"); :root { /* Schriftgrößen-Tokens — aus aktivem Akkord-Mapping */ --font-h1: 2rem; /* root, 32.00px, n=12 */ --font-h2: 1.4983rem; /* 5th, 23.97px, n=7 */ --font-h3: 1.2599rem; /* 3rd +1st, 20.16px, n=4 */ --font-h4: 1rem; /* root, 16.00px, n=0 */ --font-h5: 0.9439rem; /* 7th +2st, 15.10px, n=-1 */ --font-h6: 0.63rem; /* 3rd -1st, 10.08px, n=-8 */ --font-body: 1rem; /* root, 16.00px, n=0 */ --font-small: 0.9439rem; /* 7th +2st, 15.10px, n=-1 */ --font-code: 1rem; /* root, 16.00px, n=0 */ } /* Akkord-Töne — direkter Zugriff auf rohe Skalenstufen */ :root { --font-tone-5th: 1.4983rem; /* 5th, 23.97px, n=7 */ --font-tone-7th: 1.8877rem; /* 7th, 30.20px, n=11 */ --font-tone-root: 1rem; /* root, 16.00px, n=0 */ --font-tone-3rd: 1.2599rem; /* 3rd, 20.16px, n=4 */ } /* Element rules — same shape as a User-Agent stylesheet */ html { font-size: 16px; } body { font-size: var(--font-body); } h1 { font-size: var(--font-h1); margin-block: 0.67em; font-weight: 700; } h2 { font-size: var(--font-h2); margin-block: 0.83em; font-weight: 700; } h3 { font-size: var(--font-h3); margin-block: 1em; font-weight: 700; } h4 { font-size: var(--font-h4); margin-block: 1.33em; font-weight: 700; } h5 { font-size: var(--font-h5); margin-block: 1.67em; font-weight: 700; } h6 { font-size: var(--font-h6); margin-block: 2.33em; font-weight: 700; } p { margin-block: 1em; } small { font-size: var(--font-small); } code, kbd, samp, pre, tt { font-size: var(--font-code); font-family: monospace; } /* ============================================================ * Per-font x-height alignment — DIN 1450 * Jede Schrift erhält eine angepasste font-size, sodass die * absolute x-Höhe (Mittellänge) für alle Schriften gleich ist. * Referenz: Barlow 400 @ base-size. * Verwendung: .font-barlow / .font-mono / .font-playfair auf * oder einem umschließenden Container setzen. * ============================================================ */ /* Barlow — x-Höhe-Ratio: 0.5300 */ .font-barlow { font-family: "Barlow", system-ui, sans-serif; font-size-adjust: 0.5300; font-size: 1rem; /* 16.00px – angeglichen */ } .font-barlow code, .font-barlow kbd, .font-barlow samp, .font-barlow pre, .font-barlow tt { font-family: "Noto Sans Mono", ui-monospace, monospace; font-size-adjust: 0.5200; font-size: 1.0192rem; } /* Noto Sans Mono — x-Höhe-Ratio: 0.5200 */ .font-mono { font-family: "Noto Sans Mono", ui-monospace, monospace; font-size-adjust: 0.5200; font-size: 1.0192rem; /* 16.31px – angeglichen */ } /* Playfair Display — x-Höhe-Ratio: 0.4530 */ .font-playfair { font-family: "Playfair Display", Georgia, serif; font-size-adjust: 0.4530; font-size: 1.17rem; /* 18.72px – angeglichen */ } .font-playfair code, .font-playfair kbd, .font-playfair samp, .font-playfair pre, .font-playfair tt { font-family: "Noto Sans Mono", ui-monospace, monospace; font-size-adjust: 0.5200; font-size: 1.0192rem; }