Valores y unidades de CSS

En maquetación web existen muchas unidades de pedida:

Punto (pt): Esta unidad de medida se usa sobretodo en impresión.
Pixel (px): Un pixel es la unidad más pequeña de una imagen.
Porcentaje (%): Adquiere el valor también se su predecesor pero en porcentaje.
EM (em): Un em, es básicamente el tamaño de una letra «M» (bien podría ser cualquier otra letra) del elemento al cual se esté aplicando esta medida. El tamaño lo adquiere de su predecesor.
REM (rem): Un rem es muy similar al em pero adquiere su tamaño del tamaño definido en el <html>.
Viewport (vw, vh, svh, dvh…): Se trata de una medida que adquiere el tamaño en base a ancho o alto del navegador.

Puntos

No son muy recomendables en entorno digital pues fueron creados para el mundo impreso. Aún algunos programas como illustrator nos dejan utilizar puntos (y algunos diseñadores los usan). Tampoco es un gran problema puesto que la relación de puntos-píxeles suele ser de 1:1.

Pixeles

Es una medida que va muy bien para determinar un valor fijo que nada lo altera. Va muy bien para fijar un tamaño de texto a un determinado valor o poner el tamaño por defecto de una imagen.

Porcentaje

Normalmente en maquetación se usa sobre todo para anchos y altos de contenedores e imágenes. Para tamaño de fuente creo que es preferible usar otro tipo de unidades.

EM y REM

Para mí son la medidas que uso para casi todo. Tanto para tamaños de fuentes, ancho, altos, paddings, margins… Al final te permite fácilmente escalar el diseño y que todo vaya en función de un tamaño base que se puede modificar alterando un valor en el <html>. La única diferencia para usar em o rem és si quiero que sea proporcional a su predecesor o a la base del documento.

Por ejemplo:

html{
    font-size: 14px;
}
h1{
    // Mi H1 tendrá un tamaño de 56px (14px x 4)
    font-size: 4rem;
}
h2{
    // Mi H2 tendrá un tamaño de 42px (14px x 3)
    font-size: 3rem;
}
h3{
    // Mi H3 tendrá un tamaño de 28px (14px x 2)
    font-size: 2rem;
}
h1 strong{
    // Dentro de la negrita tendrá un valor de 84px (56px x 1,5)
    font-size: 1.5em;
}

Viewport

La unida de básicas de este tipo son: vw y vh. El el 100% de viewport width nos dará como valor el ancho completo del navegador y lo mismo para el viewport height. De esta forma podemo jugar directamente con el tamaño del navegador por ejemplo forzando a un contenedor a ocupar el 100% del alto de navegador (algo que antaño teníamos que hacer con JS).

Cuando lo aplicamos a al tamaño de la fuente suceden cosas muy interesantes. Tenemos tamaños de letra que dependen del ancho de la pantalla y nos puede ayudar a conservar proporciones de diseños sin que el ancho arruine el encaje de los elementos.

Por ejemplo:

html{
    font-size: 2vw;
}
h1{
    // Mi H1 tendrá un tamaño de 8vw (2vw x 4)
    font-size: 4rem;
}
h2{
    // Mi H2 tendrá un tamaño de 6vw (2vw x 3)
    font-size: 3rem;
}
h3{
    // Mi H3 tendrá un tamaño de 4vw (2vw x 2)
    font-size: 2rem;
}
h1 strong{
    // Dentro de la negrita tendrá un valor de 12vw (8vw x 1,5)
    font-size: 1.5em;
}

Esto nos abre un mundo de posibilidades web que hasta ahora nos obligaba a utilizar infinidad de media queries y complicaba la maquetación.

A parte de vw y vh, también tenemos otros valores que nos pueden ir bien para segú qué situaciones:

svh: El menor valor de altura de navegador. Normalmente en móvil cuando hacemos scroll la barra se minimiza y altera el valor de la altura del navegador, pues este valor calcula el menor tamaño de la pantalla posible, es decir siempre cuenta la barra.
dvh: El valor dinámico de altura de navegador. Calcula en cada variación el valor de la altura
lvh: El mayor valor de altura de navegador. Calcula el mayor valor de la altura , es decir con la barra de navegador minimizada,

Estas unidades también la tenemos en ancho (svw, dvw y lvw) pero tiene menos sentido.

Conclusiones

Tenemos a nuestro alcance un abanico de posibilidades muy interesante. Aquí el verdadero arte es saber qué utilizar en cada momento. Para uan web de una entidad bancaria difícilmente vamos a utlizar un tamaño de fuente basado en vw pero en cambio para una empresa creativa es una muy buena opción para sorprender al usuario.

¡Una cosa más!

Cuando uses font-size no uses line-height con unidades. Eso te obliga a cada vez que modificas con una media query, modificar el valor. Utiliza valores sin unidades para que el line-height sea proporcional a la tipografía aplicada al elemento.

Ejemplo:

html{
    font-size: 2vw;
    line-height: 1.5;
}
h1{
    // Mi H1 tendrá un alto de línea de 12vw (8vw x 1,5)
    font-size: 4rem;
}
h2{
    // Mi H2 tendrá un alto de línea de 9vw (6vw x 1,5)
    font-size: 3rem;
}
h3{
    // Mi H3 tendrá un alto de línea de 6vw (4vw x 1,5)
    font-size: 2rem;
}
h1 strong{
    // Dentro de la negrita tendrá un alto de línea de 18vw (12vw x 1,5)
    font-size: 1.5em;
}