JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

CSS: Tamaños relativos de fuente según la resolución

Hasta hace unos años la mayor parte del mundo conectado salía a Internet a través de un ordenador personal. Por ello bastaba con tener controladas las dos o tres resoluciones de pantalla más habituales para que una página o una aplicación web se comportaran de la manera esperada. Por aquel entonces las resoluciones más comunes eran: 800x600 (sí, increíble pero cierto, ahora ni los teléfonos tienen algo tan bajo), 1024x768 y si acaso 1280x1024 los afortunados que tenían monitores grandes.

Con la llegada del iPhone en 2007 y posteriormente del iPad en 2010, la cosa cambió para siempre. Actualmente debemos considerar diseños y distribuciones válidos para muchísimas resoluciones diferentes y la variedad es inmensa. La gente se conecta a través de móviles con diversas resoluciones y densidades de pantalla en sentido vertical u horizontal, tabletas que según su precio y prestaciones pueden variar mucho las dimensiones de visualización, ordenadores con pantallas 16:9 o monitores Full-HD, ordenadores de escritorio con resoluciones más convencionales... Una locura.

MultiplesResolucionesPantallas

En el caso concreto de las páginas web hay que tratar de que nuestros contenidos y diseños se adapten sin problema a cualquier resolución, densidad y tamaño. Y dentro de esta problemática una cuestión importante es ofrecer en cada caso un tamaño de texto apropiado. No sirve tener un texto de tamaño muy grande en resoluciones pequeñas, ni uno muy pequeño en resoluciones grandes. En cada caso hay que encontrar un tamaño apropiado y utilizarlo.

¿Cómo podemos conseguirlo?

La mejor manera es utilizar dimensiones de carácter relativo en nuestros diseños web, y en concreto dos unidades especialmente pensadas para este problema: los "em" y los "rem".

Dimensiones relativas de elementos con CSS

En CSS existen diversas unidades de medida que son relativas, es decir, que en lugar de indicar un valor absoluto y concreto, especifican un valor que se calcula en referencia a otro valor pre-existente. La más conocida sin duda es el porcentaje. Pero existen muchas más: em, rem, vh, vw, ex, ch, vmin y vmax. De entre éstas las dos más habituales son:

  • em: se refiere a una medida relativa al tamaño de la letra actual de un elemento. Por ejemplo, si el tamaño actual de la letra es de 10 puntos, una altura de 1.2em indicaría un 20% más de tamaño para el elemento al que le estemos aplicando esas unidades.

  • rem: se refiere al tamaño de la letra del elemento raíz del documento. Es decir, es como "em", pero en lugar de mirar el tamaño de la letra del elemento actual se mira solamente el del elemento raíz del documento (el elemento html). De esta forma se conserva en todo el documento la misma medida.

Para sacarles partido solo es necesario saber cómo funcionan, y es bastante sencillo.

Por ejemplo, supongamos que definimos el tamaño de letra por defecto para la página usando las siguientes expresiones para variarlo según el ancho de la página (y por tanto la resolución):

html {
  font-size: 20px;
}

@media (max-width: 1280px) {
  html { font-size: 14px; }
}

@media (max-width: 800px) {
  html { font-size: 12px; }
}

De este modo si el ancho es menor de 800px le otorgamos un tamaño de 12 píxeles, si es superior a 1280px el tamaño del texto por defecto será de 20px, siendo de 14px en el intervalo del medio.

Bien. El problema es que ahora según el tipo de texto que queramos utilizar deberíamos tener un tamaño diferente también. Por ejemplo, los encabezados de tipo H1 serán de tamaño mucho mayor que el texto normal, y habrá variación de tamaños según si el texto está en la sección principal o en un lateral, si está destacado, etc...

Una solución es especificar un tamaño diferente según el ancho usando media-queries, como acabamos de ver. El problema de eso es que nos obliga a tener un código más largo, es difícil de mantener y además debemos estar calculando el tamaño apropiado en cada caso para cada tipo de letra.

Sin embargo si utilizamos unidades de medida relativas la cosa se nos facilita bastante.

Por ejemplo, consideremos el siguiente código CSS, adicional al anterior:

h1 { font-size: 2.4em; }
p  { font-size: 1.4em; }
li { font-size: 1.3em; }

Esto lo que define es que el tamaño de estos elementos debe ser un porcentaje del tamaño que normalmente le correspondería, y que viene definido previamente las media-queries que vimos anteriormente. Así, el H1 tendría un tamaño de 2.4 veces el tamaño normal, el párrafo 1.4 veces y los elementos de lista un 30% mayores del tamaño definido en el elemento raíz.

Lo bueno de esto es que no es necesario redefinir estos elementos según cada resolución: definimos el tamaño base en cada resolución con las media-queries y los demás elementos se escalan de acuerdo al que corresponda. Mucho más limpio, más sencillo y sobre todo más fácil de mantener.

De todos modos usar em como unidad tiene algunas pegas. Es importante resaltar que esta unidad, en el caso de los textos, se refiere al tamaño que tendría la letra respecto al valor por defecto que tendría en caso de no especificar nada. Esto implica que, por ejemplo, si tenemos un elemento dentro de otro y hereda las propiedades de texto (que es lo habitual) podríamos redefinir el tamaño sin darnos cuenta. Por ejemplo, si en el caso anterior tenemos una lista dentro de otra lista y a su vez otra dentro de la segunda, los tamaños serían cada vez mayores.

Por ejemplo, las siguientes tres listas anidadas:

ListasAnidadaas

se verían así en nuestro ejemplo anterior:

ListasAnidadaas_con_EM

Es decir, la primera tendría sus elementos al 30% del tamaño normal, la segunda al 30% mayor aún (o sea, serían 1.3x1.3 = 69% mayores), y las terceras un 119% mayores que las primeras (1.3x1.3x1.3 = 2.197). La cosa crece a toda velocidad.

Si en lugar de usar "em" como unidad usamos "rem" que se refieren siempre al tamaño del elemento raíz (o sea, el body) y no al tamaño que le correspondería al elemento por defecto, entonces el aumento es siempre el mismo para todos los LI: un 30% y se vería como esperábamos:

ListasAnidadaas_con_REM

Es importante tenerlo en cuenta.

OJO: Las unidades "rem" no están soportadas por Internet Explorer antes de la versión 9. Si vas a enfocarte a navegadores modernos no hay problemas en usarlas, pero si se van a tener que usar en versiones viejas de IE, es mejor evitarlas y dejar los "em".

Con esta unidades, media-queries y algunas otras técnicas podemos tener contenidos que se lean correctamente a cualquier tamaño. Sobre todo no te olvides de probar.

¡Espero que te sea útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (3) -

Muchas gracias por plasmar de una forma tan sencilla y amena un aspecto del diseño web que siempre provoca muchos quebraderos de cabeza. Sin duda, para mí, eres el mejor divulgador en temas de desarrollo "software" que tenemos en habla hispana.

Responder

Spain José Manuel Alarcón

Caray, muchas gracias :-S

Me alegro de que te guste mi contenido. Esto siempre da ánimos de seguir haciéndolo bien.

Saludos!

Responder

Latin America Pepe Ramirez

Muy didáctico. Sobresaliente para los tiempos que vivimos. Felicitaciones.

Responder

Agregar comentario