Sistema de Tipografía Fluida

¿Qué hace Sistema de Tipografía Fluida?

Propósito

El skill de Sistema de Tipografía Fluida permite crear una escala tipográfica que se adapta suavemente al tamaño de la ventana gráfica del usuario. En lugar de saltar entre tamaños fijos en puntos de interrupción específicos, la tipografía se escala linealmente entre valores mínimos y máximos definidos usando la función CSS clamp(). Esto mejora la armonía visual, la legibilidad y reduce el esfuerzo de mantenimiento de numerosas media queries.

Casos de Uso

• Construir un sistema de diseño responsivo desde cero.
• Modernizar la tipografía de un sitio web existente para lograr una mayor consistencia entre dispositivos.
• Crear diseños donde el texto deba llenar perfectamente el espacio disponible en todos los tamaños de pantalla.
• Simplificar el CSS reemplazando múltiples reglas @media con un conjunto único de variables fluidas.

Cuándo NO Usarlo

• Soporte de navegadores antiguos: Si el proyecto debe ser compatible con navegadores que no soportan clamp() (por ejemplo, Internet Explorer).
• Diseños de ancho fijo: Cuando el diseño no es responsivo en absoluto.
• Precisión extrema: Si pautas de marca específicas exigen tamaños de píxel exactos en todas las resoluciones, que no se alinean con una escala lineal.

Entradas

Para generar un sistema tipográfico fluido, necesitas:

1. Rango de Ventana Gráfica:
   • min-width: El ancho de pantalla donde comienza la escala (ej. 320px).
   • max-width: El ancho de pantalla donde se detiene la escala (ej. 1200px).
2. Tamaño de Fuente Base:
   • min-size: El tamaño de fuente del cuerpo en min-width (ej. 16px).
   • max-size: El tamaño de fuente del cuerpo en max-width (ej. 20px).
3. Relación de Escala:
   • Un multiplicador para determinar el tamaño de los encabezados (ej. 1.250 para "Tercera Mayor", 1.333 para "Cuarta Perfecta").

Salidas

1. Propiedades Personalizadas CSS: Un bloque de variables CSS que definen la escala fluida.
2. Clases de Utilidad Tipográfica: (Opcional) Clases CSS para aplicar fácilmente la escala.
3. Documentación de Jerarquía: Un mapeo claro de tamaños desde Cuerpo hasta H1.

Flujo de Trabajo

1. Definir los Parámetros de la Escala

Determina las ventanas gráficas mínima y máxima y los tamaños base. Ejemplo: 320px a 1280px, base de 16px a 18px.

2. Elegir una Escala Tipográfica

Selecciona una relación que se adapte a la voz de la marca.

• 1.067 (Segunda Menor): Diferencias sutiles, buena para datos densos.
• 1.200 (Tercera Menor): Estándar, equilibrada.
• 1.414 (Cuarta Aumentada): Alto contraste, encabezados llamativos.

3. Calcular los Niveles Jerárquicos

Multiplica el tamaño base por la relación para cada nivel (H6 a H1). Fórmula: Tamaño_nivel = Base * (Relación ^ Nivel)

4. Generar Fórmulas Fluidas

Convierte los valores mínimos/máximos de píxel calculados en una función clamp(). clamp(min, preferido, max)

El cálculo del valor preferido: pendiente = (tamaño_max - tamaño_min) / (viewport_max - viewport_min) intercepción_y = tamaño_min - pendiente * viewport_min preferido = intercepción_y + (pendiente * 100vw)

5. Implementación

Aplica las variables CSS generadas al diseño.

Reglas de Decisión

• Accesibilidad Primero: El min-size para el texto del cuerpo rara vez debe estar por debajo de 1rem (16px).
• Preferencia del Usuario: Siempre usa unidades rem para la salida final, de modo que se respeten las configuraciones de tamaño de fuente del navegador del usuario. Nunca uses tamaño solo en vw sin un clamp mínimo/máximo basado en rem — las unidades puras de viewport ignoran el zoom del navegador y las preferencias de tamaño de fuente, y pueden fallar en WCAG 1.4.4 (Cambio de Tamaño del Texto).
• Intensidad de la Escala: Usa relaciones más pequeñas para sitios con mucho tráfico móvil para evitar que los encabezados se vuelvan excesivamente grandes en pantallas pequeñas.

Restricciones

• Responsividad: La tipografía debe mantenerse dentro de los límites de su contenedor sin causar desbordamiento.
• Legibilidad: La longitud de línea (medida) debe mantenerse idealmente entre 45 y 75 caracteres. Ajusta los anchos de los contenedores según cómo escale el texto.
• Jerarquía: H1 siempre debe ser visualmente distinto y más grande que H2, que debe ser más grande que H3, etc.

Patrones de Falla Comunes

• Matemática Incorrecta: Resulta en texto que se encoge cuando la pantalla se agranda.
• Desajuste de Unidades: Mezclar px y rem de maneras que rompen el zoom del navegador.
• Sobreescalado: Los encabezados se vuelven tan grandes en monitores 4K que dominan toda la ventana gráfica.
• Accesibilidad: Olvidar probar cómo se comporta la escala fluida cuando un usuario hace zoom o aumenta el tamaño de fuente base del sistema operativo o navegador (WCAG 1.4.4 Cambio de Tamaño del Texto, WCAG 1.4.10 Reflujo).

Criterios de Validación

• La tipografía escala suavemente al redimensionar la ventana del navegador.
• No se observan "saltos" ni cambios repentinos de tamaño.
• Todo el texto es legible a 320px de ancho.
• Los encabezados mantienen una jerarquía clara en relación al texto del cuerpo.
• El sistema usa unidades rem para la base y clamp() para el comportamiento fluido.
• El texto se refluye sin pérdida de contenido o funcionalidad al 400% de zoom del navegador (WCAG 1.4.10 Reflujo) y respeta la preferencia de tamaño de fuente del usuario (WCAG 1.4.4).