Llevar Más Allá los Ems

Recientemente escribí sobre ems; qué son, cómo se usan y pequeñas cosas a recordar cuando implementamos nosotros mismos valores en ems. Tan sólo he arañado la superficie, y aún así, ¡a través de los comentarios de dicho artículo han surgido casi el doble de preguntas y dudas de las que en el mismo se resolvían! En este posterior artículo llevaré las cosas un poco más lejos, explicando los ems más detalladamente.

Nota: En el artículo anterior se trataron todos los aspectos básicos. Te recomiendo que lo leas antes de proseguir con éste.

Valores de Medida Independientes de Unidades

El tema de las medidas no depenpendientes de unidades (es decir: valores que no se corresponden con píxeles, porcentajes, ems, yardas, brazas.) fue propuesto por un par de personas la última vez, se me animó especialmente a explicar el uso de ems como medio para determinar line-height.

El uso de ems tiene en este contexto todo el sentido ya que están en relación directa con font-size. Si el texto en cuestión aumenta o disminuye, también lo hará la altura de línea si ha sido especificada en ems. Las unidades de medida absolutas, como los píxeles, realmente lo desbaratarían todo. Lo mismo vale para letter-spacing, otro ejemplo de una dimensión que siempre debería estar en relación con el tamaño de la fuente (font-size).

No obstante, podemos mejorar esto. Los ems complican un poco las cosas debido a que sus valores se heredan en cascada; los elementos heredan los valores de sus elementos padre. Fíjate en la organización del siguiente ejemplo: un artículo que contiene un párrafo.

Si aplicamos la altura de línea al artículo, ésta será heredada por el párrafo, algo perfectamente correcto:

Pero lo que realmente está heredando el párrafo es el valor resultante de un cálculo (en este caso es una valor igual a 24px), de manera que su altura de línea (line-height) está en relación con el tamaño de la fuente del artículo, no con el tamaño de su propia fuente. Si aumentásemos el tamaño de la fuente del párrafo a una medida de 20px, el resultado sería el siguiente:

Posteriormente su altura de línea se mantiene incondicionalmente con la medida de 24px, nos gustaría que su altura de línea fuese 1.5 * 20 = 30px.

Aquí es donde las medidas independientes de unidades resultan útiles. Eliminando la unidad em de la altura de línea como en la imagen inferior, el párrafo heredará por el contrario el valor que es independiente de las unidades, 1,5.

La altura de línea del párrafo está ahora en relación con el tamaño de su propia fuente, ¡bingo!

Curiosamente esto no funciona con letter-spacing. Y olvídate por completo de margins, text-indent, y este tipo de cosas.

Si te apetece leer más sobre este tema concreto, Eric Meyer lo explicó muy claramente ya en 2006, además Harry Roberts tiene una excelente revisión general de las unidades de medida fechada un par de años atrás.

Ems y Macrotipografía

Mientras la microtipografía se ocupa de los pequeños detalles dentro de un documento (marcas de puntuación, ligaduras, la separación silábica, el kerning y cosas semejantes) la macrotipografía gestiona los asuntos “gordos”. Piensa en todos los aspectos tipográficos que hacen que un bloque de texto sea legible; el espacio en blanco, la longitud de línea (medida), etc.

Echa un vistazo a esta composición de columnas fluidas:

Una maquetación de página perfectamente decente; dos divs, cada uno con una anchura del 50% exactamente, con un poco de padding izquierdo y derecho para crear los medianiles (dentro de cada div, asumiendo que estemos usando la siguiente anchura de caja * {box-sizing: border-box}. Típicamente, te sentirás tentado a definir el padding usando píxeles, o (aún mejor) porcentajes, si te estuvieses sintiendo superflexible.

Sin embargo, tanto los píxeles como los porcentajes tendrán un efecto negativo sobre la legibilidad del contenido, si (cuando) se altera el tamaño de la fuente. La anchura del medianil, al igual que el espacio en blanco en general, deberíamos realmente ajustarlos en relación al tamaño del texto. En este ejemplo, tenemos dos columnas de texto, con un espacio de medianil aplicado en porcentajes basados en la anchura de la columna, tal y como hemos descrito más arriba:

1

.column {

2

  width: 50%;

3

	float: left;

4

	padding: 0 3%;

5

}

Sin embargo, cuando alteras el tamaño de la fuente, verás como el medianil se estrecha proporcionalmente, blurring las divisiones entre las columnas de texto y haciendo que este sea menos legible.

Sería mucho mejor definir el padding usando ems:

1

.column {

2

	width: 50%;

3

	float: left;

4

	padding: 0 1.2em;

5

}

De esta forma, el medianil aumenta y disminuye junto con el texto, manteniendo la distancia entre las columnas y manteniendo la composición legible.

El Ajuste del 62.5%

Si todavía no estás usando ems, probablemente se deba a una de entre dos cosas que no te gusten; al hecho de que sus valores se heredan en cascada, o a tener que calcular estos valores.

El enfoque del 62,5% (propuesto por primera vez por Richard Rutter en 2004) te ayudará en el segundo punto. Es muy sencillo, en lugar de establecer la fuente base al 100% (que asumimos será igual a 16px) la establecemos al 62,5%, es decir 10px.

A partir de este punto, 1em = 10px. Por tanto:

etc., lo cual debería eliminar los cálculos aritméticos. Sin embargo, existe un pequeño problema con este enfoque, que tiene que ver con…

Media Queries basadas en ems

Hablaremos un poco sobre esta desventaja del 62,5% en un momento, pero primero tenemos que explicar las bases.

En su forma más simple, las media queries nos ayudan a aplicar reglas CSS bajo distintas circunstancias, dependiendo normalmente de los tamaños de pantalla. Las resoluciones se miden en píxeles, de forma que es perfectamente lógico que definamos las media queries de la misma forma:

1

@media only screen and (min–width: 600px) {

2

/*some stuff*/

3

}

Apliquemos esto a nuestro anterior ejemplo, para dividir las columnas a partir de cierto punto.

La cifra arbitraria de 600px nos es perfectamente válida en este caso; la longitud de línea óptima (o medida) es un tema ampliamente debatido, pero tal y como Robert Brighurst afirma:

Cualquier cifra entre los 45 y los 75 caracteres es ampliamente aceptado como longitud de línea adecuada para una página de columna única con el texto con una tipografía serif. Una línea de 66 caracteres (contabilizando tanto las letras como los espacios en blanco) es considerada como el ideal.

Robert Brighurst – Los Elementos del Estilo Tipográfico

En nuestro ejemplo, con un tamaño de fuente de 1em, tenemos como resultado una longitud de línea que alcanza los 70 caracteres antes de dividirse en dos columnas.

Una vez el diseño se divide en dos columnas, la logitud de línea quizá sea un poco más corta de lo que nos gustaría, pero son perfectamente válidas para mostrar nuestro ejemplo. Sin embargo, surgen problemas cuando alteramos el tamaño de fuente de nuestro navegador (pulsa comando +).

Si ampliamos la fuente en el navegador hasta “Muy grande” (yo estoy usando Chrome) las medidas de nuestra columna resultan excesivamente estrechas, haciendo que el contenido sea prácticamente ilegible. Por esto, deberíamos establecer nuestras media queries basándonos en el tamaño de la fuente.

¿Recuerdas la fórmula de nuestro anterior artículo?

Nuestro objetivo son los 600px, a partir de un tamaño heredado de fuente de 16px. 600/16 = 37.5em, así que cambiaremos nuestra media query para reflejar este valor:

Ahora, cuando los ajustes de tamaño de fuente de nuestro navegador sean alterados, veremos una diferencia en la forma en la que se comporta la media query. Con un texto más grande, aquí tienes la media query basada en píxeles, con la ventana de visualización ajustada a un tamaño de 630 píxeles de anchura:

Aunque, cuando se alcanza esa anchura de pantalla, la media query basada en ems mantiene las cosas bastante ordenadas; bonitas y legibles.

Volviendo al 62,5%

Aquí está la miga; las media queries basadas en valores em no tienen ningún interés en el redimensionamiento del html, body, o lo cualquier otro elemento similar; son relativas al tamaño de fuente del navegador. Esto significa que, al establecer el tamaño de fuente a cualquier valor distinto al 100%, tendrás que gestionar dos escalas de valores em.

Trabaja a partir de una base de 100% y todo será sencillo como un juego de niños. Junto a esto, como bien argumenta Filament Group, trabajar de esta forma te persuade de seguir trabajando con píxeles, algo positivo en sí.

Ems, Rems, Funciones and Combinaciones

Existe una palabra que surgió muchas más veces que cualquier otra en los comentarios del artículo anterior; las combinaciones. Si encuentras complicado extraer los cálculos, por qué no dejar que un preprocesor CSS haga el trabajo pesado por ti?

Con los preprocesadores CSS, como Sass, LESS y Stylus, puedes definir combinaciones y funciones. Estos aceptan parámetros, después calculan y combinan los valores CSS por ti.

Nota: Si este concepto es nuevo para ti, echa un vistazo al artículo Mastering Sass: Lesson 2 en el cual Jeffrey nos introduce a las combinaciones de Sass.

Las combinaciones y funciones pueden gestionar todo tipo de cosas por ti, incluyendo las incómodas matemáticas relacionadas con los valores en ems.

Fíjate en este sencillo ejemplo de Garret Winder en Erskine. Empieza definiendo una función (llamada “em”) la cual acepta dos valores, justo igual a nuestra anterior fórmula, aunque el valor del contexto por defecto es igual a 16, de manera que no hace falta especificarlo nuevamente salvo excepciones en las que sea necesario.

Después podemos usar esta función “em” en el CSS posterior, solicitándole el cálculo de la equivalencia de 30px:

La cual, cuando es compilada, devuelve el CSS en bruto:

Y este no es el único ejemplo de este tipo – miles de desarrolladores front-end han reducido su preprocesado escribiendo sus propias combinaciones em. También rems; al introducir los valores deseados en píxeles en esta función de combinación de Chris Coyier, puedes obtener los valores rem fácilmente, junto con una alternativa en píxeles.

La lista es casi interminable, pero si tienes cualquier combinación que quieras usar en tus propios proyectos (para obtener ems y rems) házmelo saber en los comentarios y la añadiré aquí:

Sass

• Mixins for Rem Font Sizing (Combinaciones para el tamaño en rems de las fuentes) en CSS Tricks
• The Ultimate PX/REM Mixin (La combinación PX/REM definitiva) de Hugo Giraudel
• rem de btmanic en GitHub
• Scss Rem Mixin Now With a Better Fallback (Combinar Rem en Scss con mejores alternativas) por Adam Simpson en Sparkbox

Less

• Mixins for Rem Font Sizing (Combinaciones rem de tamaño de fuente) en CSS Tricks
• The REM Fallback with Sass or LESS (Alternativas para rem con Sass y LESS) de Hans Christian
• Using rem units with an easy pixel fallback (Usar unidades rem con sencillas alternativas en píxeles) por Cory Simmons
• Less Mixin (Combinaciones en LESS) de Martin Michálek en Codepen

Stylus

• Font-size using rem with fallback in Stylus de Yuya Saito
• Comment on CSS Tricks de Maxim
• Guau… esta lista necesita ayuda

Conclusión

Es un tema muy extenso, claramente hay muchas cosas que abordar, pero zambullirse en el terreno de los ems es uno de los retos del desarrollo front-end más satisfactorios. Deja de pensar en píxeles y empieza a pensar con medidas relativas, ¡ya!