Tipografía para el diseño responsivo con CSS
Equipo editorial de IONOS
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.
- Certificado SSL Wildcard
- Registro privado
- 1 cuenta de correo electrónico por contrato
Fundamentos del diseño responsivo de páginas web
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.
Tipografía web responsiva mediante media queries de CSS
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.
Crear encabezados responsivos con media queries
Los títulos y subtítulos se indican en CSS con el atributo h1, h2, h3 etc., y les podemos otorgar diferentes medidas de representación relativas usando la unidad em. El siguiente ejemplo muestra cómo representar el primer encabezado (h1) en varios tamaños relativos partiendo de un tamaño absoluto (font-size: 100 %).
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-sitze: 1.5em;
}
}En este ejemplo se han fijado cuatro variantes de representación diferentes para h1, como se muestra en el atributo font-size del h1: 3em, 2.5em, 2em, 1.5em. La amplitud de la ventana gráfica del navegador, que ha sido fijada por su valor máximo (max-width), es la que determina cuál de estos cuatro tamaños se va a utilizar. El ancho ha sido definido con una unidad de medida em. Como previamente no ha sido definido el tamaño del texto, este valor de em se rige por la configuración estándar del navegador, en general 16 píxeles (1em=16px). Con esta medida se pueden calcular los diferentes anchos a los que se ajustará el tamaño de la fuente. Para ello debemos dividir el número de píxeles del ancho de la ventana por 16. En este ejemplo el tamaño del título h1 se rige por 4 anchos de ventana gráfica diferentes:
- más de 1024 píxeles
- hasta 1024 píxeles (1024 : 16 = 64em)
- hasta 800 píxeles (800 : 16 = 50em)
- hasta 480 píxeles (480 : 16 = 30em)
Obviamente se pueden introducir muchas otras indicaciones que definan el punto de interrupción o Breakpoint a partir del cual cambie el tamaño de la fuente, de manera que se pueda definir mucho más exactamente el tamaño de nuestro título.
En el caso de encabezados largos puede suceder que en pantallas pequeñas se corten y se muestren en dos líneas. En este caso hay que definir también de forma relativa el espacio interlineal. Te lo mostramos en el siguiente apartado.
Cuerpo de texto principal responsivo con em
Como en el caso de los títulos y subtítulos, también se fija un tamaño de fuente para el párrafo (p) como 100%. El grado de la letra también se define aquí con la unidad relativa em. La implementación de tamaños de fuente diferentes, orientadas a los 4 tamaños de ventana gráfica previamente definidos, se muestra en CSS así:
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%;
}
}Como en la mayoría de navegadores un valor body de un 100% equivale a 16 píxeles, el tamaño principal de la fuente en el texto (font-size: 1.5em) equivale en nuestro ejemplo a 24 píxeles (1,5 x 16 = 24). El tamaño de la fuente se adapta a la ventana a partir de las indicaciones font-size (90 %, 75 % y 50 %) en relación al body. Es así como, en pocos pasos, se crea una fuente web adaptable.
Pero también en este caso hemos de tener en cuenta un interlineado capaz de responder a las diferentes pantallas. Según principios básicos de la tipografía, el interlineado ha de aumentar en proporción con la longitud de la línea de un texto y, además, debería suponer entre un 120 y un 140 por ciento del tamaño de fuente usado (entre 1.2em y 1.4em). Este valor depende siempre, así, de la fuente utilizada.
La unidad em permite mantener la proporción del interlineado respecto al tamaño de la fuente. Esto se realiza mediante el comando line-height (altura de la línea).
En este ejemplo el interlineado del texto principal es de un 130 por ciento (1.3 em) del tamaño de la fuente y en el caso de los subtítulos de un 120 por ciento (1.2.em).
body {font-size: 100%}
p {
font-size: 1.5em;
line-hight: 1.3 em;
}
h1, h2, h3 {line-height: 1.2em;}Cuerpo de texto principal responsivo con rem
También se puede usar la unidad de medida relativa rem (“root em”) en lugar de em para configurar un texto principal reactivo. Rem se rige por el elemento raíz html, y no por cada elemento en particular. De esta manera el tamaño de letra se ajusta en relación con los contenidos completos del elemento raíz, lo que, en especial en el caso de anidaciones complejas de elementos constituye una ventaja frente al uso de em. Los comandos de CSS para una tipografía web responsiva mediante el uso de rem podrían consistir en:
html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5 rem;}
h3 {font-size: 2rem;}Sin embargo, no todas las versiones de los navegadores soportan la unidad rem. En el caso de navegadores como Firefox, Chrome, Safari, Edge u Opera no debería suponer un problema, ya que sus versiones antiguas han sido superadas hace tiempo y no deberían estar en uso, pero en el caso de versiones antiguas del Explorer de Microsoft sí, ya que solamente soporta unidades rem a partir de la versión 9. Si también se quiere garantizar una buena visualización para versiones antiguas de los navegadores, hay que añadir una variante alternativa que funcione mediante píxeles, por ejemplo, así:
html {font-size: 100%}
p{
font-size: 24px;
font-size: 1.5rem;
}
h1 {
font-size: 48px;
font-size: 3rem;
}
h2 {
font-size: 40px;
font-size: 2.5rem;
}
h3 {
font-size: 32px;
font-size: 2rem;
}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.
Crear encabezados y textos responsivos con la etiqueta viewport
La unidad de medida viewport permite adaptar encabezados y el texto principal y su implementación es parecida a como se usaban las unidades rem en las media queries, ya que ambas unidades de medida son relativas. La siguiente figura muestra cómo crear un texto principal (p) y unos encabezados (h1, h2, h3) responsivos:
p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}Mediante la regla font-size: 2vmin se determina que las letras del texto principal (p) siempre supongan un 2 por ciento del ancho o alto de ventana (dependiendo de cuál sea el valor más bajo). De esta manera, nos aseguramos de que la letra mantenga la misma proporción también en los encuadres más pequeños.
- En el primer encabezado (h1), el tamaño supone siempre un 5 por ciento del ancho de la ventana (font-size: 5vw).
- En el segundo (h2), en cambio, supone siempre un 4 por ciento de la altura de la ventana (font-size: 4vh).
- El tercer encabezado (h3), al definirse con el valor 3vmin es siempre un uno por ciento más grande que la fuente del texto, al estar esta definida con el valor 2vmin.
Estas indicaciones de CSS garantizan que la fuente del texto y los tres encabezados estén siempre en relación, sin importar el tamaño de la ventana del navegador.
- Creador de páginas web rápido e intuitivo
- Imágenes y textos impactantes, generados en un instante
- Dominio, SSL y buzón de correo electrónico incluidos
La importancia de la tipografía en el diseño responsivo de páginas web
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.
