Integración tipográfica — Explainer de Alcance

Qué significa y por qué importa

Qué incluye SessDev

• Ingestión de los archivos de fuente provistos por el cliente (woff2 preferido, woff fallback) o configuración de servicio hosted (kit de Adobe Fonts, URL de Google Fonts) vía un handoff estructurado.
• Estrategia de carga elegida contra CLS medido: font-display: swap u optional, preload hints en pesos del critical-path, carga diferida para pesos no críticos.
• Declaraciones @font-face (o wiring de next/font cuando aplica) con format hints correctos, unicode-range cuando el subsetting está en alcance, y font-feature-settings que el cliente requiera.
• Fallback stack determinista matcheado en x-height y ancho para minimizar layout shift entre el render de fallback y el de webfont.
• Set de tokens de type-scale (display, h1–h6, body, body-sm, label, caption) cableado en Tailwind config y variables CSS para que los componentes referencien pasos de escala por intención.
• Wiring de cada peso que usa el diseño (ej. 400/500/700) incluyendo variantes itálicas cuando se proveen; los pesos no usados por el diseño no se cargan.
• Subsetting de fuentes self-hosted a los locales declarados en alcance (latin, latin-ext o rangos por locale) para mantener el payload bajo el presupuesto documentado.
• 1 pasada de validación: auditoría Lighthouse de carga tipográfica, QA visual contra la spec tipográfica provista, verificación de licencia de que cada peso cargado está cubierto.
• Documento de handoff listando cada familia/peso cargado, su fuente (self-hosted o servicio), su referencia de licencia y el procedimiento para swap de un typeface sin tocar código de componentes.

Qué queda excluido

• Selección tipográfica — evaluar typefaces, matchearlos con voz de marca, parear fuentes display y body.
• Diseño de typeface custom, dibujo de glifos, autoría de features OpenType, ligaduras custom o sets estilísticos.
• Procurement de licencias — negociar con foundries, comprar licencias webfont, calcular tiers de monthly-pageview, asegurar derechos de redistribución.
• Autoría del sistema tipográfico — decidir la type-scale, los pareos de line-height, ratios modulares o reglas de vertical-rhythm.
• Brand research, auditorías tipográficas competitivas, análisis tipográfico por categoría.
• Auditoría tipográfica de la selección provista, testing de legibilidad, estudios de comprensión lectora.
• Research tipográfico multilingüe — verificar cobertura de glifos para scripts no-Latinos, sourcing de fuentes complementarias para CJK o RTL, reviews de calidad por par de idiomas.
• Hinting, pasadas de kerning, tuning custom de features OpenType o cualquier edición del archivo de fuente.
• Diseño de display type, tipografía hero custom, lettering o headlines hand-set.
• Creación de icon-font. El wiring de un icon font existente está en alcance vía el item de integración de librería de iconos; autorarlo no.
• Autoría de la documentación del sistema tipográfico de marca — reglas de uso, grids do/don't, secciones de brand guidelines sobre tipografía.

Riesgos si no se define correctamente

• Fuentes sin licencia en producción

  Self-hostear un archivo de fuente sin licencia webfont válida expone al cliente a enforcement del foundry y notices de takedown. SessDev valida que cada peso cargado tenga una referencia de licencia en el handoff; si un archivo llega sin una, se rechaza. El procurement de licencias permanece con el cliente.

• Cumulative Layout Shift por font swap

  Un font-display: swap ingenuo sin un fallback stack matcheado flipea ancho y alto del texto cuando llega el webfont, tankeando CLS y Core Web Vitals. El trabajo de fallback stack en alcance tunea ascent-override y size-adjust para minimizar el salto; sin esa pasada, la página sale con una regresión CWV medible.

• Mismatch de fallback stack en locales no soportados

  Un fallback stack tuneado para Latin puede romperse catastróficamente en un locale cuyo script primario no está cubierto por el webfont. La exclusión de research tipográfico multilingüe es intencional; si se agregan locales más allá del set declarado, el fallback stack debe revisitarse bajo el retainer Care.

• Glifos faltantes en runtime

  Una fuente licenciada que no cubre un glifo requerido (em dash, smart quote, carácter acentuado, letra griega en un headline de marketing) cae silenciosamente al sistema, produciendo inconsistencia visible. La validación de cobertura de glifos es responsabilidad del equipo de diseño; SessDev integra lo que el cliente valida.

• Weight sprawl infla el payload

  Cargar cada peso disponible “por las dudas” infla el payload de fuentes en cientos de kilobytes por locale. El alcance solo carga pesos que el diseño efectivamente usa; la disciplina continua a medida que nuevos componentes salen es lo que el retainer Care aplica.

• Regresión de performance tras swap de fuente

  Cambiar a una familia más pesada o agregar un peso nuevo sin re-correr la auditoría de loading-strategy puede re-introducir regresiones de CLS, FCP y LCP. El procedimiento de handoff documenta el paso de auditoría; saltearlo es la causa de drift más común post-launch.

• Drift de FOIT / FOUT entre navegadores

  Distintos navegadores honran las estrategias de font-display inconsistentemente; lo que se veía correcto en Chromium puede renderizar como flash de texto invisible en Safari para un porcentaje de usuarios. La validación en alcance agarra la baseline; las regresiones continuas por versión de navegador las absorbe el retainer Care.

Ítems de alcance relacionados

• brand_asset_injectionLogos y assets de marca a menudo embeben tipografía; el typeface usado dentro de un logo es propiedad del archivo de logo, no de esta capa.
• color_token_setupTipografía y color son las dos mitades del sistema visual. Mismo principio de exclusión: integración, no autoría.
• icon_library_integrationLos iconos pueden depender de librerías font-based; el wiring de un icon font existente está cubierto allá.
• technical_seoLa carga de fuentes impacta Core Web Vitals (LCP, CLS) directamente, lo que alimenta señales de ranking SEO cableadas en el alcance de SEO técnico.
• media_infrastructureLos preload hints y el serving de CDN para fuentes self-hosted usan las mismas primitivas de delivery que media.
• content_injectionLos tokens de type-scale son consumidos por el copy inyectado; el copy en sí sigue el alcance de inyección de contenido.

Preguntas frecuentes

¿SessDev puede seleccionar nuestras fuentes?

No. La selección tipográfica es un entregable de la disciplina de diseño y está explícitamente fuera de alcance. SessDev integra los typefaces que tu equipo de diseño o estudio externo elija.

¿Manejan el licensing de fuentes?

No. El procurement de licencias, negociación con foundries, cálculo de tiers de monthly-pageview y cualquier acuerdo de redistribución permanecen con el cliente. SessDev valida que cada peso cargado tenga una referencia de licencia al momento de integrar, pero no compra ni negocia licencias.

¿Pueden diseñar un typeface custom para nosotros?

No. El diseño de typeface custom, el dibujo de glifos y la autoría de features OpenType son entregables de foundry y están fuera de alcance. SessDev integra lo que un foundry o tu equipo de diseño entregue.

¿Soportan variable fonts?

Sí, cuando el cliente provee un archivo de variable font con licencia válida. El wiring usa tokens de font-variation-settings; la decisión de qué ejes usar es del equipo de diseño.

¿La capa tipográfica pasará Core Web Vitals?

El trabajo de loading-strategy en alcance está tuneado para CLS y LCP contra la lista de familias provista. Los resultados de CWV también dependen de factores fuera de tipografía (peso de imágenes, scripts de terceros). El retainer Care absorbe drift de CWV a través de cambios de browser-engine post-launch.