Las fuentes de texto y sus unidades

Las unidades que utilizamos para establecer el tamaño de las fuentes de los textos de una página web siempre han despertado polémicas porque hay opiniones para todos los gustos. En resumen, las posibilidades se limitan a dos tipos básicos, absolutas y relativas.

Las absolutas tienen como referencia las impresoras: pt (puntos), pc (picas), in (inches/pulgadas), cm (centímetros) y mm (milímetros).

Las relativas tienen como referencia la resolución de la pantalla: px (pixeles) o bien al tamaño de otras fuentes definidas antes: % (porcentaje). em (em space), ex (x space); más una variante, palabras clave: xx-small | x-small | small | medium | large | x-large | xx-large que son relativas a la fuente definida por el navegador que usamos.

Algo con lo que la mayoría de los desarrolladores está de acuerdo es que el uso de puntos (pt) no es lo más recomendado ya que es una medida que sólo tiene sentido para imprimir, si bien hay una relación de puntos por pulgada eso no es válido en una pantalla y sólo es aplicable al papel.

Descartada entonces esa unidad y todas las absolutas que, en realidad, sólo deberían usarse cuando hablamos de impresoras; en una página web, deberíamos centramos en el uso de las llamadas relativas y entre ellas, sólo hay dos que permiten controlar los tamaños con cierta claridad: px y em ¿cuál usar?

Hay que entender que em es una medida relativa a otra fuente así que 1em, así sólo, no significa demasiado, estamos diciendo que el tamaño de algo es igual al tamaño de otra fuente ¿de cuál? de la que está definida por el el elemento contenedor y si no hay ninguna, la que use el navegador así que, si vamos a manejarnos con ellas, lo lógico es definir alguna con px, aunque sea, la del body:

body {
  .......
  font-size: 14px;
}

Ahora sí, hecho esto, podemos decir que una etiqueta tendrá una fuente que será igual, menor o mayor que esa:

h2 {font-size: 2em;} /* será del doble del tamaño que la definida en body */
small {font-size: 0.8em;}  /* será un 80% más chica que la definida en body */

Esto del elemento contenedor y las herencias no es tan complicado como parece aunque a veces, se hace difícil de seguir el rastro (igual que en la vida real). Cuando una etiqueta está dentro de otra, la que la contiene es el elemento padre (parent) y la contenida es el elemento hijo (child):

<div id="bloque_1" style="font-size:20px;">
  <div id="bloque_2">
    <p> ... este texto tendra 20 pixeles de alto ... </p>
  </div>
</div>

En ese caso, P es "hijo" del div bloque_2 y es "nieto" del div bloque_1; la herencia, hace que el tamaño del "abuelo" se traslade al "nieto"

Un ejemplo concreto:

<style>
  div#ejemplo {font-family:Arial; font-size: 14px;}
  div#ejemplo big {font-size: 2em;}
  div#ejemplo small {font-size: 0.8em;}
</style>

Este es el texto "normal" que tiene 14 pixeles.
Este es un título más grande
Y este un texto más pequeño

La unidad em es útil cuando hacemos referencia a un elemento "padre". Este método es el aconsejable cuando estamos interesados en mantener cierta compatibilidad con distintas plataformas y navegadores, las fuentes se "escalan" y basta cambiar el tamaño base para cambiar todo el sitio:

div#ejemplo {font-family:Arial; font-size: 18px;}

Este es el texto "normal" que ahora tiene 18 pixeles.
Este es un título más grande
Y este un texto más pequeño

El problema con esta unidad es que ese mismo beneficio es a su vez un contratiempo ya que se pierde cierto control. No veremos las cosas tal como las pensamos, el resultado, variará. Tal vez, un renglón se transforme en dos o un espacio de tamaño fijo sea demasiado grande o demasiado chico para el contenido.

Por el contrario, como px está relacionado con la resolución de la pantalla será más fácil de controlar aunque allí también habrá diferencias porque la misma fuente no se verá igual en distintos sistemas operativos.

Moraleja: no hay soluciones universales y cada uno deberá elegir la que crea más conveniente o le resulte más cómoda.

Por lo general, prefiero usar px y reservar em para casos especiales. Por ejemplo, si quiero crear un bloque de títulos donde establezco un tamaño de fuente en pixeles, es buena idea usar em para definir alturas y separaciones, de tal manera que, si cambiamos la fuente, las proporciones se mantienen.

<style>
  .ejemplosTitulos {
    background-color: #456;
    border: 2px dotted #9AB;
    color: #FFF;
    font-family: 'Century Gothic','Times New Roman';
    font-weight: normal;
    height: 2em;
    line-height: 2em;
    margin: 0 auto;
    text-align: center;
    width: 400px;
  }
</style>

<h5 class="ejemplosTitulos" style="font-size:18px;">El título de algo</h5>
<h5 class="ejemplosTitulos" style="font-size:36px;">El título de algo</h5>

El título de algo

El título de algo

El título de algo

El título de algo