El documento habla sobre la importancia de las fuentes tipográficas en el diseño web y la identidad corporativa. Explica que una fuente tipográfica está compuesta por un conjunto de glifos diseñados de forma estilística uniforme. También describe las clasificaciones de fuentes serif y sans serif, y cómo las fuentes transmiten valores a través de logotipos. Finalmente, recomienda crear cascadas de fuentes para la web que incluyan una fuente ideal, alternativas comunes y genéricas para garantizar la visualización correcta independ

1. FuentesTipográficas
Unaintroducciónsobresuusoeneldiseñowebylaidentidadcorporativa enlínea
¿Tiposdeletra?
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 entresí, quemantienen características comunes.
Tiposdeletraeidentidadcorporativa
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 enproyectosimpresos ydigitales yen medios publicitarios.
Los distintos tipos de letra sirven para dar énfasis y proyectar algunos de los valores
corporativos,tomemos como ejemplo loslogos dedosconocidos sitios web:
Wikipedia -
Technorati -

2. 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 ytiene un aire a web2.0.
Clasificaciones delostiposdeletra
Existen dos grandes grupos de familias tipográficas a los que nos limitaremos en esta
ocasión: Fuentes serif oserifas yfuentes sans serifs, sin serifas odepalo 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 seutilizan ampliamente en libros ydiarios impresos.

3. Fuentestipográficas ylaweb:
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
bastantelimitado.
Para escoger un tipo de letra adecuado para un sitio web debemos evaluar entonces
doscriterios:
 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áginasweb(laaltura
xva desdela base hasta elpuntomás alto delas 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 porel mayornúmero deusuarios.
Definiendofamilias defuentesparalaweb
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

4. 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
todaslas anteriores: serif, sans-serif, cursive, monospace ofantasy.
Expondremos fuentes tipográficas que pueden ser de utilidad para la
realización dediversos trabajos quese efectúen.
aapex
abaddon
abduction
acadian
acidbath
acidic

5. actionis
adler
adresack
advert
……………………………………………………………………………………
baboon
babyb
babylon
backfire
backtobay

6. badacid
baddog
badfilms
baileyscar
ball
………………………………………………………………………………………………………………………………….
cadeaulx
caesarregular
caffelatte
cajunqueen
caliph
calligrapher

7. camberic
candles
candycane
candysniper
………………………………………………………………………………………………………………………………
danceclub
dancestep
darkblack
darskin
datacut
davis

8. dazzle
deadgrit
deartch
deathfuturist
…………………………………………………………………………………………………………………..
echodeco
ectoblaster
edendisplay
edgewater
elecherm

9. 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.
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.
U

10. 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.

11. 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.

12. 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 esuna de las herramientasque puedenfortalecer esta temática, para quienes desean
ampliar este tema pueden aprovechar este buscador.