JMiur [E]

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

7 comentarios:

Anahí  

Gracias, JMiur, de verdá que siempre fue un lío para mí entender esto. Por eso es que casi nunca algo queda como quiero. Un buen punto.
Saludos.

Responder
Unknown  

el padre, el hijo y el abuelo!!!...es demasiado para manejar los 3 juntos :P...ya probaré con ellos. Estas entradas me encantan porque dán claridad al asunto...besitos!!!

Responder
[m]YSELF  

1. Siempre dije que eres loco y ahora lo reafirmo.
2. Me reí mucho con lo de las herencias. Nunca fui bueno con los árboles geneal... esos árboles donde dices quien es la mamá de quien.
3. Sólo porque me reí con eso comento. Debería poner anónimo por tanto lío para comentar. Igual, sabes quien soy.
4. Me reí tanto que a pesar de este incidente, volví a escribir el comentario de nuevo.
bX-5q5qoz
Información adicional
blogID: 33571139
host: www.blogger.com
postID: 8996168761458619662
uri: /comment-iframe.do

Esta información nos ayudará a detectar tu problema específico y solucionarlo. Disculpa las molestias.

Gracias Google.

Responder
[m]YSELF  

Y para colmo, ¿me lo tienes que aprobar?.
...

Responder
JMiur  

Anahí: Las herencias suelen ser complicadas de seguir y es la razón por lo que a veces modificamos algo y no parece funcionar :)

Graciela: Y eso que no me remonté para atrás en el árbol hasta llegar a Adan y Eva :D

Myself: Bah, lo de la locura no es ninguna novedad ¿Tengo un blog? Ya está todo dicho :$

¿bX-5q5qoz? Eso no es nada, imagina lo que sería si te hubiera tocado un bX-7z5mmnz esos sí son de terror; una vez me salió uno de esos y aún tengo pesadillas ...

Ah y lo de la moderación también hay que agradecérselo a Google ;)

Responder
[m]YSELF  

Gracias Google.

Responder
JMiur  

:D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR