{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Tipografía Web: La revolución de las Fuentes Variables

Optimiza el rendimiento y la precisión de tu diseño utilizando un solo archivo de fuente para infinitos estilos y pesos.

La tipografía es el cimiento de la web; casi todo lo que hacemos en una pantalla es leer [00:00:41]. Hasta hace poco, cada variante de una fuente (negrita, cursiva, fina) requería descargar un archivo independiente, lo que penalizaba el rendimiento y limitaba la creatividad [00:01:19].

Las **Fuentes Variables** (Variable Fonts) cambian las reglas del juego: un solo archivo contiene todo el espectro de estilos. Esto permite un control absoluto mediante 'ejes' que podemos regular como si fueran un interruptor con regulador de intensidad [00:02:07].

En esta lección aprenderás a manipular estos ejes (peso, ancho, inclinación), a tratar iconos como texto para ganar flexibilidad y a aplicar fórmulas matemáticas para lograr una alineación perfecta entre texto e iconos [00:05:17].

  • Control infinito con una sola fuente.
  • En una fuente variable, no estamos limitados a saltos de 100 en 100 (400, 700). Podemos usar valores precisos como 532 si el diseño lo requiere [00:03:11]. Los ejes más comunes son:
  • - **wght (Weight):** Controla el grosor de la letra.
  • - **wdth (Width):** Ajusta el ancho (condensada o extendida).
  • - **slnt (Slant):** Controla la inclinación.

Los Ejes de Variación

Control infinito con una sola fuente.

En una fuente variable, no estamos limitados a saltos de 100 en 100 (400, 700). Podemos usar valores precisos como 532 si el diseño lo requiere [00:03:11]. Los ejes más comunes son:

- **wght (Weight):** Controla el grosor de la letra.

- **wdth (Width):** Ajusta el ancho (condensada o extendida).

- **slnt (Slant):** Controla la inclinación.

Iconos como Texto

Vectores, ligereza y herencia CSS.

Tratar los iconos como fuentes en lugar de imágenes (PNG/SVG) ofrece ventajas críticas: son vectoriales (nunca se pixelan), pesan mucho menos y heredan propiedades de texto [00:03:46].

Al ser tratados como texto, puedes cambiar su color, tamaño o añadir sombras usando simplemente CSS, exactamente igual que si fuera un párrafo [00:03:58].

La Fórmula de la Alineación Perfecta

Matemáticas para el pulido final.

Alinear un icono con un texto suele ser frustrante porque a menudo parece 'un poquito arriba' o abajo [00:04:34]. La solución es metódica [00:05:36]:

1. Calcula la **Distancia de la Línea Base**: Multiplica el tamaño de la fuente por la altura de la línea (`font-size * line-height`).

2. Aplica la **Fórmula Mágica**: `(Distancia de línea base - Tamaño del icono) / 2` [00:05:23].

El resultado es el desplazamiento exacto que necesita el icono para una armonía visual perfecta [00:05:28].

Consejos de Rendimiento

Optimiza tu carga y experiencia de usuario.

Aunque las fuentes variables son más eficientes, es crucial optimizar su uso: elige solo los ejes que realmente necesitas para evitar cargar datos innecesarios [00:06:12].

Utiliza `font-display: swap` para mostrar un texto legible mientras la fuente se carga, evitando bloqueos de renderizado [00:06:45].

CSS
22

Tipografía Web: La revolución de las Fuentes Variables

Optimiza el rendimiento y la precisión de tu diseño utilizando un solo archivo de fuente para infinitos estilos y pesos.

Test de Desarrollo Web (CulTest)

Código del tema: --color-primary: #2563eb;

📘 Teoría

Los Ejes de Variación

Control infinito con una sola fuente.

En una fuente variable, no estamos limitados a saltos de 100 en 100 (400, 700). Podemos usar valores precisos como 532 si el diseño lo requiere [00:03:11]. Los ejes más comunes son:

- **wght (Weight):** Controla el grosor de la letra.

- **wdth (Width):** Ajusta el ancho (condensada o extendida).

- **slnt (Slant):** Controla la inclinación.

- **opsz (Optical Size):** Optimiza la legibilidad según el tamaño de visualización [00:02:34].

Para usarlos en CSS, empleamos la propiedad `font-variation-settings`, aunque muchas ya están mapeadas a propiedades estándar como `font-weight`.

Iconos como Texto

Vectores, ligereza y herencia CSS.

1

Tratar los iconos como fuentes en lugar de imágenes (PNG/SVG) ofrece ventajas críticas: son vectoriales (nunca se pixelan), pesan mucho menos y heredan propiedades de texto [00:03:46].

2

Al ser tratados como texto, puedes cambiar su color, tamaño o añadir sombras usando simplemente CSS, exactamente igual que si fuera un párrafo [00:03:58].

La Fórmula de la Alineación Perfecta

Matemáticas para el pulido final.

1

Alinear un icono con un texto suele ser frustrante porque a menudo parece 'un poquito arriba' o abajo [00:04:34]. La solución es metódica [00:05:36]:

2

1. Calcula la **Distancia de la Línea Base**: Multiplica el tamaño de la fuente por la altura de la línea (`font-size * line-height`).

3

2. Aplica la **Fórmula Mágica**: `(Distancia de línea base - Tamaño del icono) / 2` [00:05:23].

4

El resultado es el desplazamiento exacto que necesita el icono para una armonía visual perfecta [00:05:28].

Consejos de Rendimiento

Optimiza tu carga y experiencia de usuario.

1

Aunque las fuentes variables son más eficientes, es crucial optimizar su uso: elige solo los ejes que realmente necesitas para evitar cargar datos innecesarios [00:06:12].

2

Utiliza `font-display: swap` para mostrar un texto legible mientras la fuente se carga, evitando bloqueos de renderizado [00:06:45].

🧭 Visuales clave

Los Ejes de Variación

Visualiza cómo cada eje de una fuente variable (wght, wdth, slnt, opsz) y cómo afectan al diseño.

Gráfico que muestra los diferentes ejes de una fuente variable (wght, wdth, slnt, opsz) y cómo afectan al diseño.

Crear una fuente de iconos desde SVG con IcoMoon

Encaja en esta lección porque conecta tipografía variable, icon fonts y flujo profesional de assets tipográficos.

Proceso visual de crear una fuente de iconos desde SVG en IcoMoon

🧪 Aprende probando

Ejemplo Demo: Ajuste Fino de Peso Experimenta con el peso de la fuente usando valores no estándar para ver la fluidez de las fuentes variables.
⌄
Ejemplo Reto: El Icono Perfecto Tienes un texto de 16px con line-height de 1.5. El icono mide 20px. Calcula el desplazamiento necesario para centrarlo (Distancia Línea Base = 16 * 1.5 = 24px) y aplícalo usando un margen o transform.
⌄

🧰 Recursos

Enlaces útiles

V-Fonts - Repositorio de fuentes variables MDN - Guía de fuentes variables MDN CSS MDN Layout Cookbook
Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS
Recursos del curso 78
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 21
Tipografía en CSS: sistema, legibilidad y rendimiento
Lección 23
Text-wrap: Tipografía adaptativa y estética
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .