# Tipografía para el diseño responsivo con CSS

Las tipografías responsivas garantizan que los textos sigan siendo legibles en cualquier dispositivo. En lugar de usar valores fijos en píxeles, el tamaño de la fuente se adapta de forma dinámica al ancho de la pantalla. En CSS, esto puede implementarse de manera sencilla mediante unidades flexibles o funciones modernas.

## ¿Qué tipografía es adecuada para el diseño responsivo?

Para que el texto de tu página web se visualice correctamente en cualquier tamaño de pantalla, conviene utilizar **tipografías basadas en vectores** dentro de un enfoque de [diseño responsivo](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/fundamentos-de-tipografia-responsiva/). Una opción habitual es recurrir a [webfonts ya preparados](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/tipografia-responsiva-como-elegir-la-mejor-fuente/).

Al elegir una tipografía web, es fundamental que la fuente sea **legible** y adecuada a su finalidad. En los encabezados se puede optar por un diseño más expresivo, pero en los textos largos conviene evitar fuentes demasiado decorativas, ya que dificultan la lectura prolongada.

El color de la tipografía también debe mantener un **contraste suficiente** con el [fondo de la página web](https://www.ionos.com/es-us/digitalguide/paginas-web/creacion-de-paginas-web/fondos-para-paginas-web/). Si el contraste es demasiado bajo, la legibilidad se resiente considerablemente. Para comprobarlo, puedes utilizar herramientas del navegador como [Colour Contrast Check](https://snook.ca/technical/colour_contrast/colour.html "Colour Contrast Check") o el [Contrast Checker de WebAIM](https://webaim.org/resources/contrastchecker/ "Contrast Checker de WebAIM"), que permiten evaluar la combinación de colores y probar distintas variantes.

## Integrar tipografías responsivas mediante Media Queries

Desde la introducción de las [CSS Media Queries](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/css-media-queries/) en CSS3, dispones de una herramienta eficaz para implementar **tipografías adaptables**. Las Media Queries permiten **detectar determinadas características del dispositivo** y ajustar en consecuencia la visualización de los textos de tu página web. Entre estos parámetros se incluyen, por ejemplo:

- la resolución de la pantalla,
- el ancho y el alto de la ventana del navegador,
- la orientación de la pantalla.

Una tipografía verdaderamente responsiva en [CSS](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/que-es-css/) no se consigue definiendo tamaños fijos en píxeles, ya que el píxel es una unidad estática. Para lograr un diseño tipográfico flexible, es necesario recurrir a **unidades de medida relativas**. Por ello, el tamaño de la tipografía web debería definirse mediante valores como `em`, `rem` o porcentajes.

La integración y adaptación de una tipografía responsiva mediante Media Queries se basa en las siguientes **instrucciones CSS**:

- Con `@font-face` se integra una tipografía web en la página.
- Mediante consultas `@media` es posible ajustar la tipografía a distintos anchos de pantalla, por ejemplo con `@media screen and (min-width: 800px)`.
- La propiedad `font-size` define el tamaño de la fuente, ya sea en píxeles o, preferiblemente, en unidades relativas como `em` o `rem`.

### Crear encabezados responsivos con Media Queries

En CSS, los encabezados se definen mediante las etiquetas `h1`, `h2`, `h3`, etc. A cada encabezado se le pueden asignar **tamaños de visualización relativos** utilizando unidades como `em`. El siguiente ejemplo muestra cómo, partiendo de un tamaño base del 100 % (`font-size: 100%`), se puede adaptar el tamaño del encabezado principal (`h1`) a distintos anchos de pantalla:

```css
body { font-size: 100%; }
h1 { font-size: 3em; }
@media screen and (max-width: 64em) {
    h1 {
        font-size: 2.5em;
    }
}
@media screen and (max-width: 50em) {
    h1 {
        font-size: 2em;
    }
}
@media screen and (max-width: 30em) {
    h1 {
        font-size: 1.5em;
    }
}
```

En este ejemplo se definen **cuatro tamaños distintos** para el elemento `h1`. El tamaño que se aplica en cada caso depende del ancho de la ventana del navegador, determinado mediante límites máximos (`max-width`) en las Media Queries.

Las anchuras se especifican utilizando la unidad `em`. Como no se ha definido previamente un tamaño de texto fijo, el valor de referencia corresponde a la configuración predeterminada del navegador, que suele ser de **16 píxeles**. Dado que `1em` equivale a 16 px, puedes calcular fácilmente los anchos deseados dividiendo el valor en píxeles entre 16.

En el ejemplo, el tamaño del encabezado `h1` se adapta a las siguientes anchuras de ventana:

- más de 1024 px,
- hasta 1024 px (`64em`),
- hasta 800 px (`50em`),
- hasta 480 px (`30em`).

Cuando un encabezado es especialmente largo, puede ocurrir que en pantallas pequeñas se divida en varias líneas. En ese caso, conviene adaptar también de forma relativa el **interlineado** (`line-height`) del encabezado. En el siguiente apartado se explica cómo implementar correctamente este ajuste.

### Texto principal responsivo con `em`

Al igual que con los encabezados, para un párrafo de texto (`p`) se define primero el **tamaño de fuente base al 100 %**. También en este caso, el tamaño del texto se controla mediante la unidad `em`. La implementación de distintos tamaños de letra, adaptados a las cuatro anchuras de ventana definidas anteriormente, se vería en CSS de la siguiente manera:

```css
body { font-size: 100%; }
p { font-size: 1.5em; }
@media screen and (max-width: 64em) {
    body {
        font-size: 90%;
    }
}
@media screen and (max-width: 50em) {
    body {
        font-size: 75%;
    }
}
@media screen and (max-width: 30em) {
    body {
        font-size: 50%;
    }
}
```

Dado que un valor de `body` del 100 % equivale en la mayoría de los navegadores a **16 píxeles**, el tamaño de fuente base del texto (`font-size: 1.5em`) es, en este ejemplo, de **24 píxeles** (1,5 × 16 = 24). La tipografía responsiva se implementa mediante las declaraciones `font-size`: al modificar el tamaño base del `body`, el tamaño del texto se adapta automáticamente al ancho de la ventana.

Sin embargo, al diseñar texto corrido de forma responsiva, no solo debes ajustar el tamaño de la fuente, sino también el **interlineado**. Según un principio tipográfico básico, el interlineado debería aumentar a medida que las líneas de texto se vuelven más largas. Otra regla orientativa establece que el interlineado del texto principal debería situarse entre el **120 % y el 140 %** del tamaño de la fuente (`1.2em` a `1.4em`), aunque el valor óptimo depende siempre de la tipografía utilizada.

Este ajuste se realiza mediante la propiedad `line-height`:

```css
body { font-size: 100%; }
p {
    font-size: 1.5em;
    line-height: 1.3em;
}
h1, h2, h3 {
    line-height: 1.2em;
}
```

Con esta configuración, el texto principal y los encabezados mantienen una **legibilidad equilibrada** en diferentes tamaños de pantalla, lo que resulta esencial para una tipografía web realmente responsiva.

### Texto principal responsivo con `rem`

Como alternativa a `em`, también puedes utilizar la unidad relativa `rem` (*root em*) para crear un texto principal responsivo. A diferencia de `em`, `rem` se basa siempre en el elemento raíz `html` y no en el elemento padre correspondiente. Esto implica que el tamaño de la fuente se ajusta directamente en relación con el tamaño base definido para todo el documento, lo que resulta especialmente ventajoso en estructuras con **anidaciones complejas**.

Las instrucciones CSS para implementar una tipografía web responsiva utilizando `rem` pueden verse, por ejemplo, de la siguiente manera:

```css
html { font-size: 100%; }
p  { font-size: 1.5rem; }
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
```

No obstante, la unidad `rem` **no está soportada por todas las versiones antiguas de los navegadores web**. Si deseas ofrecer un diseño coherente también a usuarios con navegadores más antiguos, es recomendable incluir una **solución de respaldo (fallback)** basada en valores absolutos en píxeles.

Una posible implementación sería la siguiente:

```css
html { font-size: 100%; }
p {
    font-size: 24px;
    font-size: 1.5rem;
}
```

En este caso, los navegadores que no admitan `rem` utilizarán el valor en píxeles, mientras que los navegadores modernos aplicarán automáticamente la definición basada en `rem`. De este modo, garantizas una tipografía CSS consistente y accesible en distintos entornos y dispositivos.

### Integrar tipografía responsiva mediante unidades del viewport

Otra forma de implementar una tipografía web responsiva es el uso de unidades de viewport en CSS. En diseño web, el *viewport* se refiere al tamaño visible de la ventana del navegador. Mediante estas unidades, los contenidos de la página pueden reaccionar dinámicamente al ancho o alto de la ventana y escalarse automáticamente según su tamaño. Una ventaja frente al uso exclusivo de Media Queries es que la adaptación se realiza de forma continua y fluida, sin puntos de ruptura definidos.

Las siguientes unidades de viewport están disponibles en CSS:

- `vw` (“viewport width”): ancho relativo a la ventana del navegador
- `vh` (“viewport height”): alto relativo a la ventana del navegador
- `vmax` (“viewport maximum”): el valor mayor entre ancho y alto
- `vmin` (“viewport minimum”): el valor menor entre ancho y alto

Todas las unidades de viewport se expresan como valores porcentuales. Por ejemplo, `10vw` equivale al 10 % del ancho de la ventana. En un viewport de 640 x 480 píxeles, la unidad `vmax` se basaría en los 640 píxeles (el valor mayor). En este caso, `10vmax correspondería a 64px (640 : 10)`.

Nota Al igual que ocurre con las unidades `rem`, las unidades de viewport no están soportadas por todas las versiones antiguas de los navegadores.

### Crear encabezados y textos fluidos responsivos con unidades de viewport

Mediante las unidades de viewport, es posible escalar de forma fluida tanto los encabezados como el texto principal. La implementación de estas unidades funciona de manera similar al uso de`rem` junto con Media Queries: en ambos casos se trata de valores relativos que se adaptan al tamaño de la pantalla.

```css
p {font-size: 2vmin;} 
h1 {font-size: 5vw;} 
h2 {font-size: 4vh;} 
h3 {font-size: 3vmin;}
```

Con estas reglas CSS se define, por ejemplo, que el texto fluido (`p`) tenga un tamaño equivalente al 2 % del valor menor entre el ancho y la altura del viewport (`font-size: 2vmin`). De este modo, la tipografía mantiene proporciones coherentes incluso en ventanas de navegador muy reducidas.

El resultado es un escalado continuo y automático del texto, sin necesidad de puntos de ruptura adicionales, lo que contribuye a un diseño tipográfico verdaderamente responsivo.

### Tipografía web responsiva con clamp()

Una opción especialmente práctica para implementar tipografía web responsiva con CSS es el uso de la función `clamp()`. Esta permite definir un tamaño de fuente que escala de forma fluida en función del ancho del viewport, pero sin sobrepasar unos valores mínimos y máximos previamente establecidos. La sintaxis es la siguiente:

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

Donde:

- `mínimo` define el tamaño de fuente más pequeño permitido.
- `preferido` establece el valor flexible que se adapta dinámicamente al tamaño de la pantalla.
- `máximo` indica el tamaño máximo que puede alcanzar la fuente.

Un ejemplo típico para un encabezado sería:

```css
h1 { 
font-size: clamp(1.5rem, 5vw, 3rem); 
}
```

La principal ventaja de `clamp()` frente a las Media Queries es que el **tamaño de la tipografía se ajusta de manera continua y automática**, sin necesidad de definir múltiples puntos de ruptura. De este modo, se reduce la complejidad del código y se consigue una tipografía verdaderamente fluida en todo tipo de dispositivos.

## Conclusión: no descuides la tipografía en el diseño responsivo

La aplicación de unos pocos comandos CSS ya permite implementar una tipografía web adaptada al diseño responsivo. Tras la implementación, es recomendable probar el resultado en tantos dispositivos diferentes (o emuladores) como sea posible y realizar los ajustes necesarios antes de publicar la página web.

La elección entre **Media Queries** y **unidades del viewport** depende del contexto y, en última instancia, de las preferencias del proyecto. Las Media Queries pueden resultar algo menos fluidas al escalar la tipografía, pero ofrecen una mayor compatibilidad con navegadores antiguos. Las unidades de viewport, por su parte, permiten ajustes más dinámicos. Además, existen enfoques más recientes, como las **Container Queries**, que amplían aún más las posibilidades del diseño tipográfico responsivo.

En cualquier caso, todos estos métodos comparten un objetivo común: garantizar que la tipografía se adapte siempre al área visible. En el diseño responsivo, esto implica ajustar de forma relativa el tamaño de la letra, el espaciado entre líneas y utilizar fuentes web basadas en vectores para asegurar una lectura óptima en cualquier dispositivo.


This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/tipografia-para-el-diseno-responsivo-con-css/](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/tipografia-para-el-diseno-responsivo-con-css/) for AI/LLM consumption.