Share
Recientemente escribí sobre ems; qué son, cómo se usan y algunos elementos que deben tenerse en cuenta cuando los implementa usted mismo. Sin embargo, solo rasguñé la superficie, ¡y el hilo de comentarios arrojó el doble de preguntas que el artículo respondió! En este seguimiento voy a llevar las cosas más lejos, mirando ems con más detalle..
E en Dribbble Nota: El artículo anterior cubre todos los conceptos básicos. Te recomiendo leer sobre ellos antes de continuar..
El tema de las mediciones sin unidades (es decir, valores sin píxeles, porcentajes, ems, yardas, brazas, ...) fue ofrecido por un par de personas la última vez, especialmente porque había recomendado el uso de ems para especificar altura de la línea.
Ems tiene perfecto sentido en este caso, ya que son relativos a la tamaño de fuente. Si el texto en cuestión crece o se reduce, también lo hace la altura de la línea si se establece en ems. Las unidades absolutas, como los píxeles, realmente arruinarían las cosas. Lo mismo ocurre con espaciado de letras, Otro ejemplo de una dimensión que debería Siempre sea relativo al tamaño de letra..
Sin embargo, podemos mejorar esto. Ems complica las cosas como sus valores en cascada; Los elementos heredan los valores em de sus padres. Tome este arreglo por ejemplo: un artículo que contiene un párrafo:
Si aplicamos la altura de línea al artículo, el párrafo también lo heredará, lo cual está bien:
Pero lo que el párrafo realmente hereda es el valor computado (en este caso, efectivamente, 24 px), por lo que su altura de línea es relativa al tamaño de fuente del artículo, no a la propia. Si aumentamos el tamaño de fuente del párrafo al equivalente de 20 px:
entonces su altura de línea permanece firmemente en 24px. Idealmente, nos gustaría que su altura de línea aparezca 1.5 * 20 = 30px.
Aquí es donde entran las medidas sin unidades. Al eliminar la unidad em de la altura de línea del artículo:
el párrafo heredará el valor sin unidad en su lugar, 1.5. La altura de línea del párrafo ahora es relativa a su propio tamaño de fuente, bingo!
Accentsconagua
Curiosamente, esto no se aplica a espaciado de letras. Y puedes olvidarte completamente de márgenes, guion de texto, esa clase de cosas.
Si está interesado en leer más sobre el tema, Eric Meyer lo cubrió de manera sólida en 2006, y Harry Roberts tiene una excelente visión general de las unidades de medición de hace un par de años..
Mientras microtipografía se refiere a los pequeños detalles dentro de un documento (signos de puntuación, ligaduras, separación de palabras, kerning, etc.) macrotipografía maneja todas las cosas "grandes". Piense en todos los aspectos de la tipografía que hacen legible un cuerpo de texto; espacios en blanco, longitud de línea (medida), sangría de párrafo, etc..
Eche un vistazo a la configuración de esta columna fluida:
Un diseño perfectamente decente; dos divs, cada uno exactamente con un 50% de ancho, con algo de relleno a la izquierda y a la derecha para formar las canaletas (dentro de cada div, suponiendo que se está utilizando * box-sizing: border-box). Por lo general, se sentiría tentado de definir el relleno mediante píxeles o (incluso mejor) porcentajes si se sintiera súper flexible..
Sin embargo, los píxeles y los porcentajes tendrán un efecto perjudicial en la legibilidad del contenido, si (cuando) se modifica el tamaño de la fuente. El ancho del canal, al igual que con el espacio en blanco en general, debe ser dimensionado en relación con el texto. En este ejemplo, tenemos dos columnas de texto, con el desagüe aplicado como un porcentaje del ancho de la columna, tal como lo describimos anteriormente:
.columna ancho: 50%; flotador izquierdo; relleno: 0 3%;
Esta es una demostración en vivo, eche un vistazo y ensucie con usted mismo ... Sin embargo, cuando modifique el tamaño de la fuente, notará que el canal se vuelve relativamente más estrecho, borrando la división entre las columnas de texto y haciendo que sea más difícil de leer..
Este es un ejemplo extremo, con un texto absurdamente grande para el ancho de la columna, pero ilustra el punto ... Mucho mejor sería definir el relleno usando ems:
.columna ancho: 50%; flotador izquierdo; relleno: 0 1.2em;
De esta manera, la canaleta crece y se encoge junto con el texto, manteniendo la distancia entre columnas y manteniendo las cosas legibles.
Intenta jugar con este ... Si aún no estás usando ems, probablemente se deba a una de dos cosas que no te gustan de ellos; el hecho de que sus valores caigan en cascada o que tengan que calcular esos valores en primer lugar.
El enfoque del 62.5% (propuesto por primera vez por Richard Rutter en 2004) lo ayudará en el segundo. Sencillamente, en lugar de establecer el tamaño de fuente base en 100% (que asumiremos que es 16px), lo establecemos en 62.5%, efectivamente 10px.
Desde ese punto, 1em = 10px. Por lo tanto:
| Ems | Píxeles equivalentes |
| 0.5em | 5px |
| ... | ... |
| 1.1em | 11px |
| 1.2em | 12px |
| 1.3em | 13px |
| 1.4em | 14px |
| ... | ... |
| 47.3em | 473px |
y así sucesivamente, lo que debería eliminar algo de la aritmética mental. sin embargo, Hay un pequeño problema con este enfoque, y todo tiene que ver con ...
Hablaremos un poco sobre la advertencia del 62.5% en un momento, pero primero necesitamos establecer algunas bases.
En su forma más simple, las consultas de medios nos ayudan a aplicar las reglas CSS en diferentes circunstancias, generalmente dependiendo del tamaño de la pantalla. Las resoluciones de pantalla se miden en píxeles, por lo que es lógico que definamos las consultas de los medios de la misma manera:
Pantalla de solo media y (ancho mínimo: 600 px) / * algunas cosas * /
Apliquemos esto a nuestra demostración anterior, para dividir las columnas después de un cierto punto.
En este primer enfoque móvil, nuestras columnas se dividen una vez que la ventana gráfica alcanza 600px La figura arbitraria de 600px simplemente está bien en este caso; longitud de línea óptima (o medida) es un tema muy debatido, pero como afirma Robert Brighurst:
Cualquier cosa de 45 a 75 caracteres se considera una longitud de línea satisfactoria para un conjunto de páginas de una sola columna en una cara de texto serifed en un tamaño de texto. La línea de 66 caracteres (contando letras y espacios) es considerada como ideal.
Robert Brighurst - Los elementos del estilo tipográfico
En nuestra demostración, con un tamaño de fuente de 1em, la medida ahora alcanza alrededor de 70 caracteres antes de dividirse en dos columnas.
Una vez que llegamos a dos columnas, la medida es quizás un poco más estrecha de lo que nos gustaría, pero estas columnas están perfectamente bien para los propósitos de esta demostración. Sin embargo, surgen problemas cuando modificamos el tamaño de la fuente de nuestro navegador (comando de golpe +).
Con el tamaño de fuente aumentado a "Muy grande" (estoy usando Chrome) nuestras medidas de columna son camino demasiado estrecho, haciendo el contenido bastante ilegible. Por esta razón, deberíamos considerar hacer nuestras consultas de medios en relación con el tamaño de la fuente también.
Recuerda la fórmula de nuestro artículo anterior.?
Nuestro objetivo es 600px, de un tamaño de fuente heredado de 16px. 600/16 = 37.5em, Así que cambiemos nuestra consulta de medios para reflejar eso:
Ahora, cuando se modifica la configuración de tamaño de fuente de nuestro navegador, vemos una diferencia en el comportamiento de la consulta de medios. Con texto más grande, aquí está la consulta de medios basada en píxeles, con la ventana gráfica configurada en alrededor de 630px de ancho:
Mientras que, en ese ancho de pantalla, la consulta de medios basada en em mantiene las cosas ordenadamente en una columna; agradable y legible.
Acercar / alejar y ver cómo la consulta de medios tiene efecto. Aquí está la crisis; Las consultas de medios basadas en em son totalmente desinteresadas en cualquier tamaño en el html, cuerpo, o lo que sea; son relativos al tamaño de fuente del navegador. Esto significa que, al establecer el tamaño de fuente base en un valor distinto al 100%, deberá administrar dos escalas de valores em.
Trabaja desde una base del 100% y todo comenzará desde un campo de juego nivelado. Además, como argumenta Filament Group, trabajar de esta manera te aleja del pensamiento en píxeles, lo que es bueno.
Una palabra surgió más que ninguna otra en el hilo de comentarios del artículo anterior; mezclar. Si está luchando por entender mejor los cálculos, entonces ¿por qué no deja que un preprocesador CSS haga el trabajo pesado por usted??
Con los preprocesadores de CSS, como Sass, LESS y Stylus, puede definir mixins y funciones. Estos aceptan parámetros, luego calculan y producen valores CSS para ti.
Nota: Si eres nuevo en el concepto, echa un vistazo a Mastering Sass: Lección 2 en la que Jeffrey presenta los mixins de Sass.
Las funciones y las funciones pueden manejar todo tipo de cosas para usted, incluidas las matemáticas complicadas que rodean a ems..
Toma este sencillo ejemplo de Garrett Winder en Erskine. Él comienza definiendo una función (llamada "em") que acepta dos valores (igual que nuestra fórmula anterior), aunque el valor de contexto tiene un valor predeterminado de 16, por lo que no es necesario volver a especificarlo a menos que sea necesario.
Luego podemos usar esa función "em" dentro de CSS, pidiéndole que calcule el equivalente de 30px:
Que, cuando se compila, genera el CSS en su forma sin formato:
Y este tampoco es el único ejemplo de su tipo: miles de desarrolladores front-end han cortado sus dientes de preprocesamiento al escribir sus propios eminsins. Rems también; Al ingresar el valor de píxel deseado en esta mezcla presentada por Chris Coyier, puede hacer que los rems sean enviados de manera sencilla, con píxeles de respaldo..
Aquí está la mezcla. 
Aquí está el uso. 
Aquí está el resultado. La lista es casi interminable, pero si tienes algún mixins que te guste usar en tu propio trabajo (para enviar ems y rems), avísame en los comentarios y los agregaré aquí:
Es un tema amplio, claramente hay mucho que asimilar, pero sumergirse en el mundo de ems es uno de los desafíos más satisfactorios en el desarrollo web de front-end. Deja de pensar píxeles y empieza a pensar relativamente hoy.!
