{"id":81163,"date":"2025-12-01T10:24:50","date_gmt":"2025-12-01T09:24:50","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=81163&preview=true&preview_id=81163"},"modified":"2025-12-03T14:16:57","modified_gmt":"2025-12-03T13:16:57","slug":"tipografia-fluida","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/tipografia-fluida\/","title":{"rendered":"Escalar la tipograf\u00eda de forma fluida con tipograf\u00eda adaptable"},"content":{"rendered":"

Hacer que el texto se vea bien en todas las pantallas no es tan sencillo como parece. Durante mucho tiempo, los dise\u00f1adores web utilizaron puntos de ruptura (breakpoints) de media queries para cambiar el tama\u00f1o de las fuentes, pero este enfoque se vuelve r\u00e1pidamente complicado a medida que aparecen m\u00e1s dispositivos y tama\u00f1os de pantalla.<\/p>\n

A partir de WordPress 6.1<\/a> (publicado en noviembre de 2022), hay una forma mejor: la tipograf\u00eda fluida. Ajusta autom\u00e1ticamente los tama\u00f1os de fuente definidos en tu archivo theme.json<\/code> para que se escalen suavemente, independientemente de la anchura o altura de la pantalla.<\/p>\n

Esta funcionalidad no s\u00f3lo cambia el tama\u00f1o de la fuente, sino que tambi\u00e9n ajusta la altura de las l\u00edneas, el espaciado entre palabras e incluso el espacio en blanco, haciendo que tu dise\u00f1o sea m\u00e1s coherente, legible y accesible en todos los dispositivos.<\/p>\n

Este art\u00edculo explica c\u00f3mo funciona la tipograf\u00eda fluida, en qu\u00e9 se diferencia de los breakpoints tradicionales y c\u00f3mo implementarla en WordPress utilizando theme.json<\/code> y CSS.<\/p>\n

Pero antes, veamos c\u00f3mo gestion\u00e1bamos la tipograf\u00eda anteriormente y por qu\u00e9 la tipograf\u00eda fluida supone una mejora tan importante.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Tipograf\u00eda con breakpoints vs. tipograf\u00eda fluida<\/h2>\n

Una buena forma de entender la tipograf\u00eda fluida es compararla con su predecesora, la tipograf\u00eda con breakpoints, que utiliza media queries que se dirigen a anchos de dispositivo espec\u00edficos para el tama\u00f1o de la fuente.<\/p>\n

Tipograf\u00eda con breakpoints<\/h3>\n

Normalmente, los breakpoints son rangos espec\u00edficos de anchura de la ventana gr\u00e1fica, normalmente definidos en p\u00edxeles. Un enfoque com\u00fan es establecer tres breakpoints principales que se dirigen a las pantallas de m\u00f3viles, port\u00e1tiles y ordenadores de sobremesa.<\/p>\n

Estos son los ajustes t\u00edpicos de breakpoints para port\u00e1tiles en un archivo CSS<\/a>:<\/p>\n

@media (min-width: 48em) and (max-width: 74.9375em) {\n  body {\n    font-size: 1.125rem;\n    line-height: 1.6;\n  }\n  h1 {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n
Aunque esto funciona, tiene un gran inconveniente: a medida que aparecen nuevos dispositivos y tama\u00f1os de pantalla, la gesti\u00f3n de todos estos breakpoints se vuelve r\u00e1pidamente insostenible.<\/p>\n
\"Ilustraci\u00f3n
Ilustraci\u00f3n de c\u00f3mo la tipograf\u00eda se escala suavemente a trav\u00e9s de los breakpoints.<\/figcaption><\/figure>\n
En el ejemplo del GIF anterior, a medida que la ventana gr\u00e1fica se reduce, el texto cambia de tama\u00f1o a saltos desiguales. Este comportamiento \u00abescalonado\u00bb a menudo provoca un escalado inc\u00f3modo o impredecible, que no es ideal para una tipograf\u00eda fluida y coherente.<\/p>\n
Tipograf\u00eda fluida<\/h3>\n
Con la introducci\u00f3n de la propiedad CSS clamp()<\/a><\/code> en 2019, junto con las unidades de ventana gr\u00e1fica (vw<\/code> y vh<\/code>), se hizo posible un escalado autom\u00e1tico y y sin interrupciones.<\/p>\n
Estas herramientas te permiten definir tama\u00f1os de fuente que escalan din\u00e1micamente en funci\u00f3n de las dimensiones de la ventana gr\u00e1fica, lo que elimina la necesidad de m\u00faltiples breakpoints.<\/p>\n
Aqu\u00ed tienes un ejemplo para un tama\u00f1o de fuente medio utilizando clamp()<\/code>:<\/p>\n
.has-medium-font-size {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);\n}<\/code><\/pre>\n
M\u00e1s adelante veremos con m\u00e1s detalle c\u00f3mo funciona clamp()<\/code>, pero por ahora, piensa en ella como una f\u00f3rmula que establece los tama\u00f1os de fuente m\u00ednimo, preferido y m\u00e1ximo, asegurando que el texto se escala suavemente a trav\u00e9s de las pantallas.<\/p>\n
\"Demostrando
Demostrando una tipograf\u00eda fluida.<\/figcaption><\/figure>\n
En este GIF, a medida que la ventana se estrecha, el texto se ajusta con fluidez. No hay saltos ni cambios bruscos de tama\u00f1o.<\/p>\n
Este comportamiento suave es lo que hace que la tipograf\u00eda fluida sea un gran avance respecto al dise\u00f1o basado en breakpoints. En lugar de ajustar el texto por pasos, permite un escalado fluido que resulta natural en todos los dispositivos.<\/p>\n
Pero el cambio de tama\u00f1o suave es s\u00f3lo el principio. La tipograf\u00eda fluida ofrece otras ventajas que facilitan la creaci\u00f3n de dise\u00f1os flexibles, coherentes y accesibles.<\/p>\n
Argumentos a favor de la tipograf\u00eda fluida<\/h2>\n
A medida que trabajes con tipograf\u00eda fluida, se har\u00e1n evidentes las siguientes ventajas.<\/p>\n
Responsivo por defecto<\/h3>\n
El texto se escala autom\u00e1ticamente con la ventana gr\u00e1fica, eliminando la necesidad de breakpoints. Tanto si tu sitio se visualiza en un tel\u00e9fono, una tableta o un monitor ultra ancho, los tama\u00f1os de las fuentes se ajustan de forma natural sin CSS adicional.<\/p>\n
M\u00e1s f\u00e1cil de mantener<\/h3>\n
Sin necesidad de m\u00faltiples media queries, tu c\u00f3digo se mantiene sencillo y legible. Puedes definir los tama\u00f1os de fuente utilizando una sencilla escala \u00abT-shirt\u00bb, que va desde peque\u00f1o a extragrande, y aplicarlos de forma coherente en todo tu tema.<\/p>\n
Dise\u00f1o coherente<\/h3>\n
Aseg\u00farate de que los tama\u00f1os de tus fuentes sean coherentes en todo el sitio, tanto globalmente como dentro de bloques individuales, seg\u00fan sea necesario. Define tu escala una vez, y fluir\u00e1 sin problemas por todos los bloques, patrones y plantillas.<\/p>\n
Accesibilidad y legibilidad mejoradas<\/h3>\n
Como la tipograf\u00eda fluida se escala suavemente, el texto siempre aparece a un tama\u00f1o legible para cada dispositivo. Esto hace que tu contenido sea m\u00e1s accesible, especialmente para usuarios con preferencias visuales o niveles de zoom personalizados en el navegador.<\/p>\n
Dise\u00f1o preparado para el futuro<\/h3>\n
Como el tama\u00f1o del texto ya no est\u00e1 vinculado a breakpoints artificiales, la escala de tu tipograf\u00eda est\u00e1 garantizada para funcionar con cualquier tama\u00f1o de pantalla y ventana gr\u00e1fica futuros.<\/p>\n
Control de la velocidad de escalado<\/h3>\n
La capacidad de controlar la velocidad a la que el texto crece o se encoge se establece mediante un valor preferido que cambia con la anchura de la ventana gr\u00e1fica.<\/p>\n
Compatibilidad con navegadores<\/h2>\n
La funci\u00f3n clamp()<\/code> es compatible con todos los navegadores<\/a> modernos, incluidas las versiones actuales de Chrome, Edge, Firefox y Safari.<\/p>\n
Sin embargo, si necesitas una cobertura del 100 %, te recomendamos incluir una soluci\u00f3n alternativa para navegadores antiguos como Internet Explorer 11 y las versiones de Safari y Chrome anteriores a 2020.<\/p>\n
A continuaci\u00f3n te explicamos c\u00f3mo hacerlo:<\/p>\n
\/* Fallback (for IE11 and other old browsers) *\/\nli {\n  font-size: 1.25rem; \n}\n\n\/* Preferred (modern browsers) *\/\nli {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);\n}<\/code><\/pre>\n