🔤 Tipografía Fluida

Escalado de Texto Responsivo con Bootstrap 5.3 y CSS clamp()

Bootstrap 5.3 CSS clamp() Fuentes Variables

Tipografía Bootstrap + Escalado Fluido

Bootstrap 5.3 proporciona excelentes utilidades de tipografía, pero para texto verdaderamente responsivo que escale suavemente en todos los tamaños de pantalla, combinamos el sistema de Bootstrap con clamp() para tipografía fluida.

El Poder de clamp()

La función clamp() permite que los tamaños de fuente escalen suavemente entre valores mínimos y máximos:

font-size: clamp(mínimo, preferido, máximo);

/* Ejemplo */
.fluid-display {
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  /* Nunca menor que 2.5rem (40px)
     Escala con viewport: 5vw + 1rem
     Nunca mayor que 5rem (80px) */
}

✅ Bootstrap Proporciona

  • display-1 hasta display-6 - Encabezados destacados
  • h1 hasta h6 - Clases de encabezado
  • lead - Párrafos enfatizados
  • fs-1 hasta fs-6 - Utilidades de tamaño de fuente
  • fw-* - Utilidades de peso de fuente
  • lh-* - Utilidades de altura de línea

💡 Las Clases Fluidas Personalizadas Agregan

  • Escalado suave en todos los tamaños de pantalla
  • Sin saltos abruptos en los breakpoints
  • Límites mínimos y máximos seguros
  • Funciona junto con utilidades Bootstrap
  • Mejor UX en tamaños de pantalla no comunes
  • Mantiene el lenguaje de diseño de Bootstrap

Tres Enfoques Comparados

Redimensiona la ventana del navegador para ver las diferencias:

❌ Tamaño Fijo
24px fijo

font-size: 24px;
Mismo tamaño en todas las pantallas - no es responsivo

⚠️ Unidades Viewport
Tamaño 5vw

font-size: 5vw;
Escala pero puede ser muy pequeño o enorme

✅ Fluido (clamp)
Tamaño fluido

clamp(1rem, 5vw, 3rem);
Escala inteligentemente con límites seguros

Escala Bootstrap + Tipografía Fluida

Así es como las clases fluidas extienden el sistema de tipografía de Bootstrap. Redimensiona para ver el escalado suave:

Display 1 + Fluido

clamp(2.5rem, 5vw + 1rem, 5rem)

Display 4 + Fluido

clamp(1.8rem, 3vw + 0.5rem, 3.5rem)

Párrafo lead + Fluido

clamp(1rem, 1.5vw + 0.5rem, 1.5rem)

Texto de cuerpo + Tamaño fluido para legibilidad óptima

clamp(0.9rem, 1vw + 0.3rem, 1.1rem)

Grid Bootstrap + Tipografía Fluida

Bootstrap Estándar

Esto usa la clase lead predeterminada de Bootstrap.

Párrafo regular con la tipografía base de Bootstrap. Bueno, pero fijo en los breakpoints.

Bootstrap + Fluido

Esto combina lead con la clase fluid-lead.

Párrafo con escalado fluido. Redimensiona la ventana para ver transiciones suaves en cualquier tamaño.

Guía de Implementación

Paso 1: Usa Clases Bootstrap

<h1 class="display-1 fw-bold">Título</h1>
<p class="lead">Subtítulo</p>

Paso 2: Agrega Clases Fluidas Personalizadas

<h1 class="display-1 fluid-display-1 fw-bold">Título</h1>
<p class="lead fluid-lead">Subtítulo</p>

Paso 3: Define CSS Fluido

.fluid-display-1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
}

.fluid-lead {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
}