Ti­po­gra­fía para el diseño re­s­po­n­si­vo con CSS

Las ti­po­gra­fías re­s­po­n­si­vas ga­ra­n­ti­zan que los textos sigan siendo legibles en cualquier di­s­po­si­ti­vo. 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 im­ple­me­n­tar­se de manera sencilla mediante unidades flexibles o funciones modernas.

¿Qué ti­po­gra­fía es adecuada para el diseño re­s­po­n­si­vo?

Para que el texto de tu página web se visualice co­rre­c­ta­me­n­te en cualquier tamaño de pantalla, conviene utilizar ti­po­gra­fías basadas en vectores dentro de un enfoque de diseño re­s­po­n­si­vo. Una opción habitual es recurrir a webfonts ya pre­pa­ra­dos.

Al elegir una ti­po­gra­fía web, es fu­n­da­me­n­tal que la fuente sea legible y adecuada a su finalidad. En los en­ca­be­za­dos se puede optar por un diseño más expresivo, pero en los textos largos conviene evitar fuentes demasiado de­co­ra­ti­vas, ya que di­fi­cu­l­tan la lectura pro­lo­n­ga­da.

El color de la ti­po­gra­fía también debe mantener un contraste su­fi­cie­n­te con el fondo de la página web. Si el contraste es demasiado bajo, la le­gi­bi­li­dad se resiente co­n­si­de­ra­ble­me­n­te. Para co­m­pro­bar­lo, puedes utilizar he­rra­mie­n­tas del navegador como Colour Contrast Check o el Contrast Checker de WebAIM, que permiten evaluar la co­m­bi­na­ción de colores y probar distintas variantes.

Integrar ti­po­gra­fías re­s­po­n­si­vas mediante Media Queries

Desde la in­tro­du­c­ción de las CSS Media Queries en CSS3, dispones de una he­rra­mie­n­ta eficaz para im­ple­me­n­tar ti­po­gra­fías ada­p­ta­bles. Las Media Queries permiten detectar de­te­r­mi­na­das ca­ra­c­te­rí­s­ti­cas del di­s­po­si­ti­vo y ajustar en co­n­se­cue­n­cia la vi­sua­li­za­ción de los textos de tu página web. Entre estos pa­rá­me­tros se incluyen, por ejemplo:

• la re­so­lu­ción de la pantalla,
• el ancho y el alto de la ventana del navegador,
• la orie­n­ta­ción de la pantalla.

Una ti­po­gra­fía ve­r­da­de­ra­me­n­te re­s­po­n­si­va en CSS no se consigue de­fi­nie­n­do tamaños fijos en píxeles, ya que el píxel es una unidad estática. Para lograr un diseño ti­po­grá­fi­co flexible, es necesario recurrir a unidades de medida relativas. Por ello, el tamaño de la ti­po­gra­fía web debería definirse mediante valores como em, rem o po­r­ce­n­ta­jes.

La in­te­gra­ción y ada­p­ta­ción de una ti­po­gra­fía re­s­po­n­si­va mediante Media Queries se basa en las si­guie­n­tes in­s­tru­c­cio­nes CSS:

• Con @font-face se integra una ti­po­gra­fía web en la página.
• Mediante consultas @media es posible ajustar la ti­po­gra­fí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, pre­fe­ri­ble­me­n­te, en unidades relativas como em o rem.

Crear en­ca­be­za­dos re­s­po­n­si­vos con Media Queries

En CSS, los en­ca­be­za­dos se definen mediante las etiquetas h1, h2, h3, etc. A cada en­ca­be­za­do se le pueden asignar tamaños de vi­sua­li­za­ción relativos uti­li­za­n­do 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 en­ca­be­za­do principal (h1) a distintos anchos de pantalla:

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, de­te­r­mi­na­do mediante límites máximos (max-width) en las Media Queries.

Las anchuras se es­pe­ci­fi­can uti­li­za­n­do la unidad em. Como no se ha definido pre­via­me­n­te un tamaño de texto fijo, el valor de re­fe­re­n­cia co­rre­s­po­n­de a la co­n­fi­gu­ra­ción pre­de­te­r­mi­na­da del navegador, que suele ser de 16 píxeles. Dado que 1em equivale a 16 px, puedes calcular fá­ci­l­me­n­te los anchos deseados di­vi­die­n­do el valor en píxeles entre 16.

En el ejemplo, el tamaño del en­ca­be­za­do h1 se adapta a las si­guie­n­tes anchuras de ventana:

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

Cuando un en­ca­be­za­do es es­pe­cia­l­me­n­te 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 in­te­r­li­nea­do (line-height) del en­ca­be­za­do. En el siguiente apartado se explica cómo im­ple­me­n­tar co­rre­c­ta­me­n­te este ajuste.

Texto principal re­s­po­n­si­vo con em

Al igual que con los en­ca­be­za­dos, 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 im­ple­me­n­ta­ción de distintos tamaños de letra, adaptados a las cuatro anchuras de ventana definidas an­te­rio­r­me­n­te, se vería en CSS de la siguiente manera:

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 na­ve­ga­do­res 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 ti­po­gra­fía re­s­po­n­si­va se im­ple­me­n­ta mediante las de­cla­ra­cio­nes font-size: al modificar el tamaño base del body, el tamaño del texto se adapta au­to­má­ti­ca­me­n­te al ancho de la ventana.

Sin embargo, al diseñar texto corrido de forma re­s­po­n­si­va, no solo debes ajustar el tamaño de la fuente, sino también el in­te­r­li­nea­do. Según un principio ti­po­grá­fi­co básico, el in­te­r­li­nea­do debería aumentar a medida que las líneas de texto se vuelven más largas. Otra regla orie­n­ta­ti­va establece que el in­te­r­li­nea­do 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 ti­po­gra­fía utilizada.

Este ajuste se realiza mediante la propiedad line-height:

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

Con esta co­n­fi­gu­ra­ción, el texto principal y los en­ca­be­za­dos mantienen una le­gi­bi­li­dad equi­li­bra­da en di­fe­re­n­tes tamaños de pantalla, lo que resulta esencial para una ti­po­gra­fía web realmente re­s­po­n­si­va.

Texto principal re­s­po­n­si­vo con rem

Como al­te­r­na­ti­va a em, también puedes utilizar la unidad relativa rem (root em) para crear un texto principal re­s­po­n­si­vo. A di­fe­re­n­cia de em, rem se basa siempre en el elemento raíz html y no en el elemento padre co­rre­s­po­n­die­n­te. Esto implica que el tamaño de la fuente se ajusta di­re­c­ta­me­n­te en relación con el tamaño base definido para todo el documento, lo que resulta es­pe­cia­l­me­n­te ventajoso en es­tru­c­tu­ras con ani­da­cio­nes complejas.

Las in­s­tru­c­cio­nes CSS para im­ple­me­n­tar una ti­po­gra­fía web re­s­po­n­si­va uti­li­za­n­do rem pueden verse, por ejemplo, de la siguiente manera:

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 na­ve­ga­do­res web. Si deseas ofrecer un diseño coherente también a usuarios con na­ve­ga­do­res más antiguos, es re­co­me­n­da­ble incluir una solución de respaldo (fallback) basada en valores absolutos en píxeles.

Una posible im­ple­me­n­ta­ción sería la siguiente:

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

En este caso, los na­ve­ga­do­res que no admitan rem uti­li­za­rán el valor en píxeles, mientras que los na­ve­ga­do­res modernos aplicarán au­to­má­ti­ca­me­n­te la de­fi­ni­ción basada en rem. De este modo, ga­ra­n­ti­zas una ti­po­gra­fía CSS co­n­si­s­te­n­te y accesible en distintos entornos y di­s­po­si­ti­vos.

Integrar ti­po­gra­fía re­s­po­n­si­va mediante unidades del viewport

Otra forma de im­ple­me­n­tar una ti­po­gra­fía web re­s­po­n­si­va 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 co­n­te­ni­dos de la página pueden reac­cio­nar di­ná­mi­ca­me­n­te al ancho o alto de la ventana y escalarse au­to­má­ti­ca­me­n­te según su tamaño. Una ventaja frente al uso exclusivo de Media Queries es que la ada­p­ta­ción se realiza de forma continua y fluida, sin puntos de ruptura definidos.

Las si­guie­n­tes unidades de viewport están di­s­po­ni­bles 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 po­r­ce­n­tua­les. 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).

Crear en­ca­be­za­dos y textos fluidos re­s­po­n­si­vos con unidades de viewport

Mediante las unidades de viewport, es posible escalar de forma fluida tanto los en­ca­be­za­dos como el texto principal. La im­ple­me­n­ta­ción de estas unidades funciona de manera similar al uso derem junto con Media Queries: en ambos casos se trata de valores relativos que se adaptan al tamaño de la pantalla.

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 equi­va­le­n­te al 2 % del valor menor entre el ancho y la altura del viewport (font-size: 2vmin). De este modo, la ti­po­gra­fía mantiene pro­po­r­cio­nes cohe­re­n­tes incluso en ventanas de navegador muy reducidas.

El resultado es un escalado continuo y au­to­má­ti­co del texto, sin necesidad de puntos de ruptura adi­cio­na­les, lo que co­n­tri­bu­ye a un diseño ti­po­grá­fi­co ve­r­da­de­ra­me­n­te re­s­po­n­si­vo.

Ti­po­gra­fía web re­s­po­n­si­va con clamp()

Una opción es­pe­cia­l­me­n­te práctica para im­ple­me­n­tar ti­po­gra­fía web re­s­po­n­si­va 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 so­bre­pa­sar unos valores mínimos y máximos pre­via­me­n­te es­ta­ble­ci­dos. La sintaxis es la siguiente:

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 di­ná­mi­ca­me­n­te 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 en­ca­be­za­do sería:

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 ti­po­gra­fía se ajusta de manera continua y au­to­má­ti­ca, sin necesidad de definir múltiples puntos de ruptura. De este modo, se reduce la co­m­ple­ji­dad del código y se consigue una ti­po­gra­fía ve­r­da­de­ra­me­n­te fluida en todo tipo de di­s­po­si­ti­vos.

Co­n­clu­sión: no descuides la ti­po­gra­fía en el diseño re­s­po­n­si­vo

La apli­ca­ción de unos pocos comandos CSS ya permite im­ple­me­n­tar una ti­po­gra­fía web adaptada al diseño re­s­po­n­si­vo. Tras la im­ple­me­n­ta­ción, es re­co­me­n­da­ble probar el resultado en tantos di­s­po­si­ti­vos di­fe­re­n­tes (o emu­la­do­res) como sea posible y realizar los ajustes ne­ce­sa­rios 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 pre­fe­re­n­cias del proyecto. Las Media Queries pueden resultar algo menos fluidas al escalar la ti­po­gra­fía, pero ofrecen una mayor co­m­pa­ti­bi­li­dad con na­ve­ga­do­res 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 po­si­bi­li­da­des del diseño ti­po­grá­fi­co re­s­po­n­si­vo.

En cualquier caso, todos estos métodos comparten un objetivo común: ga­ra­n­ti­zar que la ti­po­gra­fía se adapte siempre al área visible. En el diseño re­s­po­n­si­vo, 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 di­s­po­si­ti­vo.