sábado, 10 de mayo de 2014

El tamaño de las tipografías



1. Las diferentes medidas

Como ya sabe, existen dos "formatos" para definir el tamaño de los caracteres: 
  • las medidas absolutas: cm, mm, in, pt... No es aconsejable usar esas medidas, ya que no son conformes a las recomendaciones de accesibilidad para los sitios web. Estas generan problemas de redimensión del texto en las páginas web para las personas con discapacidad visual. 
  • las medidas relativas: em y %. Es preferible usar estas unidades relativas, ya que se pueden redimensionar sin problemas. Para todos los navegadores, los tamaños son relativos al tamaño por defecto de los párrafos p: 1em = 100% = 16px.


2. El problema de la cascada

Las hojas de estilo se aplican en cascada. Esto implica que los tamaños también se aplican en cascada.

Veamos un ejemplo de una hoja de estilo:

body {
font-size: 1em;}
li {
font-size: .8em;
}

En esta sencilla página tenemos dos listas imbricadas:

<h1>Título de la página</h1>
<ul>
<li>Primero</li>
<li>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Segundo</li>
<li>Tercero</li>
</ul>

Este es el resultado visual:


¿Cómo se calcula el tamaño de los caracteres? El tamaño es de 1em a nivel del body, lo que determina que el tamaño mostrado y calculado sea de 16 píxeles para el texto normal. El h1 se calcula proporcionalmente a 2 em, es decir, 32
píxeles según el cálculo. Los elementos li de la primera lista son de 0.8em, es decir, 16x0.8=12.8 píxeles según el cálculo, así que se visualizarán a 13 píxeles. Los li de la segunda lista imbricada se calculan con la cascada a 16x0.8x0.8=10,24 píxeles, lo que quiere decir que se visualizarán a 10 píxeles. El tamaño en em se calcula en relación al elemento padre.


3. La nueva unidad rem

La nueva unidad rem del CSS3 realiza el cálculo en relación a la raíz de la página, en función del elemento html. La unidad rem significa root em. Podemos definir el tamaño relativo que deseemos para el elemento html con la unidad em, y luego todos los demás tamaños con la unidad rem. ¡Así no tendremos problemas con las cascadas!

Si volvemos al ejemplo anterior, ahora deberíamos indicar en la hoja de estilo:

html {
font-size: 1em;
}
body {
font-size: .8rem;
}
li {
font-size: .8rem;
}

Ya no tenemos ningún efecto de cascada en el cálculo del tamaño de los elementos. Todos los li tienen el mismo tamaño de carácter.




Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada