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 trabajo más comunes para los diseñadores son PC (Windows) 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 ejecución/desarrollo de un software, interactuar con el usuario.

— Apple iMac 27”

Julio 2010

y gestiona el hardware desde los niveles más básicos. consolas de video juego. teléfonos móviles.ar Conceptos importantes Sistema operativo Es un conjunto de programas destinado a permitir una administración eficaz de los recursos. reproductores de DVD. etc. Julio 2010 .Tipografía para pantalla Matías Cruz . Comienza a trabajar cuando se enciende el dispositivo. Un sistema operativo se puede encontrar en la mayoría de los aparatos electrónicos que utilizamos día a día ya que nos permiten entender la máquina y que ésta cumpla con sus funciones: computadoras.com. permitiendo también la interacción con el usuario.yo@matiascruz.

un fotograma de video o un gráfico.ar Conceptos importantes Pantalla Resolución de pantalla Es el número de píxels que puede ser mostrado en una pantalla de un tamaño determinado.com. — Ampliando lo suficiente una imagen digital. escala de grises. — Bitmap 1-bit Blanco y Negro — Bitmap 8-bit Gray Scale — Bitmap 24-bit Color Julio 2010 . Pixel Es la menor unidad homogénea en color que forma parte de una imagen digital. la resolución de pantalla óptima en un monitor de 17” es de 1024px de ancho por 768px de alto. Estos aparecen como cuadrados o rectángulos y pueden tener distintos niveles de brillo y diferentes colores (blanco y negro. Por ejemplo. pueden observarse los pixeles que la componen.yo@matiascruz. ya sea esta una fotografía. color).Tipografía para pantalla Matías Cruz . Bitamp o mapa de bits Se refiere a la retícula donde cada pixel asume un estado y posición específica.

Tipografía para pantalla Matías Cruz . mayor es la deformación sufrida por el caracter.: Gráfico vectorial y gráfico rasterizado. Julio 2010 . Rasterización es el proceso de convertir las líneas y curvas en el patrón de pixeles de la pantalla.yo@matiascruz. Su representación es independiente de la resolución del dispositivo de salida y por lo tanto pueden ser escaladas a cualquier tamaño sin pérdida de calidad.com. — Izq.ar Rasterización Los conceptos antes mencionados intervienen en la forma en que visualizamos las tipografías en la pantalla de cualquier dispositivo electrónico. Arriba: vemos como a menor resolución. bitmap o mapa de bits. puede haber inconsistencias en la representación de ciertas características de las letras. En los formatos impresos las fuentes presentas sus formas definidas por medio de líneas y curvas. Cuando no existen los pixeles suficientes para ello (por ejemplo en cuerpos pequeños o en resoluciones de pantalla bajas).

En cuerpos pequeños (menores de 12pt) afecta gravemente la legibilidad del texto. Anti-aliasing Cuando se trabaja con tipografías en pantalla. 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.com.yo@matiascruz. cualquier borde que no coincida con la grilla natual del medio producirá escalones o serruchos (aliasing). — 12pt sin anti-aliasing — 12pt con anti-aliasing — 48pt sin anti-aliasing — 48pt con anti-aliasing Julio 2010 . 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 pantalla. Este proceso funciona bien en cuerpos grandes (mayores a 14pt) y sobre todo con trazos anchos o versiones bold.Tipografía para pantalla Matías Cruz .ar Mejorando la visualización Existen distintos procesos y tecnologías que buscan reducir la deformación de los caracteres durante el proceso de rasterización.

— Hinting aplicado. Julio 2010 . Es información matemática codificada dentro de la misma fuente que indica con exactitud qué 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 compuestos por múltiples sub pixeles (generalmente uno por canal rojo. verde y azul).Tipografía para pantalla Matías Cruz . Esto permite explotar esta tecnología para rasterizar las tipografías en pantalla con mayor nivel de detalle subidiviendo el pixel. Es fundamental en los alfabetos creados para pantalla.yo@matiascruz.com. tanto la representación bitmap de la letra como el contorno vectorial han sido modificados para que el nivel de similitud sea óptimo.ar 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.

con hinting y con subpixel rendering. — Rasterización con anti-aliasing y con hinting.com. — Rasterización con anti-aliasing y sin hinting.yo@matiascruz.ar Mejorando la visualización — Rasterización sin ningún tipo de anti-aliasing. — Rasterización con anti-aliasing. Julio 2010 .Tipografía para pantalla Matías Cruz .

“1”). aa tipografía tipografía — Verdana comparada con Frutiger posee ojos más grandes. » Las san serif son más legibles.ar Fuentes creadas para pantalla Son aquellas concebidas para ser vistas en bajas resoluciones.com.Tipografía para pantalla Matías Cruz .yo@matiascruz. Características: » Formas más abiertas » Ojos más grandes » Letras más anchas » Mayor altura x » Interletra más generosa » Encajan perfectamente en la grilla de pixeles sin distorsionarse » No poseen problemas de espaciado » Algunos caracteres poseen elementos para diferenciarlos de otros similares (“j”. Claramente los caracteres de Verdana producen palabras más largas. Julio 2010 . Futura presenta ajustes en los interletrados para evitar problemas de espaciados. El diseñador ha considerado cada caracter individualmente optimizando no solo las formas sino también sus alturas e interletrados para que funcionen dentro de los límites determinados por la grilla definida por la pantalla. mayor altura de x y presenta caracteres más anchos. “l”. — Verdana vs. 1IiJj — Los caracteres similares de Verdana poseen elementos diferenciadores para dotarla de mayor legibilidad. “i”.

php?id=59 Julio 2010 .com. legibles y agradables a tamaños pequeños. Las curvas y diagonales fueron meticulosamente ajustadas para que los píxeles sean claros. Los caracteres más confusos como la “I” mayúscula.letrag.Tipografía para pantalla Matías Cruz .yo@matiascruz.com/tipografia. “L”. “J”. consiguiendo una fusión perfecta entre forma y función. Más información en: http://es. “i” o la “l” minúscula fueron individualizados y los amplios espacios entre las letras consiguen una legibilidad excepcional.ar Fuentes creadas para pantalla Verdana: Diseñada para Microsoft en 1994 por Matthew Carter especialmente para ser mostrada en pantalla. Fue optimizada por Tom Rickner de Monotype.

Tipografía para pantalla Matías Cruz .com/tipografia.php?id=1 Julio 2010 .yo@matiascruz. 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. Una de las que posee mejor hinting ya que Microsoft hizo muchísimos esfuerzos en optimizarla. Se trata de un tipo funcional.1.com. simple y muy versátil.letrag.ar 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ándar “True Type” para acompañar al Windows 3. Más información en: http://es.

com.php?id=64 Julio 2010 . Más información en: http://es. manteniendo cierta personalidad en sus caracteres. Toma su inspiración de las sans serif de los años ‘30 que tenían una altura de x generosa y rasgos redondeados. optimizada para la legibilidad en pantalla. 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.letrag. Es una sans serif humanista.ar Fuentes creadas para pantalla Trebuchet: Tipografía creada por Vincent Connare de Microsoft en 1996.com/tipografia. El desafío para Connare fue conservar la legibilidad y la claridad.yo@matiascruz.Tipografía para pantalla Matías Cruz .

Regular y Bold.com. Fue pensada para ser usada en interfaces de usuario u otras situaciones que requieran mostrar información en pantalla. particularmente en tamaños pequeños como cajas de texto o menús de diálogo.yo@matiascruz.php?id=60 Julio 2010 .com/tipografia.ar Fuentes creadas para pantalla Tahoma: Tipografía diseñada durante los años 1995-1997 por Matthew Carter para Microsoft. La optimización del hinting estuvo a cargo de Tom Rickner. Más información en: http://es. y carece de versión itálica u oblicua. Posee únicamente dos pesos.Tipografía para pantalla Matías Cruz .letrag.

php?id=61 Julio 2010 . y “l” minúsculas. Está influenciada por las romanas modernas como puede verse en las serifas horizontales de las “b”.ar Fuentes creadas para pantalla Georgia: Brillante diseño de Matthew Carter optimizado por Thomas Rickner.letrag. Posee una gran altura de x. Posee itálica verdadera. Se ajusta a la grilla de pixeles y tanto la forma de cada caracter como los distintos pesos y el interletrado están optimizados para una correcta legibilidad.yo@matiascruz.com/tipografia. La primera versión es de 1996. las ascendentes se elevan por encima de las letras de caja alta y tiene números antiguos. “d”. “k”. Más información en: http://es. “h”.Tipografía para pantalla Matías Cruz .com.

com. 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 Helvé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).ar Fuentes optimizadas para pantalla Existen fuentes que surgieron para ser impresas y que luego han sido adaptadas para su representación en pantalla.Tipografía para pantalla Matías Cruz .yo@matiascruz. Julio 2010 .

Tipografía para pantalla Matías Cruz .com/tipografia.ar Fuentes creadas para ambos medios Calibri: Diseñada en 2005 por el holandés Luc(as) de Groot.com. Posee itálica verdadera y números de caja baja.letrag. 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.yo@matiascruz.php?id=220 Julio 2010 . Más información en: http://es.

Si bien se diseñó pensando en que fuera de uso exclusivo para ser mostrada en pantalla.com/tipografia.letrag.ar Fuentes creadas para ambos medios Corbel: Creada en 1994 por el diseñador inglés Jeremy Tankard bajo encargo de Microsoft.yo@matiascruz.php?id=221 Julio 2010 .com.Tipografía para pantalla Matías Cruz . al poseer itálica verdadera y números de caja baja funciona muy bien en formatos impresos también. forma parte del paquete de tipografías que acompañan al sistema operativo Windows Vista. Más información en: http://es.

yo@matiascruz. Más información en: http://es.ar Fuentes creadas para ambos medios Lucida: La macrofamilia Lucida. Lucida Console o la Lucida Bright.letrag.php?id=204 Julio 2010 . Lucida Sans.com/tipografia. Está compuesta por un gran número de subfamilias distintas como la Lucida Typewriter. diseñada por Kris Holmes y Charles Bigelow. fue una de las primeras familias pensadas tanto para su uso en pantalla como en impresoras láser.Tipografía para pantalla Matías Cruz .com.

Más información en: http://es. se trata de una tipografía clave en la década de los 90. Diseñada originalmente para ser empleada en tamaños pequeños.php?id=100 Julio 2010 .letrag.Tipografía para pantalla Matías Cruz .yo@matiascruz.com.com/tipografia. 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. Obtuvo gran popularidad rápidamente e incluso se refirió a ella como la Helvetica de los años 90.ar Fuentes creadas para ambos medios Meta: Creada por Erik Spiekermann entre los años 1991 hasta 1998.

Tipografía para pantalla Matías Cruz .com/tipografia.yo@matiascruz. Más información en: http://es. La familia Officina cuenta con dos subfamilias que aumentan su flexibilidad: la Officina Sans.com.ar Fuentes creadas para ambos medios Officina: Diseñada en 1990 por Erik Spiekermann como tipografía ideal para una comunicación eficiente en los impresos de oficinas y empresas.php?id=190 Julio 2010 .letrag. sin serifs y la Officina Serif con ella. pronto se hizo muy popular en muchas más áreas.

Tipografía para pantalla Matías Cruz . Cada punto en caja exactamente en la grilla de pixeles que compone la pantalla.yo@matiascruz. Este tipo de fuentes se utilizan cada vez menos ya que al mejorar los monitores y pantallas ofreciendo mayores resoluciones. Utilizándolas exactamente con un múltiplo de su tamaño natural. dejan de encajar en la grilla de pixeles y se distorsionan. La desventaja es que están fijas en un tamaño y no es posible redimensionarlas. pero se ven pixeladas.ar Pixel Fonts Son aquellas que han sido especialmente concebidas para la lectura en cuerpos pequeños. de lo contrario. los cuerpos chicos no son apropiados y los caracteres se pueden mostrar con mejor nivel de detalle.com. — Tenacity de Joe Gillespi — Mini 7 de Joe Gillespi — Lo-Res Family de Zuzana Licko Julio 2010 . Su morfología evita en lo posible las curvas y se compone de lineas verticales u horizontales. Deben ser utilizadas en el cuerpo para el que fueron creadas. coinciden nuevamente con la grilla.

Con el crecimiento de la popularidad de Windows. lo visualice con la segunda de la lista. muchas tipografías que venían “de regalo” se volvieron muy usadas por el público consumidor. Times New Roman. no tenga la primer fuente seleccionada.com. Para que en el caso de que el visitante del sitio.com/web-fonts Julio 2010 .ar Fuentes de Sistema Son las que vienen por defecto en el sistema operativo de nuestro ordenador. A la hora de crear un sitio web. debemos escoger tipografías de sistema para asegurarnos que todos (o la gran mayoría de los usuarios) verá la página de la misma forma en la que fue pensada. sino con la tercera y así sucesivamente. En los últimos años este “set” de tipografías instaladas por defecto ha ido creciendo.apaddedcell. Por eso en diseño web definimos una lista de familias tipográficas y no una única fuente. Tal es el caso de Arial. pero las limitaciones todavía existen. Los usuarios de Mac y PC tienen diferentes fuentes instaladas.yo@matiascruz.Tipografía para pantalla Matías Cruz . Comic Sans. Pueden encontrar una lista completa de las tipografías de sistema de cada uno de los sistemas operativos más usados en el siguiente enlace: http://www. etc.

com Alternativa que mediante JavaScript reemplaza los textos indicados por el diseñador.yo@matiascruz. sus ventajas y sus desventajas: http://www.shoqolate. Mientras se hace masiva la versión 3 de CSS (Hojas de estilo en cascada).http://cufon.com/webfonts Las tipografías son cargadas en el servidor y desde allí a la máquina del usuario al momento de cargar la página como un elemento más de la misma.ar Métodos de reemplazo Existen algunos métodos que nos permiten incluir en el diseño web tipografías que no son de sistema. se han desarrollado diversad técnicas para cumplir esta función de un modo alternativo.Tipografía para pantalla Matías Cruz . Font-face http://www. lenguaje que utilizamos para dar formato a las páginas de un sitio web y que a partir de esta última versión permitirá alojar las fuentes en el servidor web dándonos la posibilidad de mostrar la fuente que de nuestra elección sin preocuparnos si el vistante del sitio la tenga o no instalada en su computadora.http://facelift.com/articulos/reemplazo-de-textos-una-comparacion Otros métodos más recientes no mencionados en el artículo anterior son: Facelift .disenorama.com.com http://code. Cufón .net Alternativa que combina PHP y JavaScript para generar una imagen en tiempo real del texto a reemplazar.google.mawhorter.font-face. El siguiente artículo presenta una recopilación bastante completa de los métodos más comunes. Julio 2010 .

slideshare. http://www.Tipografía para pantalla Matías Cruz .plataforma muestran las diferentes tipografías.ar Links de interés http://en.org/wiki/Font_rasterization Explicación detallada del proceso de rasterización de la tipografía en pantalla (en inglés). http://jontangerine.wikipedia.wikipedia. Tips de composición.org Sitio muy útil a la hora de decidir con qué tipografía y en qué tamaño vamos a trabajar un diseño cuyo destino final será una pantalla.typetester. Podemos ver claramente como a partir de ciertos tamaños pequeños deja de aplicarse el anti-aliasing para no atentar contra la legibilidad 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.net/huer1278ft/grids-are-good-right Presentación que muestra paso a paso cómo crear una grilla para diseñar un sitio web. http://www.yo@matiascruz. http://en. Julio 2010 .com.sistema operativo .com/silo/typography/web-fonts Test que nos permite comprobar cómo nuestra combinación de navegador web .org/wiki/Font_hinting Explicación detallada del concepto de hinting (en inglés).

Sign up to vote on this title
UsefulNot useful