Developer At Work

Uno de los tipos de layouts más comunes y populares últimamente son aquellos nombrados "Elásticos". Un diseño elástico es aquel que, básicamente, se adapta al tamaño de la fuente de tu contenido. De esa manera, evitamos los problemas de los diseños cuando el texto es muy grande y se extiende más allá del diseño original:

¿Cómo podemos realizar uno así? Es realmente sencillo, según la estructura de tu layout, se debe estimar cuáles serán las etiquetas que alberguen al contenido "elástico" y referirse a éste en sus reglas respectivas en la hoja de estilo, con unidades del tipo "em". Por ejemplo, imaginemos que tenemos un sidebar al cual queremos darle propiedades elásticas.

<div id="sidebar">
MENU PRINCIPAL
</div>

div#principal {
   width: 20em;
}

Aplicando aquella regla, estaríamos indicando al navegador que el ancho de aquel contenedor dependerá de la unidad "em". ¿Y qué es la unidad "em"? Un "em" equivale al tamaño que ocupa una letra en el tipo de fuente que utilizas. De esa manera, al crecer ésta, crecerá también el espacio que utiliza, impactando finalmente en el ancho del contenedor o elemento que utilices.

Sin embargo, muchas veces trabajar con "em" tiene una pequeña complicación, ligera realmente pero que podría o no molestar al diseñador: normalmente trabajar con ems significará que los valores que utilices abandonen el plano de los números discretos para empezar a utilizar decimales.

La solución es sencilla en la mayoría de casos, y es la que titula a este post: 62.5%. La mayoría de navegadores establecen medidas predeterminadas para las fuentes que utilizan, y en muchos casos, un em equivaldrá a 16px. Si establecemos el ratio de 16px a una medida más manejable como 10px, obtenemos que éste último es el 62.5%.

Así, colocando en la etiqueta de nuestro body:

body {
  font-size: 62.5%;
}

podremos trabajar posteriormente con medidas más exactas, según la fuente predeterminada de cada navegador. Un pequeño tip, pero que tal vez le facilite la vida a alguien.