Fuentes Tipográficas

Una introducción sobre su uso en el diseño web y la identidad corporativa en línea

¿Tipos de letra?

Un tipo de letra está conformado por un conjunto de glifos (letras, números y caracteres especiales) que han sido diseñados de tal forma que mantengan una unidad estilística.

A menudo se confunden los términos “tipo de letra” con “fuente tipográfica”, particularmente cuando se emplean en el contexto de las publicaciones en línea, aunque un tipo de letra particular puede albergar diferentes fuentes, con variaciones ligeras entre sí, que mantienen características comunes.

Tipos de letra e identidad corporativa

Uno de los elementos inherentes a la imagen visual que desee proyectar una organización está dado por los tipos de letras que ella emplea en su nombre y lema así como en proyectos impresos y digitales y en medios publicitarios.

Los distintos tipos de letra sirven para dar énfasis y proyectar algunos de los valores corporativos, tomemos como ejemplo los logos de dos conocidos sitios web:

Wikipedia -

Technorati -

Mientras que la fuente usada en el logotipo de Wikipedia (Hoefler Text) proyecta una imagen clásica, enciclopédica, la escogida por

Technorati (Neo Sans Medium) es estilizada, moderna y tiene un aire a web 2.0.

Clasificaciones de los tipos de letra

Existen dos grandes grupos de familias tipográficas a los que nos limitaremos en esta ocasión: Fuentes serif o serifas y fuentes sans serifs, sin serifas o de palo seco.

Las serifas son pequeños adornos en los extremos de los tipos. Aparte de su función decorativa, poseen una utilidad práctica: Al alargar los caracteres entre sí, ayudan a crear una continuidad visual que facilita la lectura de textos muy largos, por este motivo se utilizan ampliamente en libros y diarios impresos.

Fuentes tipográficas y la web:

Existen miles de diseños de tipos de letras. Cada una de ellos posee rasgos únicos, aunque sutiles, que lo distinguen aunque es de esperarse que muchos de ellos se parezcan entre sí. A menudo las empresas definen dentro de su Manual de Estilo determinados tipos de letras para sus proyectos de impresión que son distintos a los que emplean en sus páginas web y sus comunicaciones en línea. Acá la

cuestión tecnológica juega un papel determinante: Para que un tipo de letra se muestre correctamente en un computador, ésta debe estar instalado y funcionando correctamente.

Siendo que la Internet es un espacio virtual abierto a múltiples plataformas y sistemas operativos y que cada computador puede o no tener instalado algún tipo de letra particular, las fuentes aptas para la publicación en web se reducen a un número bastante limitado.

Para escoger un tipo de letra adecuado para un sitio web debemos evaluar entonces dos criterios:

Serif o sans serif - Es básicamente una cuestión de gustos personales. Ya mencionamos los beneficios que tienen sobre la legibilidad las fuentes con serifas. Sin embargo, otras personas son de la opinión que las fuentes sin serifas son mejores porque la altura x de los caracteres es mayor lo cual las hace más legibles en tamaños pequeños como los que se usan en las páginas web (la altura x va desde la base hasta el punto más alto de las letras minúsculas).

Seguridad para la web - Tratamos de emplear fuentes tipográficas que estadísticamente se encuentren instaladas en el mayor número de computadoras para garantizar que las páginas puedan ser visualizadas correctamente por el mayor número de usuarios.

Definiendo familias de fuentes para la web

Podemos programar nuestras páginas web para que muestren un conjunto de fuentes tipográficas de forma tal que se balancee la estética con la funcionalidad. Por ejemplo, podemos especificar como nuestra primera opción el tipo de letra que ha sido escogido para nuestros documentos impresos en el Manual de Estilos; si esta fuente no es muy común y creemos que pudiera no estar instalada en las máquinas de muchos de nuestros visitantes potenciales, podemos especificar una fuente similar que se encuentre más difundida; en tercera instancia definimos fuentes similares que, aunque no posean tanta difusión, sean comunes en diversas plataformas y sistemas operativos; en cuarto lugar podemos definir alguna fuente tipográfica que tenga mucha difusión y que se encuentre considerada universalmente apta para la web y en última instancia indicamos la familia genérica de fuentes a la que pertenecen todas las anteriores: serif, sans-serif, cursive, monospace o fantasy.

Expondremos fuentes tipográficas que pueden ser de utilidad para la realización de diversos trabajos que se efectúen.

aapex

abaddon

abduction

acadian

acidbath

acidic

actionis

adler

adresack

advert

……………………………………………………………………………………

baboon

babyb

babylon

backfire

backtobay

badacid

baddog

badfilms

baileyscar

ball

………………………………………………………………………………………………………………………………….

cadeaulx

caesarregular

caffelatte

cajunqueen

caliph

calligrapher

camberic

candles

candycane

candysniper

………………………………………………………………………………………………………………………………

danceclub

dancestep

darkblack

darskin

datacut

davis

dazzle

deadgrit

deartch

deathfuturist

…………………………………………………………………………………………………………………..

echodeco

ectoblaster

edendisplay

edgewater

elecherm

electroh

elementric

elhombre

elrio

………………………………………………………………………………………………………………………….

na traducción, a ratos literal, de un excelente post de Nathan Ford de Unit Interactive acerca de la correcta elección y creación de Cascadas de elección tipográficas o Font Stacks.U

Uno de los aspectos de diseño web que ofende a los diseñadores es la falta de tipografías que se consideran seguras para su uso. Si bien es cierto que sólo hay un puñado de fuentes web seguras, tenemos a nuestra disposición muchas que pueden llegar a ser muy poderosas. Por sobre esto, el código CSS nos ofrece algo llamado cascada de familias tipográficas (font stack).

¿Quieres utilizar Gill Sans?, úsala entonces. La cascadas de familias tipográficas son listas de prioridades tipográficas, que son definidas en el atributo “font-family” del CSS, el cual proporciona la información para que el navegador busque dentro de las opciones que les damos y que además estén instaladas en el sistema. Esto significa que puedes utilizar Gill Sans, y si los usuarios no la tienen, puedes darles la opción de un sustituto adecuado que no opacará su experiencia de uso. Como Richard Rutter ya ha ilustrado, hay toda una gama de tipografías que pueden ser utilizadas para servir las necesidades de diseño.

Lamentablemente no se está utilizando este atributo a toda su capacida, tanto en prácticas comunes de diseño web o en tecnologías asociadas al desarrollo de sitios. Hay una clara desconsideración en el proceso de creación de estas cascadas. Por ejemplo, Dreamweaver nos entrega estas opciones:

* Arial, Helvetica, sans-serif

* Courier New, Courier, monospace

* Times New Roman, Times, serif

* Georgia, Times New Roman, Times, serif

* Verdana, Arial, Helvetica, sans-serif

* Geneva, Arial, Helvetica, sans-serif

Como pueden ver no hay muchas posibilidades y las tipos sustitutas no son las más adecuadas. Este es un ejemplo de cómo la carencia de normas tipográficas en la web están dando lugar a una toma de decisiones que encaminan hacia un mal diseño. Para que vamos a especular en cuanto a quién es el culpable de que la tipografía en la web deje mucho que desear, ya que hay tantos culpables como infracciones. Diré, no obstante, que las cascadas de familias tipográficas son, en definitiva, factores de diseño y deberían ser analizadas como tal.

Todo queda en la familia:

Cuando se crea una cascada tipográfica, en primer lugar hay que considerar el contexto del texto. ¿Elegiremos una tipografía para título, sub-título, párrafos ó textos extensos? Estas posibilidades determinarán el orden que debemos seguir. Sabemos que ciertas tipos funcionan mejor para títulos y encabezados y otras para textos extensos. Por ejemplo, Helvetica trabaja bien en pantalla cuando el texto esta en tamaños grandes, mientras que Helvetica Neue, debido a que es un poco más ancha, se lee mejor en tamaños más pequeños en pantalla. Arial también se ve mejor que Helvetica en tamaños pequeños. Por lo tanto, la cascada tipográfica para Helvetica puede ser diferente dependiendo de si se utiliza para textos extensos o títulos de página.

Teniendo en cuenta el contexto, hay un par de cosas más que considerar cuando creamos la cascada. En primer lugar, seleccionar la tipo ideal. Desde ahí, el camino que debemos seguir siempre será en función del contexto:

Familia tipográfica: Ideal, alternativa, común, genérica;

1. Ideal - Su selección no tiene porque ser obligatoria a lo que se considera universalmente como “seguro para web“. Hay bastantes tipografías que tienen una alta penetración en el mercado. Simplemente no hay que escoger nada muy rebuscado o serás el único en visualizarlo correctamente.

2. Alternativas - Cuando selecciones tipografías para encabezados y título, recuerda que las familias tipográficas serán más notorias y, por lo mismo, es necesario que selecciones una alternativa que esté más cerca del espíritu que del tamaño o del valor relativo. Para encontrar a esta “alma gemela” puede que desees buscar algo cercano

en la clasificación tipográfica o buscar alguna creada por el mismo diseñador de tipos. Busca similitudes en las formas y contraformas de las letras.

3. Común - Solo necesitas algo ligeramente parecido y que no vaya a romper con tu diseño.

4. Genéricas - Esto es para los fanáticos que no creen en la instalación de fuentes.

Párrafos [inferior o igual a 12px]:

Familia tipográfica: Ideal, muy cercana, común, genérico;

1. Ideal - Incluso si tienes la intención de que los textos extensos o párrafos sean coherentes con los títulos, puede que desees considerar la legibilidad del tipo de letra según el largo de los párrafos. Por ejemplo: Helvetica Neue y Arial son más adecuadas para ser leídas en pequeños tamaños en pantalla que Helvetica.

2. Muy cercana - Encuentra algo que esté bien representada, una tipo multi-plataforma que no hunda tu diseño. Por ejemplo: Hay alrededor de 2 puntos de diferencia entre el ancho de Times New Roman y Georgia. Esto se multiplica por el número de caracteres total de sus párrafos y puede significar un desastre para tu otrora-bonita-web.

3. Común - Algo similar en sabor y presentación.

4. Genéricas - Una vez más, acabar con la clasificación genérica.

Ten en cuenta que si tu tipografía ideal está solo en Mac, puede que quieras usar una alternativa que sea más frecuente en Windows. Para obtener más información sobre la prevalencia de determinadas tipografías según el sistema operativo, échale un vistazo a:

codestyle.org/css/font-family/.

( www.microsoft.com/typography

letrag.com/blogosfera.php

knol.googlwww.cosassencillas.com/.../25-ejemplos-obras-creativas-tipografia/

e.com/k/antonio-vzquez/...y.../12

www.poynterextra.org/.../main-spanish.htm

rafaeltuduri.conectapublicidad.com/index.php

www.unostiposduros.com/

www.dacostabalboa.com/es/... tipografias /4000

Google es una de las herramientas que pueden fortalecer esta temática, para quienes desean ampliar este tema pueden aprovechar este buscador.