Los increíbles Layouts elásticos usando Em

layouts elasticos con em vs px

En éste artículo que me ha regalado Jon Tan para que lo publicara para los que no entendais inglés, mostraremos el proceso completo para la creación de un layout elástico básico, qué es exactamente un “em”, como calcularlos y como usar ems para crear capas elásticas que permitan mostrar contenido con imágenes y texto elástico, tanto horizontal como verticalmente.

Qué es un layout elástico?

Un layout elástico puede escalar según el tamaño del texto definido por el usuario

Más concretamente, un interface elástico se mostrará según el tamaño de letra del navegador
—generalmente 16px por defecto—y los usuarios podrán modificarlo si lo desean. Algunas personas hacen un cambio permanente por razones de accesibilidad, otras usan los controles del IU para incrementar el tamaño del texto cuando es necesario. Para hacer una prueba de que es a lo que me refiero pulsa comando (la tecla de la manzana) o control en Windows y pulsa las teclas de más y menos: El tamaño del texto aumenta y disminuye.

Los diseños elásticos usan valores en em para todos los elementos.
Los Ems tienen un tamaño relativo, que se escribe así: 1em, 0.5em, 1.5em etc.
Los Ems pueden ser especificados con tres decimales colocados según esta forma: 1.063em. “Relativo” significa que:

  1. Son calculados en base al tamaño de fuente del elemento padre. Por Ej. si un <div> tiene un tamaño de fuente computada de16px cualquier elemento dentro de esa capa —un hijo— heredará el mismo tamaño de fuente a menos que se modifique especificamente. Si el tamaño de fuente del elemento hijo se cambia a 0.75em entonces el valor computado para el tamaño será de 0.75 * 16px = 12px
  2. Si el usuario incrementa (o reduce) el tamaño del texto en su navegador, el interface entero se reduce o se amplia.

Fíjate en este ejemplo de layout elástico. Ajusta el tamaño del texto para ver su escala (con comando y la tecla + y – , o desde el menu ver). Ésto contiene todo el CSS y HTML usado en este tutorial

Para ver otros ejemplos de estructuras elásticas puedes visitar la genial y elástica web de Dan Cederholm SimpleBits, o cambiar el tamaño del texto en esta misma página.

Los interfaces elásticos son flexibles y accesibles para los usuarios y pueden ser, como mínimo, tan precisos como los diseños en píxeles.

Las estructuras pueden ser creadas eficaz y rapidamente usando CSS en cuanto definimos la relación básica entre tamaño de fuente, pixel y em.

Presentando al Em, la “chica elástica” de las CSS

El em es tan poderoso y flexible como Elastigirl. No importa qué tamaño de fuente tenga, ya sea 12px, 16 o 60, el conjunto será siempre exactamente igual.

El em es una unidad de medida para tipografía. ¿Qué es y cómo adquirió este nombre? Aquí está su pequeña historia:

Un em era originalmente igual al tamaño de un bloque de metal usado para cortar una carta simple de tipo por una fuente específica.
Equivalía basicamente a la longitud del ancho de la letra “M”.

Lecturas recomendadas relacionadas:

  1. The amazing em unit
  2. Em discussion on Typophile

El diseñador experto podría pensar, “espera un segundo, las letras no ocupan el mismo espacio”, y estaría en lo cierto: Los ordenadores usan kerning o ancho entre fuentes para ajustar el espacio horizontal que cada letra ocupa en la pantalla, haciendolo equidistante y balanceado Originalmente el bloque de metal era recortado o “kerned” para igualar el espacio horizontal de cada letra.

De esta forma, en CSS, un em es realmente una medida vertical: un em es igual al espacio vertical necesario para cualquier letra dada de una fuente, en referencia al espacio horizontal que esta ocupa:

Si el tamaño de letra es 16px, entonces 1em = 16px.

Comenzamos

Antes de empezar a trabajar en ems con nuestra hoja de estilos, necesitamos saber el tamaño de fuente por defecto del navegador. Afortunadamente, lo sabemos:

Todos los navegadores populares tienen un tamaño de fuente por defecto de 16px. De este modo, por defecto en cualquier navegador estandar, 1em = 16px.

En Firefox, puedes ver el tamaño de fuente por defecto desde Herramientas > Opciones > Contenido

Así que, antes de escribir cualquier selector simple en CSS, el navegador tiene un tamaño de fuente de 16px por defecto. El <body>
hereda esta caracteristica a menos que definamos otra medida mediante css. Según ésto 1em = 16px,
0.5em = 8px, 10em = 160px etc. Podemos especificar el tamaño de cualquier elemento que necesitemos usando ems!

Estableciendo el tamaño del cuerpo

Algunas personas sugieren modificar el tamaño de fuente del <body>
al equivalente a 10px (0.625em o 62.5%) para así poder seleccionar el tamaño de todos los elementos hijo más facilmente, yo mismo lo hago muchas veces para trabajos. Sin embargo me parece mejor dejar los valores por defecto del navegador y transformar la medida unicamente para los elementos que lo requieran en cada momento porque de esta forma sabemos que el tamaño de fuente del body por defecto será 16px, y además sabemos con certeza que si una persona ha modificado los valores por defecto del navegador nuestro interface elástico no se romperá y seguirá ajustando perfectamente.
Para ello simplemente definimos en nuestra hoja de estilos:

body{ font-size:1em; }

El problema, (como casi siempre en diseño web) es el detestable Internet Explorer. IE tiene un problema con el ems y redimensionar texto del tamaño medio (por defecto) a mayor en IE 5/6 provocará un excesivo incremento del tamaño de fuente, mucho mayor del esperado, por lo que debemos incluir un selector extra:

html{ font-size:100%; }

Usando ésto el redimensionamiento será correcto incluso en Explorer

Ahora vamos a dar a nuestro <body>algunos estilos más y centrar todo, lo que será importante después para el contenedor de la web. Nuestro CSS comenzará así:

html{

font-size: 100%;

} body{

font-size: 1em;

font-family: georgia, serif;

text-align: center;

color: #444;

background: #e6e6e6;

padding: 0;

margin: 0;

}

Fórmula para convertir Píxeles a em

Cuando comenzamos a hacer estas conversiones necesitamos hacer bastantes calculos, así que guarda una calculadora cerca

Truco: Encuentra el tamaño de fuente de cualquier elemento en un plisplas gracias a la fantástica barra de desarrollo (Web developer toolbar) creada por Chris Pederick. Hay que usar: Information > Display element information.

Como no somos probablemente unos gurús de las matemáticas mejor tener que recordar una única fórmula ¿verdad?. Como diseñador seguro que conoces bien los píxeles, así que partiremos de esta medida para crearla.

Simplemente calculamos cuanto mide un píxel en ems y lo multiplicamos por el tamaño en píxeles que necesitemos para optener cada medida en ems.

Sabemos que un em es siempre igual al tamaño de fuente del elemento padre, de esta manera:

1 ÷ tamaño de fuente del padre × tamaño deseado en píxeles = valor en em

Recomendable en tus favoritos: Tabla de conversión de Pixel a ems según el tamaño de las fuentes.

No dejes que esta formula te asuste. Los interfaces elásticos son divertidos de hacer, así que vamos a practicar creando algunos elementos de página.

Construyendo un contenedor elástico: “el supertraje”

Para crear la capa de contenido centrada en el ejemplo, necesitamos un poco de HTML. Vamos a echarle imaginación y a llamarlo “wrap”:

<div id="wrap">

…

</div>

Queremos que este contenedor mida 740px para que se vea bien a una resolución de 800x×600px, como en el ejemplo. ¿Cuanto son 740px en ems? Vamos a averiguarlo:

  1. Seleccionamos un ancho de 740px en ems para nuestra capa:Sabemos que el elemento padre (<body>) tiene un tamaño de fuente de 16px. Nuestra capa hijo (<div id="wrap">) heredará ésta propiedad. Asi que podemos calcular cuanto mide un Pixel en ems:1em = 16px. De esta forma, 1px = 1 ÷ 16 = 0.0625em.Los ems permiten un máximo de 3 decimales, así que tendremos que redondear.Multiplicamos por 740 para obtener la medida en ems:0.0625em × 740 = 46.25emO hacemos el calculo completo con la fórmula:

    1 ÷ 16 × 740 = 46.25em

    (1 ÷ tamaño de fuente padre × requerido por el valor en pixel = valor en em)

    Puedes usar la misma fórmula para calcular en ems cualquier ancho o alto (width o height) que necesites. Saca el valor de 1px en em para ese elemento, multiplicalo por el valor en pixels que necesites para obtener el equivalente en ems

  2. Crear CSS:Aplicamos el ancho en ems, centramos la capa usando márgenes derecho e izquierdo “auto” y damos sobre un fondo blanco un borde de 1px gris como borde, alineando el texto a la izquierda:
    #wrap{
    
    width: 46.25em;
    
    margin: 1.5em auto;
    
    border: 0.063em solid #ccc;
    
    background: #fff;
    
    text-align: left;
    
    }

Ahora tenemos un contenedor elástico para nuestro contenido!

Formateando textos con ems

Vamos a insertar un <h1> y un <p> a nuestro contenedor

<div id="wrap"><h1> … <h1>

<p> … <p>

</div>

Mientras estamos aquí, podríamos también añadir algunas mejoras tipográficas seleccionando un Leading base y añadiendo algo de ritmo vertical, con todo expresado en ems. Aquí tienes un poco más de historia:

Leading (pronunciado como “led–ing”) era tradicionalmente la inserción de lineas
de plomo por debajo de las líneas de texto. Ésto es expresado en CSS como line-height pero en vez de añadirse espacio debajo, incrementa espacio tanto por arriba como por abajo de cada línea de texto.

En el ejemplo, hemos usado los mismos tamaños de fuente que Richard Rutter en su chapter on vertical motion
para hacer la lectura tan consistente como sea posible. El tamaño de fuente de la cabecera será de 18px. y los de los párrafos 12px en una línea de 18px de altura.

18px será de esta forma nuestro leading básico—el valor más importante en nuestro interface. Todo lo demás será proporcional a ésto.

Una nota sobre Jerarquías CSS: Nuestro contenedor, <div id="wrap">, no tiene tamaño de fuente seleccionado expresamente, así que heredará el tamaño de1em (16px) como tamaño de fuente de su elemento padre, el <body>. Cualquier elemento dentro de nuestro contenedor heredará también este tamaño de fuente, a menos que lo cambiemos expresamente para unos determinados elementos, que es precisamente lo que vamos a hacer.

  1. Seleccionamos una fuente de 12px de tamaño con un line-height (altura) de 18px y margen para cada párrafo:Sabemos que nuestro párrafo ha heredado 1em (16px) como tamaño de fuente de su elemento padre, <div id="wrap">.
    Según los cálculos previos, ya sabemos que 1px equivale a 0.0625em. Así que simplemente multiplicamos x12 este valor para pasar de px a ems0.0625 x× 12 = 0.750emO usamos nuestra famosa fórmula:1 ÷ 16 × 12 = 0.750em

    (1 ÷ tamaño de fuente del elemento padre – × valor en píxeles requerido = valor en em)

    Vamos a aplicar ésto al CSS:

    p{
    
    font-size: 0.750em;
    
    }

    Margin, line height, padding etc. en ems son todos elementos relativos al tamaño de la fuente de la fuente del elemento que los abarca

    Para calcular el alto (line-height) y el margen de 18px para nuestro leading básico hacemos lo siguiente:

    18 ÷ 12 = 1.5em

    Dividiendo la altura (line-height) deseada (18px) entre el tamaño de fuente del elemento (12px) obtendremos el valor en em para el line height. En este ejemplo, el line-height es 1 y medio el tamaño de fuente: 1.5em.

    Añadimos la altura y las propiedades de márgenes al CSS:

    p{
    
    font-size: 0.750em;
    
    line-height: 1.5em;
    
    margin: 1.5em;
    
    }

    Ahora, el navegador se dirá a sí mismo, “Oh, line height y margin está seleccionado a 1.5em, lo que debería ser 1.5 veces el tamaño de fuente. Cúal es el tamaño de fuente otra vez? 12px? OK, perfecto, voy a establecer la altura y los margenes como 18px.”

  2. Seleccionamos el tamaño de fuente de 18px para el títular <h1>:El <h1> ha heredado un tamaño de fuente de 1em (16px) de su elemento padre, <div id="wrap">.
    Como sabemos que 1px es desde antes: 0.0625em. Simplemente multiplicamos por 18 para obtener el valor en em de18px:0.0625 × 18 = 1.125emO usamos la fórmula:1 ÷ 16 × 18 = 1.125em(1 ÷ tamaño de fuente del elemento padre – × valor en píxeles requerido = valor en em)Ahora aplicamos ésto al CSS:

    h1{
    
    font-size: 1.125em;
    
    }

    Para mantener nuestro ritmo vertical queremos seleccionar una altura (line-height) y margen de 18px. Fácil: Si el tamaño de fuente es 18px entonces 18px en ems es 1em! Vamos a añadir las propiedades al CSS ( y a hacer la fuente más ligera)

    h1{
    
    font-size: 1.125em;
    
    line-height: 1em;
    
    margin: 1em;
    
    font-weight: 300;
    
    }

Ya tenemos ritmo vertical, ahora vamos a modificar las imágenes.

Dimensionando imágenes en ems

Para mantener el ritmo de la página de ejemplo, el tamaño de la imagen debería ser un múltiplo de nuestro leading básico.

Nuestra imagen tiene un ancho (width) y alto (height) de 90px (18px × 5.) Tiene márgen derecho e inferior de 18px y está flotado a la izquierda en el párrafo.
Éste es el HTML:

<p>

<img src="90.jpg" alt="Clevedon Pier" /> Lorem…

</p>

La imagen es un elemento hijo del párrafo—es el elemento padre—asi que sabemos que la imagen ha heredado un tamaño de fuente de 12px
De este modo para calcular el ancho y alto de la imagen usamos la siguiente fórmula:

1 ÷ 12 × 90 = 7.5em

(1 ÷ tamaño de fuente del elemento padre – × valor en píxeles requerido = valor en em)

Vamos a aplicarlo al CSS:

p img{

width: 7.5em;

height: 7.5em;

}

Ya sabemos la equivalencia de 18px en ems para el elemento padre, el párrafo, asi que vamos a añadir la propiedad de margen y posición al CSS:

p img{

width: 7.5em;

height: 7.5em;

margin: 0 1.5em 1.5em 0;

float: left;

}

N.B. Una imagen no necesita estár dentro de un párrafo para mantener un significado semántico, lo hemnops usado en el ejemplo para mostrar como se pueden calcular los ems basandose en las propiedades heredadas.

Ahora tenemos un supertraje elastico, un contenedor con algo de contenido eléstico y ritmo vertical como en el ejemplo.
Con un poco de suerte, iras mejorando en la creación de estructuras elásticas y diseñandolas con ems. Lo has conseguido, el Edna Mode de los diseños! La página elástica de ejemplo tiene todo el HTML and CSS que necesitas. Mira el código fuente para verlo en detalle.

Usando diseños elásticos

Algunas de las ventajas de los diseños elásticos para los diseñadores son la precisión, control y accesibilidad. Sin embargo algunas personas defienden que permitir expandir el contenido más alla de ciertos límites de visión puede resultar problemático.

Las imágenes pierden resolución al ampliarse, pero es posible que pronto también pueda aumentarse el tamaño sin perder resolución SVG y escalar incluso las imágenes de fondo.

Implementar diseños elásticos puede ayudarte a desarrollar un profundo conocimiento de ems en CSS. Definitivamente estas técnicas deberían estar entre las herramientas de todo diseñador, combinadas con otras técnicas o por si mismas.

Artículo traducido de jontangerine con la colaboración y autorización de su autor, JonTan

13 COMENTARIOS

  1. Muy buen tutorial! me ha sido de gran ayuda para entender el leading básico y el funcionamiento de los em. Yo actualmente estoy haciendo uso de ellos pero ajustando el html y body a 62.5% porque la conversión se hace más fácil claro, pero he leído en blogs que es mejor pasarse a ‘rem’ de modo que no tengas que calcular según su padre sino sobre su ráiz (body, html). El problema es que ie8 no lo coge :S

    Pero me preguntaba si habría alguna forma de especificar width y height con em pero pudiendo calcularlo fácilmente (en base de 10) con la regla del 62.5% para font… no sé si queda muy claro mi duda :S

    Un saludo!

  2. Tienes un poblema en esta pagina y seguro que tiene que ver con el em.
    El codigo que pusiste en este post es demasiado pequeño que casi no se ve.
    Ej las lineas:
    body{ font-size:1em; }
    html{ font-size:100%; }
    no se alcanza a leer facilmente

Responder