/* * TYPOGRAPHY DEMO — Prueba tipográfica editorial * * Set propuesto: DM Serif Text (serif) + Inter (sans-UI) * * Por qué Inter sobre Montserrat (desvío justificado): * • Inter fue diseñada específicamente para interfaces de pantalla * (Rasmus Andersson, 2017). Lectura superior en meta pequeño (11–13px). * • Montserrat es geométrica-display: hermosa en display pero menos * legible en densidades editoriales (fechas, autores, etiquetas). * • Inter tiene variable font (un solo woff2 para todos los pesos), * mejor cobertura de caracteres editoriales (numeros, comillas, em-dash). * • Impacto: diferencia visual mínima para el cliente; ganancia técnica real. * • Rollback: cambiar --font-sans / --font-meta de 'Inter' a 'Montserrat' * en este archivo y re-registrar el @font-face correspondiente. * * ACTIVAR DEMO: * PHP: define('INFORME_TYPO_DEMO', true) en wp-config.php * * CONTROLADOR (sin editar archivos): parámetro URL ?typo= * ?typo=dm → DM Serif Text + Inter * ?typo=lora → Lora + Inter * ?typo=playfair → Playfair Display + Inter * ?typo=off → vuelve a Majrit (fuentes locales) * Sin parámetro → IBM (default) * * JS (DevTools): document.documentElement.dataset.typo = 'ibm' * Revertir JS: delete document.documentElement.dataset.typo * * SEPARACIÓN DE RESPONSABILIDADES (demo vs producción): * • Este archivo NO toca los @font-face de typography.css (MajritTx, MarcinAntB, MJRT…) * Los @font-face legacy quedan intactos. El demo solo sobreescribe los TOKENS. * • En producción, si se confirma la tipografía: * 1. Descargar DM Serif Text woff2 → /wp-content/fonts/dm-serif-text-*.woff2 * 2. Descargar Inter woff2 → /wp-content/fonts/inter-*.woff2 * 3. Agregar @font-face locales en typography.css (no en este archivo) * 4. Actualizar informe_preload_fonts() para hacer preload de dm-serif-text-regular.woff2 * 5. Remover la carga de Google Fonts del enqueue.php * * ALCANCE: Solo afecta componentes que usan var(--font-*). * Componentes con font-family hardcodeado requieren Phase 2 (ver AUDIT_CSS_TYPO_SPACING.md). * * Compatible con: LiteSpeed Cache, Cloudflare, Redis * (las variables CSS son transparentes al cache — el HTML con data-typo="demo" sí se cachea) */ /* ---------------------------------------------------------------- DEMO TOGGLE — Sobreescribe tokens según data-typo en Variantes: ibm | lora | playfair (controlador ?typo=X) ---------------------------------------------------------------- */ /* ---- DM Serif Text + Inter ---- */ html[data-typo="off"] { --font-serif: 'DM Serif Text', Georgia, 'Times New Roman', serif; --font-primary: 'DM Serif Text', Georgia, 'Times New Roman', serif; --font-serif-roman: 'DM Serif Text', Georgia, 'Times New Roman', serif; --font-secondary: 'DM Serif Text', Georgia, 'Times New Roman', serif; --font-serif-black: 'DM Serif Text', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-meta: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ls-hero: -.028rem; --ls-title-lg: -.016rem; --ls-title-base: -.008rem; --ls-title-md: -.005rem; --ls-title-sm: 0rem; --lh-hero: 1.10; --lh-title-base: 1.18; --lh-title-list: 1.19; --lh-title-sm: 1.22; --lh-excerpt: 1.44; --lh-article-body: 1.60; } /* ---- Lora + Inter ---- */ html[data-typo="off"] { --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-primary: 'Lora', Georgia, 'Times New Roman', serif; --font-serif-roman: 'Lora', Georgia, 'Times New Roman', serif; --font-secondary: 'Lora', Georgia, 'Times New Roman', serif; --font-serif-black: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-meta: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ls-hero: -.028rem; --ls-title-lg: -.016rem; --ls-title-base: -.008rem; --ls-title-md: -.005rem; --ls-title-sm: 0rem; --lh-hero: 1.09; --lh-title-base: 1.16; --lh-title-list: 1.18; --lh-title-sm: 1.20; --lh-excerpt: 1.42; --lh-article-body: 1.60; } /* ---- Playfair Display + Inter ---- */ html[data-typo="off"] { --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-primary: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-serif-roman: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-secondary: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-serif-black: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-meta: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ls-hero: -.028rem; --ls-title-lg: -.016rem; --ls-title-base: -.008rem; --ls-title-md: -.005rem; --ls-title-sm: 0rem; --lh-hero: 1.10; --lh-title-base: 1.18; --lh-title-list: 1.19; --lh-title-sm: 1.22; --lh-excerpt: 1.45; --lh-article-body: 1.62; }