Tipografía para el diseño responsivo con CSS

En la primera parte de nuestra serie dedicada a la tipografía responsiva explicamos por qué es necesaria una fuente adaptable cuando se diseñan páginas web responsivas. En esta segunda parte nos centramos en los aspectos técnicos y, tras una introducción en la que trataremos el funcionamiento básico del diseño responsivo de páginas webs, proporcionamos instrucciones para la implementación de una tipografía web responsiva mediante comandos CSS.

Mediante el diseño web responsivo es posible adaptar los contenidos de una página web a las características de las pantallas de cada dispositivo móvil. Por motivos de espacio, la pantalla de un smartphone genera una visualización de los contenidos diferente a la pantalla de un ordenador. Especialmente en lo referente al tamaño y a la ordenación de determinados componentes de una página web, se considera que las columnas, los elementos de navegación, los elementos gráficos y la fuente deberían siempre adaptarse al formato y a la definición de la pantalla utilizada, así como ajustarse al encuadre en uso. Esto es posible gracias al diseño responsivo, que también permite reconocer el dispositivo de entrada (ratón, teclado, pantalla táctil) y la colocación correspondiente de los elementos de navegación.

Una manera muy habitual de aplicarlo es usando una cuadrícula flexible o “grid”, sobre la cual se distribuyen los diferentes elementos que componen una página web. Los ejes verticales y horizontales de una retícula elástica se ajustan a diferentes tamaños de pantalla y resoluciones y, si es necesario, se redistribuyen o se recolocan. Incluso si el tamaño de la ventana del navegador se modifica, los contenidos de la página web se distribuyen de forma óptima a cada encuadre, ventana gráfica o viewport. La base técnica del diseño responsivo la componen HTML5, CSS3 (sobre todo gracias al uso de media queries) y JavaScript. Mediante estos lenguajes de programación es posible también implementar una tipografía adaptable.

La mejor tipografía web para un diseño responsivo de páginas web

Para que un texto se ajuste a cada pantalla es necesario usar una tipografía web adaptable basada en vectores. Para ello, es posible recurrir a fuentes web preestablecidas como las de Google Fonts o Font Squirrel, que ofrecen una gran variedad de ellas de forma totalmente gratuita.

A la hora de escoger una fuente tipográfica es importante tener en cuenta que sea legible y que transmita el efecto deseado. Si en los encabezados es posible permitirse alguna libertad, no es esto lo mejor en el cuerpo del texto principal, ya que una extravagancia excesiva podría dificultar la lectura.

El color de la tipografía debería crear un contraste adecuado con el color de fondo de la página. Si es muy pálido, se corre el riesgo de que no se pueda leer. Si la elección resulta difícil, se puede recurrir a herramientas online como Colour Contrast Check o Contrast-A, con las que podemos comprobar diferentes combinaciones y experimentar con distintos tonos.

Gracias a la introducción de las llamadas media queries en CSS3 se cuenta con una nueva y útil manera de crear fuentes web adaptables. Estos elementos de las hojas de estilo de CSS reconocen ciertas características de un dispositivo de salida como la resolución de la imagen, las dimensiones de la ventana del navegador o el modo de orientación vertical (portrait) u horizontal (landscape) en que se muestran los contenidos. Toda esta información sirve para ajustar la visualización de los textos de una página web al dispositivo que está usando el usuario.

Lograr una tipografía con CSS que sea responsiva no es posible mediante valores de píxel, pues los píxeles son una unidad de tamaño estática. Una fuente adaptable solo se logra mediante la aplicación de una unidad de medida flexible. Es por eso que para determinar el tamaño de una fuente web se usan valores relativos como em, rem o porcentajes.

Los siguientes comandos de CSS permiten la introducción y la organización de tipografía responsiva mediante media queries:

• Con @font-face se incluye una fuente web en la página.

• Para adaptar la tipografía a cada dispositivo es necesario el comando @media. Para una visualización que se adapte a cada dispositivo serán también necesarias las medidas de la ventana gráfica o viewport. Si se combina @media con screen y se completa con min-width (ancho mínimo) o max-width (ancho máximo), determinamos el formato de la tipografía para una determinada anchura del encuadre: @media screen and (min-width: 800px). De esta manera, fijamos si se usará otro tamaño de fuente dependiendo del tamaño de la ventana del navegador.

• font-size define el tamaño de la fuente en píxeles o en em, una unidad de medida relativa mediante la cual el ancho de la letra depende del tamaño de esta. La unidad em se rige por el tamaño, previamente determinado, del elemento representado con un valor em. En caso de que el tamaño de letra solo se defina con em, su valor depende del grado de letra del parent element.

Las siguientes figuras muestran cómo usar estos comandos de CSS.

Tipografía web responsiva mediante la etiqueta viewport

La regla viewport constituye otra manera de crear tipografía adaptable para el diseño responsivo de una página web. Viewport define en diseño web el tamaño de la ventana del navegador −en castellano se conoce como ventana gráfica− y permite crear un contenido que se adapte a cada tamaño de ventana gráfica, aventajando en rapidez al uso de los media queries.

Mediante las unidades de CSS vw (“viewport width“) y vh (“viewport height“) fijamos el ancho y el alto en relación con el tamaño de la ventana gráfica. Disponemos, asimismo, de las unidades vmax (“viewport maximum”) y vmin (“viewport minimum”), dos unidades que fijan el tamaño, bien en relación con el ancho o con el alto de la ventana gráfica. Decidir cuál de las dos se usa como base para el ajuste dependerá de cada una de estas unidades: vmin define el valor más bajo y vmax el más alto. Las cuatro unidades viewport consisten en datos porcentuales (por ejemplo, 10vw = 10 por ciento del ancho de la ventana), así que en un viewport de 640 x 480 píxeles vmax tomaría como referencia los 640 píxeles por ser el valor más alto –en una ventana de este tamaño 10vmax = 64px (640:10).

Esta unidad tampoco es soportada por todos los navegadores. Aquí obtendrás una visión general.

Como hemos visto, es posible diseñar una tipografía web adaptable solo con unos pocos comandos de CSS. Pero antes de publicar una página web sería conveniente probar el efecto de su implementación en la mayor cantidad de dispositivos o de emuladores y, dado el caso, introducir las mejoras convenientes.

Usar media queries o la etiqueta de CSS viewport depende en muchos casos de la situación y, en última instancia, de las preferencias individuales. Las media queries son un poco más lentas que las unidades viewport en cuanto a la velocidad de escalación de la fuente, pero, por el contrario, son soportadas por más navegadores antiguos. Y usando element queries o un plugin jQuery se amplían las posibilidades de generar tipografía web responsiva.

Todos estos métodos satisfacen las exigencias de una tipografía responsiva que se adapte siempre al encuandre visible, lo cual depende de la modificación relativa del tamaño de la fuente y del interlineado, así como de la aplicación de fuentes web vectorizadas. La segunda parte de nuestra serie sobre tipografía web en el diseño responsivo muestra dónde conseguir fuentes responsivas gratuitas y cómo anidarlas en una página web.