20
Feb 2013

El tamaño de texto
en el diseño web

Si han experimentado con el diseño web responsivo, en algún punto deben haber notado que al desarrollar una maquetación fluida del contenido, se presenta un problema mayor que generalmente no se contempla al principio.  A pesar que nuestros elementos se encuentren ubicados donde lo planeamos, el texto, en específico sus dimensiones, nos darán una sorpresa.

unidadesrelativas

Ya sea si se trata de una página web con dimensiones fijas o una con dimensiones fluidas, el tamaño del texto será relativo a la pantalla del dispositivo. Debido a eso, si tenemos definido un tamaño de texto en pixeles, la fuente será visualizada correctamente en dispositivos donde la densidad de pixeles sea normal (pixeles perceptibles a la vista) pero en dispositivos móviles, esa misma fuente resultara diminuta y de difícil lectura para quien visite nuestro sitio.

¿Cómo podemos lidiar con este problema? Actualmente existen dos tipos de unidades para definir dimensiones en CSS. Las absolutas, como centímetros, pulgadas, milímetros o puntos,las cuales son de utilidad si se pretende que parte del contenido de nuestra página sea impreso por el usuario en determinado momento. Y unidades relativas que definen su valor con relación a otra medida, aquí encontramos  pixeles (px) de dimensiones relativas a los pixeles de la pantalla, em y ex, estos dos últimos son relativas a la tipografía.

Actualmente hay otra nueva unidad, rem, que es una variante de em. Para que nuestra fuente sea proporcional a las pantallas de los dispositivos, se recomienda utilizar la unidad em. Para hacer la conversión basta tomar como referencia que el 100% = 1 em ~= 16px ~= 14pt.

Es decir que 1 em dependiendo del dispositivo tiene una dimensión entro los 14 y 16 pixeles, generalmente recomiendan tomar el valor de 16px. Teniendo esto en cuenta, solo necesitamos obtener los equivalentes a las medidas que tenemos definidas en el diseño y hacer el cambio por los respectivos valores.

Aún con esto tenemos el problema de que las unidades em, son relativas al grupo en que se encuentren, por lo cual el tamaño varia en diferentes secciones. Ejemplificando tenemos:

body { font-size:62.5%; } /* =10px*/

h1 { font-size: 2.4em; } /* =24px */

{ font-size: 1.4em; } /* =14px */

li { font-size: 1.4em; } /* =14px(?) */

En el ejemplo anterior, se define la misma medida en em para las etiquetas p y li para el HTML, pero si una lista (li) se encuentra dentro de otra lista, o dentro de otros elementos que tengan definido otro valor en em, tomarán como referencia este para darle el valor a sus dimensiones. Por ejemplo, con los valores anteriores:

<h1>Lista de productos</h1>
<!--Tamaño de 24px -->
<ul>
<ul>
    <li>Electrodomésticos</li>
</ul>
</ul>
<!--Tamaño de 14px -->
<ul>
<ul>
<ul>
    <li>Refrigeradores</li>
</ul>
</ul>
</ul>
<!--Tamaño de 21px -->
<ul>
<ul>
<ul>
    <li>Lavadoras</li>
</ul>
</ul>
</ul>
<!--Tamaño de 21px -->
<ul>
<ul>
    <li>Limpieza</li>
</ul>
</ul>
<!--Tamaño de 14px -->
<ul>
<ul>
    <li>Abarrotes</li>
</ul>
</ul>
<!--Tamaño de 14px -->

Lo que sucede ahí, es que los elementos de la lista que están dentro de otra lista, toman como referencia el elemento al que pertenecen, y ahora la unidad em, ya no tomará en cuenta el tamaño de 10px del elemento body, sino el de 14px del elemento li anterior. Para resolver este problema tendríamos que especificar la regla para esos casos donde tengamos elementos anidados.

O podemos usar la variante rem, la cual reconoce un valor principal, una raíz. La cual será respetada dentro de toda la definición de dimensiones:

html { font-size: 62.5%; }

body { font-size: 1.4rem; } /* =14px */

h1   { font-size: 2.4rem; } /* =24px */

li { font-size: 1.4rem; } /* =14px */

Con la pequeña modificación anterior, garantizamos que se mantendrá una proporción en nuestro texto, aunque tengamos elementos anidados, la unidad rem siempre tomará como referencia el elemento con la jerarquía más alta dentro de toda nuestra estructura. Y para que esto funcione en dispositivos móviles, solo bastaría con cambiar el valor porcentual en el elemento html en las media queries que hayamos declarado.

@media (max-width:480px){

html {  font-size:95%; }

}

@media (min-width: 1024px){

html  { font-size:62.5%; }

}

Quizás lo más complicado de utilizar estas unidades es entender cómo se comportan, pero una vez que tenemos eso dominado, la aplicación es sencilla. Además, que para nuestra fortuna, la mayoría de los navegadores soportan esta unidad de medida. Si ya conocían esto, ¿lo han aplicado? ¿Qué les parece? Y si no, hagan unas pruebas y decidan si adoptan la técnica o no.

Por: Arturo Tadeo / Diseño web

Comments are closed.

DOTTO