CSS3: Unidades de medida para fuentes

Unidades CSS viewportwidth y viewportheight

Estas unidades son una opción interesante para definir alturas y anchuras en dispositivos. Las unidades son abrevidadas con las siglas "vw" y "vh". Su medida es equivalente a un centésimo de la anchura o altura del dispositivo donde se está visualizando la web. Por ejemplo, si deseamos asignarle a un elemento una altura igual al tamaño completo del dispositivo, le aplicaremos el valor 100vp.
Por expresarlo mediante porcentajes, 1vw = 1% de la anchura del dispositivo. Por su parte, 1vh = 1% de la altura del dispositivo.

Nota: Para entender mejor estas medidas, si es que no lo sabes ya, te interesa saber lo que es el "Viewport". En resumen, viewport es igual a las dimensiones de la pantalla de tu móvil o tableta, mientras que en ordenadores de escritorio serían las dimensiones de la ventana del navegador.
La pega del viewportheight, bastante importante, es que solo funciona en dispositivos móviles y no en ordenadores de escritorio. Pero aun así merece la pena conocer y aplicar cuando realmente le podamos sacar partido, siempre en teléfonos y tabletas, porque en desktop tiene unos comportamientos un poco erráticos.

Uso de viewportheight para definir alturas de una manera cómoda
Las alturas en CSS siempre son un quebradero de cabeza cuando se quiere usar medidas relativas, con unidades como "%" de CSS. Seguramente que si tenemos algo de experiencia sobre maquetación web se sabe de lo que estamos hablando. Para tener las alturas "controladas" con unidades relativas de CSS tenemos que darle dimensiones de altura a todos los contenedores. O sea, definir las dimensiones de height de todos los elementos de la jerarquía del documento hasta llegar al elemento que realmente queramos definir su altura con un valor porcentual. La opción para alturas es el viewportheight
El correspondiente "compañero" de Viewportheight para las anchuras, viewportwidth, no es tan crucial para definir las dimensiones width, debido a que los comportamientos de unidades CSS para las anchuras no nos dan ningún problema. Pero no conviene perderlo de vista, especialmente pensando en las tipografías.

Medidas "viewport" para tipografías
Estas medidas, tanto viewportheight como viewportwidth, tienen un comportamiento especial que merece la pena mencionar. ¡Se puede usar en la tipografía! Esto quiere decir que podemos asignarle medidas en viewportwidth a un texto y éste siempre te medirá lo mismo en todas las pantallas, relativamente a las dimensiones de la pantalla que tengamos. Para que nos enteremos, si definimos el tamaño de una fuente con viewportwidth, y si en un dispositivo vemos que ocupa un 50% de la anchura de su pantalla, podemos tener certeza de que, en todos los dispositivos ocupará más o menos ese mismo porcentaje de anchura de la pantalla, aunque estemos trabajando con una resolución diferente.
Lo asombroso de todo esto es que el tamaño de la letra es "responsive", o en castellano "adaptable", sin necesidad de utilizar ningún script para conseguirlo o de otras técnicas como mediaqueries que se podrían aplicar con CSS para intentar conseguir ese efecto de fluidez.

Os animamos a probar estas medidas de CSS para sacar vuestras conclusiones. Su uso no difiere de cualquier otro que puedas estar trabajando en tus hojas de estilo.

body{
font­size: 2.5vw
}
h1{
font­size: 4.8vh
}

Es una maravilla que podemos usar y al menos en dispositivos nos dará la tranquilidad de que esas fuentes se van a ver igual de grandes, relativamente al tamaño de la pantalla donde se esté mostrando la página.

Controla el tamaño de la fuente con rem y olvida los px y pt. CSS3

Uno de los quebraderos de cabeza a la hora de maquetar bien una página, es decidir qué medida se va a utilizar para la definición del tamaño de la fuente. En CSS3 tenemos las diferentes medidas ya existentes en CSS 2.1.

Este tipo de medidas se dividen comúnmente en escalables o fijas. Dentro de las escalables tenemos el % y el em, siendo las fijas el px y los pt.

Tamaños fijos de fuente

Los píxeles como tamaño para nuestra fuente

De forma tradicional se ha utilizado el píxel como la unidad de medida para el tamaño de las fuentes. De hecho, los navegadores web suelen tener como valor por defecto para la fuente de un documento, 16px.

Sin embargo, el uso de los píxeles como tamaño para nuestra fuente tiene un par de problemillas:

1. No todos los navegadores lo pintan igual. Puede parecer extraño, pero este punto es fruto de la experiencia personal. Aunque la diferencia no es extremadamente grande, un texto en 14px (por poner un ejemplo) no tiene el mismo tamaño según el navegador que utilices. Esto conlleva que cuando el montaje requiere precisión, puedes encontrarte con sorpresas desagradables.
2. No es un valor escalable. Cada día es más importante la accesibilidad web y la correcta visualización en diferentes dispositivos con resoluciones radicalmente diferentes. Como el píxel no es un valor escalable, si quieres que al ver tu web desde el móvil los tamaños de la fuente sean diferentes a cuando lo haces desde el PC, tendrás que tener el respectivo media query dónde sobreescribas todas las reglas dónde esté un font-size, un margin o un padding… porque recuerda que no sólo querrás cambiar la fuente, si no también los espacios exteriores e interiores que separan el contenido de tu web.

Los puntos como tamaño de nuestra fuente

Junto con el píxel tenemos el punto. El punto es un valor heredado de la imprenta y muy utilizado en programas de diseño como Photoshop. Al ser algo ajeno a la web, su uso no gusta mucho, aunque tiene un pro frente al píxel: Todos los navegadores te lo van a pintar igual sí o sí.

Sin embargo, no está libre de problemas:

1. No es un valor escalable. Exactamente igual que en el caso del píxel.
2. O el diseñador se vuelve loco o te vuelves tú. Hablando de web, lo normal es que el diseñador utilice Photoshop. Bueno, él hará el diseño y te dará las instrucciones de montaje… incluyendo el tamaño de fuente en puntos. La realidad es que si te dice que en Photoshop ese texto tiene 12pt de tamaño, tú no puedes poner 12pt en tu CSS porque se verá enorme. O sea, para Photoshop 1pt tiene una medida diferente que para los navegadores. Esto significa que acabas haciendo aproximaciones comparando tu resultado con el boceto… una locura. Por norma, si hablamos de valores pequeños (menos de 15pt), en el navegador son 2pt menos. Así pues, si el diseñador te dice 12pt, tú pones 10pt… aunque salta a la vista los problemas asociados.

Tamaños escalables de fuente

El em como tamaño para nuestra fuente

Como bien nos dice la wikipedia el EM es una unidad derivada de la anchura de la letra M… y 1em equivale a 16 puntos. Bueno, en CSS no es exactamente así, ya que 1em, a nivel de documento, equivale al tamaño de la fuente del documento (que puede ser 16… o 20, 12, 10, etc)

Lo bueno de utilizar em como medida es que se trata de un valor escalable ya que es una unidad relativa… ¿relativa a qué? Pues a su elemento padre… o en su defecto a su “ancestro” más próximo que tenga un tamaño declarado.

¿Qué significa esto?

Pongamos este CSS:

Y este HTML:

Bueno, el tamaño de fuente para todo el documento (html) es de 10pt. Vemos que para el div tenemos puesto un font-size de 1.5em y de 2em para el strong.

Analizando el HTML, tenemos un div colocado dentro del body y dos strong, uno dentro del div y otro al mismo nivel que el div. ¿cual es el tamaño de fuente para cada caso?

En el div, vemos que tu elemento padre es el body, que no tiene ningún font-size… bueno, el body hereda el font-size de su etiqueta padre: html. Por lo tanto, el div que tenemos utilizará el font-size de la etiqueta HTML para el cálculo. Como el font-size del div es de 1.5em y el font-size heredado que tiene su etiqueta padre (body) es de 10pt:

1.5em * 10pt = 15pt

Los 1.5em de nuestro div se corresponden con 15pt.

En el caso del strong que está al mismo nivel que el div, ocurre lo mismo… el font-size heredado de su etiqueta padre es 10pt y el font-size del strong es 2em, así pues:

2em * 10pt = 20pt

El font-size para el div es 15pt y para el strong que está a su mismo nivel es 20pt. Bien, pero… ¿qué pasa con el strong que tenemos dentro del div? Y aquí viene “el problema”.

Sabemos que el font-size de strong es 2em, por lo que para calcular cuando va a medir de verdad en nuestro navegador, tenemos que multiplicar ese valor, por el tamaño de su elemento padre, ya sea tamaño declarado o heredado. Como el strong está dentro del div, su elemento padre es el div… y el font-size del div es 1.5em. Acabamos de calcular que ese 1.5em se corresponde con 15pt, así que para el strong que está dentro del div tenemos:

2em * 15pt = 30pt

Y así sucesivamente… ¿no ves el problema? Sencillo. Estamos hablando de una unidad acumulativa, su valor real dependerá del valor real de su elemento padre. Esto no es un problema especialmente grave para documentos HTML pequeños, pero cuando estamos hablando de documentos HTML grandes y con una profundidad en el anidamiento de etiquetas importante, se hace muy complicado no perder el control sobre los tamaños de los textos y podemos encontrarnos con resultados desagradables.

Resultado del ejemplo en el navegador

El porcentaje como tamaño para nuestra fuente

El funcionamiento es exactamente le mismo que para el em, así que… mismos problemas.

Va siendo hora de tomar el control, ¡rem al rescate!