Guía para diseñadores gráficos

Guía para diseñadores gráficos > Presentación de los contenidos > Tipografías

Presentación de los contenidos

Tipografías

Tradicionalmente, el uso de tipografías en el diseño web ha sido un problema. Por defecto, los navegadores web solo podían presentar el texto con las tipografías que el usuario tenga instaladas en su sistema operativo (Windows, Mac, Linux,…). Actualmente esta limitación se ha solucionado, pero los efectos web que se pueden realizar a las tipografías (negrita, subrayado, alienación…) continúan siendo muy limitados.

Imágenes con texto

Una posible solución a este problema con las tipografías es utilizar imágenes, lo cual nos permitirá crear cualquier efecto que queramos a las tipografías.

 

Pero, aunque la utilización de imágenes sea muy útil y utilizada para los títulos, menús, y otras partes del web, existen diversas limitaciones que tenemos que tener en cuenta. Básicamente, nunca se recomienda utilizar imágenes para presentar textos largos, porque:

  • La página web tardaría mucho a cargarse.
  • Los buscadores no podrían indexar el texto. Si el texto a presentar es corto (por ejemplo un menú) se puede poner un texto alternativo "detrás" la imagen, sin penalizar en los buscadores.
  • El texto no se podría utilizar en bloques fluidos (Si el texto no es imagen automáticamente se adapta al espacio disponible).
  • El usuario no puede aumentar el texto y algunos pueden tener problemas de legibilidad.
  • El texto sería complicado de actualizar.

Además, si la página web es generada por un programa y se toma el texto de una base de datos, es complicado utilizar imágenes para presentar el texto.

 

Tipografías web

Con las nuevas tecnologías web, los nuevos navegadores pueden presentar cualquier fuente que queramos utilizar, como si se enviara la fuente junto al web. La ventaja, respecto la utilización de imágenes es que el texto es encontrado mejor por los buscadores, además se puede utilizar para presentar textos desde bases de datos (Por ejemplo, los titulares superiores de esta guía tienen la tipografía Ubuntu y están generados con esta solución jquery).

De todos modos, la mayoría de programadores web siguen utilizando las llamadas “tipografías seguras”, definiendo un listado de tipografías que se van a intentar utilizar en orden establecido (Si la primera fuente no está disponible en el ordenador del usuario, la segunda fuente será utilizada y así sucesivamente). Los grupos de fuentes más utilizados son los siguientes:

Verdana, Geneva, sans-serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive

Con independencia de la tipografía utilizada, deberemos definir su tamaño. Normalmente, las tipografías se trabajan en píxeles, que son equivalentes a puntos cuando la resolución de la pantalla es de 72 ppp (píxeles por pulgada). A modo de orientación, trabajar con 11 o 12 píxeles facilita la lectura de la mayoría de las tipografías, y casi nunca se trabaja con tipografías menores a 8 o 9 píxeles.
Opcionalmente, en vez de trabajar con píxeles, podemos definir el tamaño de una tipografía como un porcentaje de la tipografía "media" definida en el ordenador del usuario.

Dos artículos sobre tipografías web:
http://www.desarrolloweb.com/articulos/1710.php y
http://www.elwebmaster.com/articulos/fuentes-seguras-para-la-web-como-y-cuales-son

 

Efectos en la tipografía

Por defecto, las características o efectos que podemos escoger en cualquier texto web son:

  • Color.
  • Normal, negrita, cursiva, subrayado...
  • Alinear a derecha, izquierda, centro, justificado
  • Tamaño de fuente. Se puede definir en píxeles o en un tamaño relativo (pequeño, grande...)
  • Espaciado de palabras, espaciado de letras, espaciado entre parágrafos...
  • Sombreados o gradientes de colores (solo en algunos navegadores web)
  • Otros (a consultar con el maquetador).

A parte de las anteriores posibilidades, el texto web tiene muchas limitaciones. Por ejemplo, la mayoría de navegadores no pueden representar texto en 3D o con un ángulo de rotación (por ejemplo a 45º), sólo sería posible hacerlo con imágenes, aunque eso plantea las limitaciones ya descritas.

 

Comportamiento del texto con bloques

Otra limitación a tener en cuenta al diseñar una página web es que el texto se puede adaptar automáticamente alrededor de bloques rectangulares (por ejemplo imágenes) que estén alineados a la derecha o a la izquierda. Pero no es posible (o sería muy complicado) que el texto se adapte automáticamente alrededor de formas no rectangulares. Por ejemplo, si tenemos que presentar un texto así, el texto se debería de presentar cómo una imagen, con sus problemas asociados (descritos anteriormente). Así pues, siempre es mejor diseñar teniendo en cuenta estas limitaciones.


Este bloque web se debería generar como una imagen.


Este bloque es posible generarlo como una imagen más el texto.

Tipografías >>
JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail