Tipografía pantalla: conceptos clave rasterización fuentes diseñadas

Matías Cruz - yo@matiascruz.com.
ar
Tipografía
para pantalla
Julio 2010
Tipografía para pantalla Matías Cruz - yo@matiascruz.com.ar
Conceptos importantes
Plataforma
Una plataforma es precisamente el principio, en el cual
se constituye un hardware, sobre el cual un software
puede ejecutarse/desarrollarse. Las plataformas de tra-
bajo más comunes para los diseñadores son PC (Win-
dows) y Macintosh (Mac).
También nos podemos referir como plataformas al hablar

de equipos de telefonía móvil, consolas de video juego
y todo aquel dispositivo que permita mediante la ejecu-
ción/desarrollo de un software, interactuar con el usuario.
— Apple iMac 27”
Julio 2010
Sistema operativo
Es un conjunto de programas destinado a permitir una Un sistema operativo se puede encontrar en la mayoría
administración eficaz de los recursos. Comienza a traba- de los aparatos electrónicos que utilizamos día a día ya
jar cuando se enciende el dispositivo, y gestiona el hard- que nos permiten entender la máquina y que ésta cum-
ware desde los niveles más básicos, permitiendo tam- pla con sus funciones: computadoras, teléfonos móviles,
bién la interacción con el usuario. reproductores de DVD, consolas de video juego, etc.
Julio 2010
Pantalla
Resolución de pantalla
Es el número de píxels que puede ser mostrado en una
pantalla de un tamaño determinado. Por ejemplo, la re-
solución de pantalla óptima en un monitor de 17” es de
1024px de ancho por 768px de alto.
Pixel
Es la menor unidad homogénea en color que forma parte
de una imagen digital, ya sea esta una fotografía, un foto-
grama de video o un gráfico.
Bitamp o mapa de bits

Se refiere a la retícula donde cada pixel asume un estado
y posición específica. — Ampliando lo suficiente una imagen digital, pueden observarse los
pixeles que la componen. Estos aparecen como cuadrados o rec-
tángulos y pueden tener distintos niveles de brillo y diferentes colo-
res (blanco y negro, escala de grises, color).
— Bitmap 1-bit — Bitmap 8-bit — Bitmap 24-bit

Blanco y Negro Gray Scale Color
Julio 2010
Rasterización
Los conceptos antes mencionados intervienen en la for-
ma en que visualizamos las tipografías en la pantalla de
cualquier dispositivo electrónico. En los formatos impre-
sos las fuentes presentas sus formas definidas por medio
de líneas y curvas. Su representación es independiente de
la resolución del dispositivo de salida y por lo tanto pue-
den ser escaladas a cualquier tamaño sin pérdida de ca-
lidad. Rasterización es el proceso de convertir las líneas
y curvas en el patrón de pixeles de la pantalla. Cuando
no existen los pixeles suficientes para ello (por ejemplo
en cuerpos pequeños o en resoluciones de pantalla ba-
jas), puede haber inconsistencias en la representación de
ciertas características de las letras.
— Izq.: Gráfico vectorial y gráfico rasterizado, bitmap o mapa de bits.
Arriba: vemos como a menor resolución, mayor es la deformación

sufrida por el caracter.
Julio 2010
Mejorando la
visualización
Existen distintos procesos y tecnologías que buscan re-
ducir la deformación de los caracteres durante el proceso
de rasterización. Las diferentes plataformas y sistemas
operativos combinan estas herramientas en busca de
lograr una representación de la fuente en pantalla lo más
similar posible a su representación impresa.
Anti-aliasing
Cuando se trabaja con tipografías en pantalla, cualquier
borde que no coincida con la grilla natual del medio pro-
ducirá escalones o serruchos (aliasing). El anti-aliasing
es un proceso que promedia la densidad de los pixeles
que bordean el contorno de un caracter generando grises
intermedios que suavizan esos serruchos indeseados en
— 12pt sin — 12pt con — 48pt sin — 48pt con
pantalla. Este proceso funciona bien en cuerpos gran- anti-aliasing anti-aliasing anti-aliasing anti-aliasing
des (mayores a 14pt) y sobre todo con trazos anchos o
versiones bold. En cuerpos pequeños (menores de 12pt)
afecta gravemente la legibilidad del texto.
Julio 2010
Mejorando la
visualización
Hinting
Es un proceso indispensable para cualquier fuente que
intente funcionar en cuerpos pequeños y en dispositivos
de baja resolución. Es fundamental en los alfabetos crea-
dos para pantalla. Es información matemática codificada
— Hinting aplicado, tanto la representación bitmap de la letra como el contor-
dentro de la misma fuente que indica con exactitud qué no vectorial han sido modificados para que el nivel de similitud sea óptimo.
pixeles se deben encender o pintar y cuáles apagar o
borrar al mostrar una tipografía en pantalla a fin de lograr
una mejor representación de la misma.
Subpixel rendering
Las nuevas pantallas LCD y OLED poseen pixeles com-
puestos por múltiples sub pixeles (generalmente uno por
canal rojo, verde y azul). Esto permite explotar esta tec-
nología para rasterizar las tipografías en pantalla con ma-
yor nivel de detalle subidiviendo el pixel.
Julio 2010
Mejorando la
visualización
— Rasterización sin ningún tipo de anti-aliasing. — Rasterización con anti-aliasing y sin hinting.
— Rasterización con anti-aliasing y con hinting. — Rasterización con anti-aliasing, con hinting y con subpixel rendering.
Julio 2010
Fuentes creadas
para pantalla
Son aquellas concebidas para ser vistas en bajas resolucio-
nes. El diseñador ha considerado cada caracter individual-
mente optimizando no solo las formas sino también sus al-
turas e interletrados para que funcionen dentro de los límites
determinados por la grilla definida por la pantalla.
Características:
aa — Verdana comparada con Frutiger
posee ojos más grandes, mayor al-
tura de x y presenta caracteres más
anchos.
» Formas más abiertas

» Ojos más grandes
tipografía — Verdana vs. Futura presenta ajustes
en los interletrados para evitar prob-
tipografía
» Letras más anchas lemas de espaciados. Claramente
los caracteres de Verdana producen
» Mayor altura x palabras más largas.
» Interletra más generosa
» Encajan perfectamente en la grilla de pixeles sin dis-
torsionarse
» No poseen problemas de espaciado
» Algunos caracteres poseen elementos para diferen-
ciarlos de otros similares (“j”, “i”, “l”, “1”).
1IiJj — Los caracteres similares de Verdana
poseen elementos diferenciadores
» Las san serif son más legibles. para dotarla de mayor legibilidad.
Julio 2010
Fuentes creadas
para pantalla
Verdana:
Diseñada para Microsoft en 1994 por Matthew Carter
especialmente para ser mostrada en pantalla. Fue op-
timizada por Tom Rickner de Monotype. Las curvas y
diagonales fueron meticulosamente ajustadas para que
los píxeles sean claros, legibles y agradables a tamaños
pequeños, consiguiendo una fusión perfecta entre forma
y función. Los caracteres más confusos como la “I” ma-
yúscula, “J”, “L”, “i” o la “l” minúscula fueron individuali-
zados y los amplios espacios entre las letras consiguen
una legibilidad excepcional.
Más información en:

http://es.letrag.com/tipografia.php?id=59
Julio 2010
Fuentes creadas
para pantalla
Arial:
La tipografía Arial fue diseñada en 1990 por el equipo de
Monotype para Microsoft cuando lanzó el formato están-
dar “True Type” para acompañar al Windows 3.1. El éxito
del sistema operativo haría que la Arial sea actualmente
una de las tipografías más usadas junto con la Helvética
o la Times. Se trata de un tipo funcional, simple y muy
versátil. Una de las que posee mejor hinting ya que Mi-
crosoft hizo muchísimos esfuerzos en optimizarla.

Julio 2010
Fuentes creadas
para pantalla
Trebuchet:
Tipografía creada por Vincent Connare de Microsoft en
1996. Es una sans serif humanista, optimizada para la legi-
bilidad en pantalla. Toma su inspiración de las sans serif de
los años ‘30 que tenían una altura de x generosa y rasgos
redondeados. Uno de los logros más importantes de esta
familia es que funciona muy bien para titulares en cuerpos
grandes y en baja resolución en cuerpos chicos. El desafío
para Connare fue conservar la legibilidad y la claridad, man-
teniendo cierta personalidad en sus caracteres.

Julio 2010
Fuentes creadas
para pantalla
Tahoma:
Tipografía diseñada durante los años 1995-1997 por
Matthew Carter para Microsoft. Fue pensada para ser
usada en interfaces de usuario u otras situaciones que
requieran mostrar información en pantalla, particular-
mente en tamaños pequeños como cajas de texto o me-
nús de diálogo. Posee únicamente dos pesos, Regular y
Bold, y carece de versión itálica u oblicua. La optimiza-
ción del hinting estuvo a cargo de Tom Rickner.

Julio 2010
Fuentes creadas
para pantalla
Georgia:
Brillante diseño de Matthew Carter optimizado por Tho-
mas Rickner. La primera versión es de 1996. Se ajusta
a la grilla de pixeles y tanto la forma de cada caracter
como los distintos pesos y el interletrado están optimiza-
dos para una correcta legibilidad. Está influenciada por
las romanas modernas como puede verse en las serifas
horizontales de las “b”, “d”, “h”, “k”, y “l” minúsculas.
Posee una gran altura de x, las ascendentes se elevan
por encima de las letras de caja alta y tiene números an-
tiguos. Posee itálica verdadera.

Julio 2010
Fuentes
optimizadas
para pantalla
Existen fuentes que surgieron para ser impresas y que
luego han sido adaptadas para su representación en
pantalla. En este caso el diseñador (o quien se encarga
de realizar la optimización) busca ser lo más fiel posible
al diseño original al realizar los ajustes necesarios para
una apropiada visualización en dicho medio.
Los ejemplos más representatios de este grupo son Hel-

vética (Helvética es a Mac lo que Arial es a Windows) y
Times (Times es a Mac lo que Times New Roman es a
Windows).
Julio 2010
Fuentes creadas
para ambos
medios
Calibri:
Diseñada en 2005 por el holandés Luc(as) de Groot, fue
un encargo de Microsoft para formar parte de un nuevo
grupo de tipografías que acompañaron el lanzamiento del
sistema operativo Windows Vista. Posee itálica verdadera
y números de caja baja.

Julio 2010
Fuentes creadas
para ambos
medios
Corbel:
Creada en 1994 por el diseñador inglés Jeremy Tankard
bajo encargo de Microsoft, forma parte del paquete de ti-
pografías que acompañan al sistema operativo Windows
Vista. Si bien se diseñó pensando en que fuera de uso
exclusivo para ser mostrada en pantalla, al poseer itálica
verdadera y números de caja baja funciona muy bien en
formatos impresos también.

Julio 2010
Fuentes creadas
para ambos
medios
Lucida:
La macrofamilia Lucida, diseñada por Kris Holmes y
Charles Bigelow, fue una de las primeras familias pensa-
das tanto para su uso en pantalla como en impresoras
láser. Está compuesta por un gran número de subfamilias
distintas como la Lucida Typewriter, Lucida Sans, Lucida
Console o la Lucida Bright.

Julio 2010
Fuentes creadas
para ambos
medios
Meta:
Creada por Erik Spiekermann entre los años 1991 hasta
1998, se trata de una tipografía clave en la década de los
90. Obtuvo gran popularidad rápidamente e incluso se
refirió a ella como la Helvetica de los años 90. Diseñada
originalmente para ser empleada en tamaños pequeños,
esta intentaba satisfacer la necesidad de una tipografía
para texto que fuese duradera y adaptable tanto en su
uso en pantalla como en impresión.

Julio 2010
Fuentes creadas
para ambos
medios
Officina:
Diseñada en 1990 por Erik Spiekermann como tipogra-
fía ideal para una comunicación eficiente en los impre-
sos de oficinas y empresas, pronto se hizo muy popular
en muchas más áreas. La familia Officina cuenta con
dos subfamilias que aumentan su flexibilidad: la Officina
Sans, sin serifs y la Officina Serif con ella.

Julio 2010
Pixel Fonts
Son aquellas que han sido especialmente concebidas
para la lectura en cuerpos pequeños. Cada punto en caja
exactamente en la grilla de pixeles que compone la pan-
talla. Su morfología evita en lo posible las curvas y se — Tenacity de Joe Gillespi
compone de lineas verticales u horizontales.
La desventaja es que están fijas en un tamaño y no es po-

sible redimensionarlas. Deben ser utilizadas en el cuerpo
para el que fueron creadas, de lo contrario, dejan de en-
cajar en la grilla de pixeles y se distorsionan. Utilizándolas
— Mini 7 de Joe Gillespi
exactamente con un múltiplo de su tamaño natural, coin-
ciden nuevamente con la grilla, pero se ven pixeladas.
Este tipo de fuentes se utilizan cada vez menos ya que

al mejorar los monitores y pantallas ofreciendo mayores
resoluciones, los cuerpos chicos no son apropiados y los
caracteres se pueden mostrar con mejor nivel de detalle.
— Lo-Res Family de Zuzana Licko
Julio 2010
Fuentes
de Sistema
Son las que vienen por defecto en el sistema operativo Por eso en diseño web definimos una lista de familias ti-
de nuestro ordenador. Con el crecimiento de la populari- pográficas y no una única fuente. Para que en el caso de
dad de Windows, muchas tipografías que venían “de re- que el visitante del sitio, no tenga la primer fuente selec-
galo” se volvieron muy usadas por el público consumidor. cionada, lo visualice con la segunda de la lista, sino con
Tal es el caso de Arial, Times New Roman, Comic Sans, la tercera y así sucesivamente.
etc. Los usuarios de Mac y PC tienen diferentes fuentes
instaladas. En los últimos años este “set” de tipografías Pueden encontrar una lista completa de las tipografías
instaladas por defecto ha ido creciendo, pero las limita- de sistema de cada uno de los sistemas operativos más
ciones todavía existen. usados en el siguiente enlace:
http://www.apaddedcell.com/web-fonts
A la hora de crear un sitio web, debemos escoger tipo-
grafías de sistema para asegurarnos que todos (o la gran
mayoría de los usuarios) verá la página de la misma for-
ma en la que fue pensada.
Julio 2010
Métodos de
reemplazo
Existen algunos métodos que nos permiten incluir en el Otros métodos más recientes no mencionados en el artí-
diseño web tipografías que no son de sistema. culo anterior son:
Mientras se hace masiva la versión 3 de CSS (Hojas de Facelift - http://facelift.mawhorter.net

estilo en cascada), lenguaje que utilizamos para dar for- Alternativa que combina PHP y JavaScript para generar
mato a las páginas de un sitio web y que a partir de esta una imagen en tiempo real del texto a reemplazar.
última versión permitirá alojar las fuentes en el servidor
web dándonos la posibilidad de mostrar la fuente que de Cufón - http://cufon.shoqolate.com
nuestra elección sin preocuparnos si el vistante del sitio Alternativa que mediante JavaScript reemplaza los textos
la tenga o no instalada en su computadora, se han desa- indicados por el diseñador.
rrollado diversad técnicas para cumplir esta función de
un modo alternativo. Font-face
http://www.font-face.com
El siguiente artículo presenta una recopilación bastante http://code.google.com/webfonts
completa de los métodos más comunes, sus ventajas y Las tipografías son cargadas en el servidor y desde allí a
sus desventajas: http://www.disenorama.com/articu- la máquina del usuario al momento de cargar la página
los/reemplazo-de-textos-una-comparacion como un elemento más de la misma.
Julio 2010
Links de interés
http://en.wikipedia.org/wiki/Font_rasterization http://www.typetester.org
Explicación detallada del proceso de rasterización de la Sitio muy útil a la hora de decidir con qué tipografía y en
tipografía en pantalla (en inglés). qué tamaño vamos a trabajar un diseño cuyo destino fi-
nal será una pantalla.
http://en.wikipedia.org/wiki/Font_hinting
Explicación detallada del concepto de hinting (en inglés). http://www.slideshare.net/huer1278ft/grids-are-good-right
Presentación que muestra paso a paso cómo crear una
http://jontangerine.com/silo/typography/web-fonts grilla para diseñar un sitio web. Tips de composición.
Test que nos permite comprobar cómo nuestra combina-
ción de navegador web - sistema operativo - plataforma
muestran las diferentes tipografías. Podemos ver clara-
mente como a partir de ciertos tamaños pequeños deja
de aplicarse el anti-aliasing para no atentar contra la legi-
bilidad del texto y como hay tipografías que se ven bien
a cualquier tamaño en pantalla y como otras se ven mal
tanto en cuerpos pequeños como en cuerpos grandes.
Julio 2010

Tipografía pantalla: conceptos clave rasterización fuentes diseñadas

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tipografía pantalla: conceptos clave rasterización fuentes diseñadas

Uploaded by

Copyright:

Available Formats

Matías Cruz - yo@matiascruz.com.

También nos podemos referir como plataformas al hablar

— Apple iMac 27”

Bitamp o mapa de bits

— Bitmap 1-bit — Bitmap 8-bit — Bitmap 24-bit

— Izq.: Gráfico vectorial y gráfico rasterizado, bitmap o mapa de bits.

Arriba: vemos como a menor resolución, mayor es la deformación

» Formas más abiertas

Más información en:

Más información en:

Más información en:

Más información en:

Más información en:

Los ejemplos más representatios de este grupo son Hel-

Más información en:

Más información en:

Más información en:

Más información en:

Más información en:

La desventaja es que están fijas en un tamaño y no es po-

Este tipo de fuentes se utilizan cada vez menos ya que

Mientras se hace masiva la versión 3 de CSS (Hojas de Facelift - http://facelift.mawhorter.net

You might also like