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

En la primera parte de nuestra serie dedicada a la ti­po­gra­fía re­s­po­n­si­va ex­pli­ca­mos por qué es necesaria una fuente adaptable cuando se diseñan páginas web re­s­po­n­si­vas. En esta segunda parte nos centramos en los aspectos técnicos y, tras una in­tro­du­c­ción en la que tra­ta­re­mos el fu­n­cio­na­mie­n­to básico del diseño re­s­po­n­si­vo de páginas webs, pro­po­r­cio­na­mos in­s­tru­c­cio­nes para la im­ple­me­n­ta­ción de una ti­po­gra­fía web re­s­po­n­si­va mediante comandos CSS.

Mediante el diseño web re­s­po­n­si­vo es posible adaptar los co­n­te­ni­dos de una página web a las ca­ra­c­te­rí­s­ti­cas de las pantallas de cada di­s­po­si­ti­vo móvil. Por motivos de espacio, la pantalla de un sma­r­t­pho­ne genera una vi­sua­li­za­ción de los co­n­te­ni­dos diferente a la pantalla de un ordenador. Es­pe­cia­l­me­n­te en lo referente al tamaño y a la or­de­na­ción de de­te­r­mi­na­dos co­m­po­ne­n­tes de una página web, se considera que las columnas, los elementos de na­ve­ga­ción, los elementos gráficos y la fuente deberían siempre adaptarse al formato y a la de­fi­ni­ción de la pantalla utilizada, así como ajustarse al encuadre en uso. Esto es posible gracias al diseño re­s­po­n­si­vo, que también permite reconocer el di­s­po­si­ti­vo de entrada (ratón, teclado, pantalla táctil) y la co­lo­ca­ción co­rre­s­po­n­die­n­te de los elementos de na­ve­ga­ción. Una manera muy habitual de aplicarlo es usando una cua­drí­cu­la flexible o “grid”, sobre la cual se di­s­tri­bu­yen los di­fe­re­n­tes elementos que componen una página web. Los ejes ve­r­ti­ca­les y ho­ri­zo­n­ta­les de una retícula elástica se ajustan a di­fe­re­n­tes tamaños de pantalla y re­so­lu­cio­nes y, si es necesario, se re­di­s­tri­bu­yen o se recolocan. Incluso si el tamaño de la ventana del navegador se modifica, los co­n­te­ni­dos de la página web se di­s­tri­bu­yen de forma óptima a cada encuadre, ventana gráfica o viewport. La base técnica del diseño re­s­po­n­si­vo la componen HTML5, CSS3 (sobre todo gracias al uso de media queries) y Ja­va­S­cri­pt. Mediante estos lenguajes de pro­gra­ma­ción es posible también im­ple­me­n­tar una ti­po­gra­fía adaptable.

La mejor ti­po­gra­fía web para un diseño re­s­po­n­si­vo de páginas web

Para que un texto se ajuste a cada pantalla es necesario usar una ti­po­gra­fía web adaptable basada en vectores. Para ello, es posible recurrir a fuentes web pree­s­ta­ble­ci­das como las de Google Fonts o Font Squirrel, que ofrecen una gran variedad de ellas de forma to­ta­l­me­n­te gratuita. A la hora de escoger una fuente ti­po­grá­fi­ca es im­po­r­ta­n­te tener en cuenta que sea legible y que transmita el efecto deseado. Si en los en­ca­be­za­dos es posible pe­r­mi­ti­r­se alguna libertad, no es esto lo mejor en el cuerpo del texto principal, ya que una ex­tra­va­ga­n­cia excesiva podría di­fi­cu­l­tar la lectura. El color de la ti­po­gra­fí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 he­rra­mie­n­tas online como Colour Contrast Check o Contrast-A, con las que podemos comprobar di­fe­re­n­tes co­m­bi­na­cio­nes y ex­pe­ri­me­n­tar con distintos tonos.

Gracias a la in­tro­du­c­ción de las llamadas media queries en CSS3 se cuenta con una nueva y útil manera de crear fuentes web ada­p­ta­bles. Estos elementos de las hojas de estilo de CSS reconocen ciertas ca­ra­c­te­rí­s­ti­cas de un di­s­po­si­ti­vo de salida como la re­so­lu­ción de la imagen, las di­me­n­sio­nes de la ventana del navegador o el modo de orie­n­ta­ción vertical (portrait) u ho­ri­zo­n­tal (landscape) en que se muestran los co­n­te­ni­dos. Toda esta in­fo­r­ma­ción sirve para ajustar la vi­sua­li­za­ción de los textos de una página web al di­s­po­si­ti­vo que está usando el usuario.

Lograr una ti­po­gra­fía con CSS que sea re­s­po­n­si­va 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 apli­ca­ción de una unidad de medida flexible. Es por eso que para de­te­r­mi­nar el tamaño de una fuente web se usan valores relativos como em, rem o po­r­ce­n­ta­jes.

Los si­guie­n­tes comandos de CSS permiten la in­tro­du­c­ción y la or­ga­ni­za­ción de ti­po­gra­fía re­s­po­n­si­va mediante media queries:

• Con @font-face se incluye una fuente web en la página.
• Para adaptar la ti­po­gra­fía a cada di­s­po­si­ti­vo es necesario el comando @media. Para una vi­sua­li­za­ción que se adapte a cada di­s­po­si­ti­vo serán también ne­ce­sa­rias 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), de­te­r­mi­na­mos el formato de la ti­po­gra­fía para una de­te­r­mi­na­da anchura del encuadre: @media screen and (min-width: 800px). De esta manera, fijamos si se usará otro tamaño de fuente de­pe­n­die­n­do 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, pre­via­me­n­te de­te­r­mi­na­do, del elemento re­pre­se­n­ta­do 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 si­guie­n­tes figuras muestran cómo usar estos comandos de CSS.

Ti­po­gra­fía web re­s­po­n­si­va mediante la etiqueta viewport

La regla viewport co­n­s­ti­tu­ye otra manera de crear ti­po­gra­fía adaptable para el diseño re­s­po­n­si­vo de una página web. Viewport define en diseño web el tamaño de la ventana del navegador −en ca­s­te­llano se conoce como ventana gráfica− y permite crear un contenido que se adapte a cada tamaño de ventana gráfica, ave­n­ta­ja­n­do 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. Di­s­po­ne­mos, 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 po­r­ce­n­tua­les (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 re­fe­re­n­cia 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 na­ve­ga­do­res. Aquí obtendrás una visión general.

Como hemos visto, es posible diseñar una ti­po­gra­fía web adaptable solo con unos pocos comandos de CSS. Pero antes de publicar una página web sería co­n­ve­nie­n­te probar el efecto de su im­ple­me­n­ta­ción en la mayor cantidad de di­s­po­si­ti­vos o de emu­la­do­res y, dado el caso, in­tro­du­cir las mejoras co­n­ve­nie­n­tes. Usar media queries o la etiqueta de CSS viewport depende en muchos casos de la situación y, en última instancia, de las pre­fe­re­n­cias in­di­vi­dua­les. Las media queries son un poco más lentas que las unidades viewport en cuanto a la velocidad de es­ca­la­ción de la fuente, pero, por el contrario, son so­po­r­ta­das por más na­ve­ga­do­res antiguos. Y usando element queries o un plugin jQuery se amplían las po­si­bi­li­da­des de generar ti­po­gra­fía web re­s­po­n­si­va. Todos estos métodos sa­ti­s­fa­cen las exi­ge­n­cias de una ti­po­gra­fía re­s­po­n­si­va que se adapte siempre al encuandre visible, lo cual depende de la mo­di­fi­ca­ción relativa del tamaño de la fuente y del in­te­r­li­nea­do, así como de la apli­ca­ción de fuentes web ve­c­to­ri­za­das. La segunda parte de nuestra serie sobre ti­po­gra­fía web en el diseño re­s­po­n­si­vo muestra dónde conseguir fuentes re­s­po­n­si­vas gratuitas y cómo anidarlas en una página web.