/** * Dhyan Software — Typography Design System * * Single source of truth for every typography decision on the Dhyan Software * WordPress ecosystem. Identical, byte-for-byte, in dhyan-site-theme and * dhyan-demo-theme — do not let the two copies drift. If you need to change * typography, change this file in one theme and copy it verbatim to the other. * * Contents: * 1. Font faces (self-hosted, latin subset) * 2. Metric-matched fallback faces (CLS mitigation) * 3. Semantic font-family tokens * 4. Primitive type scale (size / weight / line-height / tracking) * 5. OpenType features + optical sizing * 6. Base rules + utilities * 7. Variable-font upgrade path (reference only, inactive) * * Brand rule: Google Sans Flex (logo wordmark) and Satoshi (logo tagline) are * the LOGO's typefaces. Google Sans Flex is never loaded as a webfont on this * site — it stays inside the exported logo asset only. Satoshi IS self-hosted * and reused for product display/heading type — see §3 for the reasoning. */ /* ============================================================ 1. FONT FACES — self-hosted, woff2 only, latin subset ============================================================ */ /* --- Inter: body / UI workhorse --------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); } /* --- Satoshi: display / heading face ----------------------------------- Sourced from Fontshare (free, self-hostable, commercial-friendly license). Satoshi's real weight axis is 300/400/500/700/900 — there is no 600/ SemiBold cut in this typeface at all, confirmed directly against Fontshare's API. Only 500 and 700 are shipped: 500 is what H3–H6, card titles, and the accent-text flourish actually use; 700 is H1/H2/hero. 400/300/900 were downloaded during initial implementation but had zero real consumers anywhere in either theme, so they were removed — no dead weight sitting in assets/fonts. Add a cut back only when a real design need calls for it. Shipped as static weight cuts, NOT the true variable font — see §7 for why, and the upgrade path when available. */ @font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/satoshi-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/satoshi-latin-700-normal.woff2') format('woff2'); } /* ============================================================ 2. METRIC-MATCHED FALLBACK FACES — CLS mitigation ============================================================ Standard "fallback font" technique (used by next/font, Nuxt, Fontaine): a @font-face that resolves to a LOCAL system font (Arial/Helvetica) but with its vertical metrics + average glyph width overridden to match the real webfont. The browser paints this during the swap gap so text does not visibly reflow when Inter/Satoshi finish loading. Values below are computed, not guessed — extracted from the actual shipped .woff2 files (fontTools) against Arial's well-documented metrics (unitsPerEm 2048, ascent 1854, descent 434, lineGap 67, xAvgCharWidth 904): sizeAdjust = (webfont avgCharWidth / webfont UPM) / (Arial avgCharWidth / Arial UPM) ascentOverride = (webfont ascent / webfont UPM) / sizeAdjust descentOverride = (webfont descent / webfont UPM) / sizeAdjust lineGapOverride = (webfont lineGap / webfont UPM) / sizeAdjust Inter-400 metrics: UPM 2048, ascent 1984, descent 494, lineGap 0, avgWidth 1250 Satoshi-700 metrics: UPM 1000, ascent 1010, descent 240, lineGap 100, avgWidth 580 */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'), local('Segoe UI'); ascent-override: 70.05%; descent-override: 17.44%; line-gap-override: 0%; size-adjust: 138.3%; } @font-face { font-family: 'Satoshi Fallback'; src: local('Arial'), local('Helvetica'), local('Segoe UI'); ascent-override: 76.86%; descent-override: 18.26%; line-gap-override: 7.61%; size-adjust: 131.41%; } /* ============================================================ 3. SEMANTIC FONT-FAMILY TOKENS ============================================================ Components and utility classes should reference these — never a raw font name. Several tokens intentionally resolve to the same physical family today; they stay distinct so a role's typeface can change independently later without an audit of every call site. --dhyan-font-brand Live-text stand-in for the wordmark (e.g. plain-text , JSON-LD, any place the logo can't be an image). Deliberately NOT Google Sans Flex — that face is licensed for the static logo export only and is never fetched as a webfont. Satoshi is the closest self-hosted relative and the sanctioned substitute. --dhyan-font-display Large marketing type: hero, section titles, pricing plan names, oversized numerals. --dhyan-font-heading Content headings (H2–H6), card/product titles. Same family as display today; split out so a denser "in-app" heading face could be swapped in later without touching marketing headlines. --dhyan-font-body Paragraph copy, testimonials, table cells. --dhyan-font-ui Buttons, navigation, form labels, footer chrome — interactive/structural UI text. --dhyan-font-caption Small text: eyebrows, badges, meta, captions. --dhyan-font-mono Code, pre, tabular technical values. Deliberately a system stack — never worth webfonting monospace in a WordPress theme (payload cost with no brand payoff; every OS ships a good one). */ :root { --dhyan-font-system-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --dhyan-font-display: var( --wp--preset--font-family--display, 'Satoshi', 'Satoshi Fallback', var(--dhyan-font-system-fallback) ); --dhyan-font-body: var( --wp--preset--font-family--body, 'Inter', 'Inter Fallback', var(--dhyan-font-system-fallback) ); --dhyan-font-brand: var(--dhyan-font-display); --dhyan-font-heading: var(--dhyan-font-display); --dhyan-font-ui: var(--dhyan-font-body); --dhyan-font-caption: var(--dhyan-font-body); --dhyan-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Not one of the 7 core roles — kept for two deliberate editorial flourishes in dhyan-site-theme/src/marketing-section.css: the trusted-by logo-ticker wordmark and the decorative testimonial quote mark. System stack only, no webfont — nothing to self-host, nothing that can go stale like the old Caveat accent token did. */ --dhyan-font-serif: Georgia, 'Times New Roman', serif; } /* ============================================================ 4. PRIMITIVE TYPE SCALE — size / weight / line-height / tracking ============================================================ Aliases WP theme.json presets where available so the block editor and this stylesheet always agree. Hero and Section are fluid (clamp) — already responsive typography, not a fixed breakpoint table. */ :root { --dhyan-text-small: var(--wp--preset--font-size--small, 0.875rem); --dhyan-text-medium: var(--wp--preset--font-size--medium, 1rem); --dhyan-text-lead: var(--wp--preset--font-size--lead, 1.125rem); --dhyan-text-large: var(--wp--preset--font-size--large, 1.25rem); --dhyan-text-x-large: var(--wp--preset--font-size--x-large, 1.5rem); --dhyan-text-section: var(--wp--preset--font-size--section, clamp(1.625rem, 3vw, 2rem)); --dhyan-text-xx-large: var(--wp--preset--font-size--xx-large, 2rem); --dhyan-text-hero: var(--wp--preset--font-size--hero, clamp(2rem, 4vw, 3rem)); --dhyan-font-weight-normal: 400; --dhyan-font-weight-medium: 500; --dhyan-font-weight-semibold: 600; --dhyan-font-weight-bold: 700; --dhyan-font-weight-black: 900; --dhyan-leading-tight: 1.2; --dhyan-leading-snug: 1.4; --dhyan-leading-normal: 1.6; --dhyan-leading-relaxed: 1.7; /* Letter-spacing — tight on display sizes, open on labels/eyebrows */ --dhyan-tracking-tighter: -0.025em; --dhyan-tracking-tight: -0.02em; --dhyan-tracking-snug: -0.015em; --dhyan-tracking-compact: -0.01em; --dhyan-tracking-display: -0.03em; --dhyan-tracking-normal: 0; --dhyan-tracking-wide: 0.01em; --dhyan-tracking-wider: 0.02em; --dhyan-tracking-label: 0.04em; --dhyan-tracking-badge: 0.06em; --dhyan-tracking-section: 0.07em; --dhyan-tracking-caps: 0.08em; --dhyan-tracking-eyebrow: 0.1em; --dhyan-tracking-meta: 0.12em; --dhyan-tracking-kicker: 0.14em; --dhyan-tracking-overline: 0.15em; --dhyan-tracking-spaced: 0.2em; } /* ============================================================ 5. OPENTYPE FEATURES + OPTICAL SIZING ============================================================ */ :root { --dhyan-feature-default: 'kern' 1, 'liga' 1, 'calt' 1; --dhyan-feature-tabular: 'tnum' 1, 'lnum' 1; /* Static weight cuts have no 'opsz' axis today, so this is a documented no-op — kept explicit so it activates automatically the day a true variable file (Inter Variable or Satoshi Variable) replaces the static cuts, per §7. */ --dhyan-optical-sizing: auto; } /* ============================================================ 6. BASE RULES + UTILITIES ============================================================ */ .wp-site-blocks, .editor-styles-wrapper { font-feature-settings: var(--dhyan-feature-default); font-optical-sizing: var(--dhyan-optical-sizing); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Framework-agnostic tabular-figures utility — for markup Tailwind's build never scans (WooCommerce-generated price HTML, PHP-echoed numerals in the block editor, admin-side previews). Tailwind's own `tabular-nums` utility covers everything inside src/tailwind.css. */ .dhyan-tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: var(--dhyan-feature-tabular); } /* WooCommerce renders price markup outside Tailwind's build — cover it here so pricing tables and product cards get tabular figures everywhere. */ .woocommerce-Price-amount { font-variant-numeric: tabular-nums; } /* ============================================================ 7. VARIABLE-FONT UPGRADE PATH — reference only, not active ============================================================ Fontshare's unauthenticated CDN serves Satoshi as static weight cuts, not the true variable font (that requires a Fontshare account/API key). The real weight axis is 300/400/500/700/900 — no 600. When the variable file is sourced, replace the 2 Satoshi @font-face blocks in §1 (500 and 700 — the only weights any current rule requests) with the single block below, and the weight-decoupled token architecture in §3 needs zero further changes — every consumer already reads --dhyan-font-display/-heading/-brand, not a literal name. @font-face { font-family: 'Satoshi Variable'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/satoshi-variable-latin.woff2') format('woff2-variations'); } .wp-site-blocks .has-hero-font-size { font-variation-settings: 'wght' 700; } Re-run the §2 fallback-metric calculation against the variable file's own hhea/OS2 table before shipping — static and variable builds of the same family can report slightly different metrics. */