Diseño Web y Tipografía

Hace un par de meses ingresé a un curso de Diseño Web y quisiera compartir con ustedes un poco del conocimiento que voy adquiriendo.

Por este motivo voy a inaugurar una nueva sección en este blog que se va a llamar justamente así: Diseño web.

En esta ocasión voy a hablar un poco sobre la Tipografía en el diseño.

Antes de adentrarnos en el tema, sería interesante si pensaras por un minuto los diferentes tipos de letra que se usan en la red, desde grandes encabezados hasta pequeños que se muestran en el pie o incluso en el cuerpo de diversos artículos de algunos blogs conocidos.

La tipografía es el uso de tipos de letra o fuentes en el diseño. Las tipografías o fuentes son una parte muy especial del diseño, una parte integral y esencial. Desde que se inició internet ha pasado mucho tiempo, aún así, el uso una tipografía que sea lo suficientemente llamativa y vistosa sigue siendo muy importante.

Lo que busca la tipografía es crear una mayor significación mediante la selección deliberada y reflexiva de fuentes, tamaño, color, alineación, y otros factores que afectan el diseño de la fuente en una página.

Clases de fuentes

Las fuentes o tipos de letra se clasifican en dos grandes clases: fuentes Serif y Sans Serif


Las fuentes Serif tienen serifas o adornos extra (son como unas especies de colitas o patitas al final de cada línea de la fuente)

Un ejemplo de fuente Serif es Times New Roman, que se muestra a continuación:

Las fuentes Sans Serif no tienen serifas, no tienen ningún detalle extra al final de cada letra. Un ejemplo es la fuente Impact:

Cosas a considerar sobre la tipografía web

Hay algunas diferencias entre manejar fuentes para imprimir y para la web. Cosas a tener en cuenta acerca de escribir en la web son contraste, color, legibilidad y tamaño.

Los colores en la pantalla del monitor son creados por luz, y es más importante pensar en el contraste porque fuerza mucho a la vista leer con un mal contraste o un contraste pobre.

Texto negro sobre un fondo blanco es más fácil de leer porque proporciona un mayor contraste. La teoría del color y la elección del mismo juega un papel importante en la tipografía web.

Se ha demostrado que las fuentes Sans Serif son más fáciles de leer en línea en el cuerpo del texto porque las serifas son más difíciles de seguir para el ojo, mientras que es al revés en el texto impreso.

Aunque en un incremento de tamaño y con mayor interlineado las fuentes Sans Serif pueden trabajar bien el texto del cuerpo en la web. Las Serif funcionan bien en encabezados y titulares porque le dan un toque especial al titular y porque las fuentes Sans Serif son fáciles de leer cuando se tratan de pequeñas cantidades de texto.

El tamaño es un factor importante a considerar cuando se eligen los estilos de fuente. Un texto demasiado pequeño es difícil de leer, pero un texto demasiado grande ocupa mucho espacio. Hay que encontrar un tamaño que trabaje bien con el diseño y que sea fácil de leer.

Tomando el control de las fuentes

Hay muchos ajustes que pueden controlar la forma en que la fuente aparece en una página web. El tamaño de la fuente, como ya se dijo previamente, es sin duda importante.

Las tres unidades de medida más populares son: em, porcentaje (%) y píxeles (px)

Declarar tamaños de fuente en CSS es fácil, a continuación un ejemplo de elementos párrafo al que se le asigna una unidad de 1em:

p {font-size: 1em;  }

Em es una tipo de medida tipográfica ampliamente usada para diseño web porque escala bien y pueden darse incrementos más finos de tamaño (por ejemplo, 1.35em).

Los píxeles (px) se miden en relación a la resolución y da un poquito menos de control ya que sólo podés elegir números enteros (por ejemplo 12px).

A algunas personas les gusta usar porcentajes para los tamaños de fuente porque dan al usuario un control diferente del tamaño. El tamaño es determinado por las configuraciones de tamaño de fuente de sus navegadores.

El espaciado y el interlineado también se pueden controlar con CSS. El espaciado es el espacio entre caracteres y se pueden controlar con la propiedad letter-spacing. El interlineado se puede controlar usando la propiedad CSS line-height. Las dos muy buenas formas de controlar el aspecto de tu texto.

Otras unidades de medidas posibles y menos populares son:

• Puntos (pt)
• Picas (pc)
• Pulgadas (in)
• Centímetros (cm)
• Milímetros (mm)
• Espacio X (ex)

Usar puntos (pt) es bueno para hojas de estilo impresas porque los pt son una unidad de medida de impresión. Los puntos no deben ser usados en tus páginas web porque hay una gran diferencia entre navegadores cuando se usan puntos; las computadoras Mac OS tienden a mostrar el texto 25% más pequeños que las PCs con Windows.

Las Fuentes Seguras para la Web

¿Qué es una fuente segura para la web o fuente web estándar? Esas fuentes conforman un grupo selecto de fuentes que están disponibles en la mayoría de las computadoras. Esto es lo que actualmente limita la elección de fuentes en la web bajo las especificaciones CSS2.

La elección de fuentes seguras para la web disponibles garantizan un mejor control sobre cómo tu texto se verá en todos los navegadores y sistemas operativos. Según el consenso, las fuentes más populares son:

• Arial (Su equivalente en Mac OS es Helvetica)
• Times New Roman (Su equivalente en Mac OS es Times)
• Verdana
• Georgia
• Courier

Otras fuentes populares son:

• Impact
• Lucida Console (en Mac OS su equivalente es Mónaco)
• Lucida Sans (Su equivalente en Mac OS es Lucida Grande)
• Palatino
• Tahoma (en Mac OS es Geneva)
• Comic Sans
• Trebuchet MS

Cuando uses cualquiera de estas fuentes (en especial las de la segunda lista) es buena idea incluir unas pocas opciones a las que pueda recurrir en tu CSS, tal como se explica a continuación.

Configurando tus fuentes

Hay varios métodos a elegir para mostrar fuentes en tus sitios web. Si usás una fuente web segura podés declararla mediante CSS como en el ejemplo siguiente:

font-family: Helvetica, Arial, sans-serif; 

Es importante incluir varias fuentes sólo en caso de que alguien no tenga tu primera opción. Esto da al navegador del usuario algo a que recurrir en caso de no tener esa fuente en su sistema.

Ahora bien, es posible redefinir las fuentes seguras para la web con CSS3

Las especificaciones actuales de CSS3 te permiten elegir cualquier fuente con licencia OpenType o TrueType a tu disposición. Podés hacer esto usando @font-face, como se muestra en el siguiente ejemplo:

@font-face {font-family: "MiFuente; src: url(mifuente.ttf) format("truetype");}h1 {font-family: "MiFuente", sans-serif;}

Pero no todos los navegadores aceptan CSS3 (con el ejemplo más notorio del más usado Internet Explorer)

Para aquellos que no están seguros de usar @font-face en sus diseños, hay varias herramientas para reemplazar fuentes.

Hay bastante información en la red sobre cómo usarlas, yo sólo procederé citar un par:
Cufón: Permite reemplazar fuentes con un script, el script renderiza una fuente y la convierte en una imagen que puede mostrarse en el navegador. Más información de cómo usarlo en Blogger
sIFR: Similar a Cufón pero basado en flash.

Errores en la tipografía web

La falta de coherencia a la hora de usar tipografías es una de los mayores errores que hacen los nuevos diseñadores web. Las propiedades de las fuentes se controlan mejor globalmente, y es una buena práctica asignar el font-family, el tamaño, color, altura y ancho de líneas para el elemento del cuerpo de todas tus páginas a través de CSS, como en el siguiente ejemplo:

body { font: 1em/1.3em Helvetica, Arial, sans-serif; color: #000; } 

Tenés que establecer los estilos de los títulos globalmente, así como para h1, h2, y h3. Los estilos de los enlaces también deben ser establecidos globalmente.

Elegir fuentes que son demasiado similares no es una buena opción, y se debe evitar cuidadosamente mirando el estilo de las fuentes y el diseño del sitio para elegir algo que sea apropiado. La mayoría de los encabezados Serif se emparejan bien con fuentes sans serif en el texto del cuerpo. Juntar dos fuentes Sans Serif es un poco complicado pero es una opción viable.

Por mi parte esto es todo por el momento. Trataré de ir aplicando estos conocimientos incluso en este mismo blog. :)

Hablando de tipografías, ¿sabías que podés descargar la fuente que uso para el Header del blog?

Imagen Flickr
Adaptación libre de un artículo en inglés publicado en Six Revisions