comparte el articulo 

Manejo del tamaño de fuente en un diseño adaptable

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: Exponemos los tipos de unidades a manejar para establecer el tamaño de la fuente en un diseño adaptable

Si has trabajado últimamente en algún proyecto de desarrollo web, podrás haber notado que los clientes se encuentran muy preocupados por lograr un diseño totalmente adaptable a los distintos medios que el usuario utiliza para acceder a su sitio. El llamado responsive design, es una tendencia que ha venido a marcar un número pautas relacionadas directamente con la elaboración y estructuración de los sitios web.

Lo que se busca lograr con esta clase de diseño, es un sitio que se ajuste adecuadamente al espacio físico y visual del dispositivo. Para lograr este objetivo, el diseñador tiende a buscar métodos que permitan preveer las diferencias de tamaño y adaptar los elementos para lograr su correcta visualización.

Entre los aspectos importantes que se deben considerar para lograr un diseño adaptable, encontramos al tamaño de fuente. Debemos recordar, que el texto que desplegamos en nuestro sitio, es el elemento que toma el papel principal en lo que a contenido se refiere. En un espacio pequeño, lo único que podrá ser mostrado al usuario, es el texto, por lo tanto debe lucir correctamente para que sea comprendido adecuadamente.

Idear diseños no dependientes del texto

Lo ideal para lograr un proceso totalmente adaptable, sería diseñar una estructura capaz de superar el cambio de tamaño y que le resulte invariable la alteración del texto. En la práctica, una fuente nunca puede tener un tamaño fijo, existirán siempre formas y opciones de poder cambiar esto, es por ello que una estructura adaptable e independiente de este factor, permitirá garantizar un despliegue correcto de la información.

Si el diseño de tu estructura, demanda un manejo de distintos tamaños de letras y composiciones, entonces es necesario que tengas en mente que representa cada una de las medidas que tienes a tu disposición, para ser utilizadas como valores de este atributo.

Píxeles (px)

Los píxeles es lo más cercano que encontraremos a un tamaño fijo, usualmente se considera que un píxel equivale a un punto de la pantalla del dispositivo utilizado para navegar, pero en realidad es una medida relativa a la resolución que tengamos en nuestro dispositivo. Debido a esta relación directa entre la resolución y la unidad, se considera a los píxeles la medida más exacta para establecer una valor de tamaño de fuente.

Esta característica de “precisión”, hace que la medida tenga ventajas y desventajas. La principal ventaja que esto trae, es que el diseñador puede ser más exacto que con otras unidades; sin embargo, esto hace que el tamaño no aumente o disminuya en base a alguna variación en el tamaño del espacio visual, lo que provoca que el texto se vea muy pequeño en monitores con resolución muy alta, o muy grande en pantallas pequeñas.

Points (pt)

Los puntos o points, son otra unidad de medida para establecer el tamaño de una fuente. Estos generalmente se utilizan para las impresiones, y basan su tamaño en las pulgadas. Cada pulgada equivale a 72 puntos.

Cuando se utiliza esta medida en CSS, varia mucho su presentación, ya que depende del navegador y de la pantalla donde se este observando. Los puntos son buenos al momento de crear plantillas de impresión con CSS, pero fuera de eso pueden causar más dolores de cabeza que soluciones. Es por esta razón, que estas unidades no son nada recomendadas para llevar a cabo un diseño adaptable.

Dentro de esta misma categoría también encontramos otras unidades como “cm” (centímetros), “mm” (milímetros), “in” (pulgadas) y “pc” (picas).

Ems (em)

Una medidad más adecuada para la funcionalidad que estamos buscando, son los ems. Los ems son una medida escalable, esto hace que sean ideales para lograr un diseño adaptable.

Un em es relativo al tamaño de la fuente que establecimos en el elemento contenedor o padre del texto. En caso de no haber establecido ningún tamaño, entonces el em toma el valor estándar de 16 píxeles, medida que es usualmente por los navegadores para establecer el tamaño por defecto de las letras.

La desventaja de utilizar ems en nuestro diseño, es que su aplicación respeta el orden jerárquico, por lo que si hemos definido un tamaño de letra de 16 píxeles en el body y después definimos un tamaño de 2em en un contenedor y dentro de este agregamos otro div con tamaño de letra de 1em, este 1em será relativo al 2em del padre y no a los 16px del body, por lo que obtendremos un tamaño de letra bastante pequeño y difícil de calcular.

Porcentajes (%)

Los porcentajes son muy similares a los ems, sirven para asignar valores escalables y también asignan el valor en forma de cascada, por lo que su valor es relativo al valor del padre más cercano.

Si utilizamos un valor de 100% estamos indicando que queremos el tamaño de fuente estándar. Si tienes tus valores en ems y los deseas pasar a porcentajes, entonces ten en consideración que 1em es equivalente a 100%, por lo que si tienes un tamaño de 1.5em el valor en porcentaje sería 150% y así sucesivamente.

Conclusión

Como pudimos observar existen muchos tipos de unidades para asignar un valor a la fuente de nuestro sitio. En este artículo pudimos analizar cuatro tipos, de los cuales, a excepción de los puntos, todos son buenas opciones para llevar a cabo un desarrollo web. Ems y porcentajes son especialmente buenas opciones si lo que deseas es desarrollar para dispositivos móviles y al tratar de elaborar un diseño adaptable.

Publicado el 17/01/2013, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras