Como crear Layouts elásticos usando la medida Em


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 Comments

Add yours
  1. 5
    RhapsodyOfFire

    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

  2. 13
    gjwbnxbf

    Throne later said she doesn鈥檛 think her stance on coal differs much between the state party, since they both support coal technology and acknowledge the existence of climate change. [url=http://www.coachoutletonline.name/]www.coachoutletonline.name[/url] Hfrs. – Lim: EG Graham 拢572, 拢570, 拢568, 拢482; RR Garbutt 拢565, 拢502; LW Hugill 拢522, 拢445; JL Peacock 拢520, 拢492; R Hall 拢505, 拢502; P Houlston 拢464, 拢452, 拢415; JW Thompson 拢445, 拢418, 拢398; JD i [url=http://www.katespade.name/]kate spade outlet[/url]
    Loading article content [url=http://www.truereligionoutlet.name/]true religion outlet[/url] :聽鈥淚t鈥檚 just the easiest, cheapest, most convenient way to get to and from work. It costs nothing and I get a little exercise.鈥?
    Goodell, however, was in Chicago’s Northwest suburbs for a meeting of select owners to discuss the potential relocation of an existing NFL franchise — perhaps multiple teams — to Los Angeles. [url=http://www.burberryoutlet.click/]burberry outlet[/url] He stressed how the girls began plotting the homicide months earlier, and how, after Leutner had been stabbed, they told her to lie still so as not to lose blood, while they went for help, while in fact they just didn’t want her to be discovered. r [url=http://www.burberryoutlet.click/]burberry scarf[/url]
    I am more than supprised this does not get more publicity with DBC…oh wait it can’t as reporters are banned from the courts and the council seek gagging orders on those involved. If only you knew how evil DBC (aptly named) SS are this story would not shock you! I have had more independantly investigated complaints upheld about DBC SS (childrens) than probably anyone in Darlington and have they changed NO! They live and work in a secret world where the courts are cloesd to the public and the press and want all you sheeple to believe what an earlier comment s said “There’s no smoke without fire” simply UNTRUE if you upset DBC they turn on your children by way of a punishment, and then gag you about telling anyone! Why not look at some of the Freedom of information questions asked on whatdotheyknow.com about DBC SS and you will see how long this has been going on for. I hope he sues them for every penny he can and if he needs any evidence of upheld complaints intot heir working practices get in touch as I have loads of them against DBC they might help him win. Time to turn the tables on these unanswerable people, perhaps thats why all Social Services are trying to get the newly released film “Traffic” banned strange that in the trailer DBC crops up at just over 7 minutes!! Now tell me theres no smoke without fire! TRAFFIC are your kids next? https://www.facebook .com/Traffic2015?fre f=ts [url=http://www.louisvuitton-handbags.mobi/]louis vuitton handbags[/url] The AIM format is called Catch-Record-Release (CRR). With CRR, anglers measure each walleye they catch on an official ruler, photograph the fish on the board, photograph the fish being held by one of the anglers, release the live fish and record its length on a scorecard. The length of each walleye is converted to pounds and ounces using a standardized formula. The team’s score is made up of the seven largest walleyes tallied that day.
    d Kia Motors Corp鈥檚 net income reached $642.92m in the April-June period, down 27.1 percent from a year earlier, the carmaker said in its regulatory filing. (Getty Images) [url=http://www.michael-kors.click/]michael kors outlet online[/url] US trade representatives declined to comment on the negotiations. [url=http://www.toms.net.co/]toms outlet[/url]
    October 2: Ossett Albion (h), 7-0 [url=http://www.toms.net.co/]toms shoes[/url] I have removed earth from the slab for about a foot back from the worst corner, but there is still water intrusion. http://www.abercrombie.eu.com
    ZWNlc3NhcnkuIEhlIHRydXN0ZWQgdGhhdCBBdWRyZXkga25ldyBoZXIgcGh5c2ljYWwgbGltaXRh [url=http://www.burberryoutlet.click/]http://www.burberryoutlet.click[/url] email:<a k [url=http://www.moncleroutlet.name/]moncler outlet[/url]
    Nice (2008-10) Played 68 Goals 26 [url=http://www.polo.black/]polo ralph lauren outlet[/url] In Odessa, in Ukraine, he encountered a woman striped to the waist, tied to a cross and thrashed in a crowded market place by a man with a 6ft knotted whip.
    Though the eurozone has in recent years shown signs of recovery, the Greek crisis is weakening the confidence of investors and consumers both, which may further impact EU's quantitative easing policies and the Juncker Plan which aims to boost investment in European countries. [url=http://www.guccioutlet.eu.com/]gucci outlet[/url] to take on employees with a low participation rate in the labor market
    Kumorkiewicz owns a cabinet shop with his wife, Susan, and competes part time in professional fishing events. [url=http://www.burberryoutletonlines.name/]burberry outlet online[/url] Let me repeat that; a bus driver in Moscow blipped his lights in recognition of being let in.
    St. John’s 42 19 61 [url=http://www.oakley.nom.co/]oakley sunglasses[/url] saw some impressive figures with a stunning count of 234 birds at Nosterfield, the largest flock ever seen in the area. A further 142 were at Newsham ponds and 94 at Scorton.
    c Zinedine Zidane v Bayer Leverkusen 2002 [url=http://www.louboutin.eu.com/]louboutin shoes[/url] Another adventure saw us wander along Cirali鈥檚 quiet beach to Olympos, a slightly more lively spot popular with hippies and backpackers.
    The Williams have a beautiful, elegant home, and the remodel complemented that elegance and sophistication, Wachtl said. That played into the natural stone material palette of timeless materials, which is nice because 10 years down the road, they won t have to remodel again, plus it benefits resale value. [url=http://www.hollisterclothing.name/]hollister co[/url] As the Great John Wooden once said “It’s what you learn after you know it all that counts” u [url=http://www.truereligionoutlet.name/]true religion outlet[/url]
    Bishop Auckland v Darlington, Dunston UTS v Whickham, Ryhope CW v Newton Aycliffe, South Shields v Norton. [url=http://www.louisvuitton-handbags.mobi/]http://www.louisvuitton-handbags.mobi[/url] “That term comes from when we were skinned and our flesh was red,” Koenig said. “I don’t see how that is honoring us in any way. Is our skin red? Would it be OK for the Kansas City Negroes or the Blackskins? That’s not OK at all.”
    g Commentary and photos submitted to the Missoulian (Missoulian.com) may be published or distributed in print, electronically or other forms. Opinions expressed in Missoulian.com’s comments reflect the opinions of the author, and are not necessarily the opinions of the Missoulian or its parent company. See the and for more information. [url=http://www.thenorthface.black/]the north face[/url] Copyright 2015 The Associated Press. All rights reserved. This material may not be published, broadcast, rewritten or redistributed. k
    “I used it as a catalyst to get started in my own business and, as part of a team of eight, set up Pitbull Syndicate Limited in December 1996. [url=http://www.thenorthface.black/]the north face[/url] A 24-year-old man jumped in front of a moving train in Baiyappanahalli Railway Station after attempting to kill his wife over a domestic row on Monday. [url=http://www.burberryoutletonlines.name/]http://www.burberryoutletonlines.name[/url]
    dGhlIHJlbWFpbmluZyBwcm9ncmFtcy48L3A+PHA+VGhlIHNpdHVhdGlvbiBpcyBhZmZlY3Rpbmcg [url=http://www.thenorthface.black/]north face sale[/url] In recent years, aid agencies have made many strides in opening up channels of communication, by setting up community radio stations, Facebook pages and newspapers; providing centralised information centres or hotlines during natural disasters; and holding grassroots consultations with communities, all of which provide improved feedback loops and accountability (See IRIN s on aid agencies accountability to those in need). s [url=http://www.coachoutletonline.name/]www.coachoutletonline.name[/url]
    But where鈥檚 the trail for Tom Nutt and others to follow? Where are the artefacts and signposts marking our route into history? [url=http://www.burberryoutlet.click/]burberry scarf[/url] The current price that farmers receive for their milk is about $17 per hundred pounds, roughly 11.6 gallons, down from $25 a year ago.
    The Sarawak Report reported last week that investigators had prepared draft charge sheets against Mr Najib. [url=http://www.hollister.eu.com/]hollister outlet[/url] Ewes: Texel X to 拢53.50; Beltex to 拢38; Suff X to 拢43; Mule to 拢44.20; Leics to 拢43; Herdwick 拢15.80; Blackface to 拢26; Swale to 拢27. Rams: Texel to 拢37; Blackface to 拢30.50. y [url=http://www.burberryoutletonlines.name/]burberry outlet online[/url]
    Rob Elliot was a half-time casualty, limping off the St James鈥?Park pitch at the interval, which led to Jak Alnwick鈥檚 first competitive action for Newcastle. [url=http://www.abercrombie.eu.com/]abercrombie outlet[/url] On The Road by Jack Kerouac

+ Leave a Comment