Tipografía para pantalla - · PDF fileJulio 2010 Tipografía para pantalla...

Julio 2010

Matías Cruz - [email protected]

Tipografía para pantalla

Julio 2010

Matías Cruz - [email protected]ía para pantalla

Conceptos importantes

PlataformaUna 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


Es un conjunto de programas destinado a permitir una administración eficaz de los recursos. Comienza a traba-jar cuando se enciende el dispositivo, y gestiona el hard-ware desde los niveles más básicos, permitiendo tam-bién la interacción con el usuario.

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 cum-pla con sus funciones: computadoras, teléfonos móviles, reproductores de DVD, consolas de video juego, etc.


Sistema operativo

Julio 2010



PantallaResolució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 Blanco y Negro

— Bitmap 8-bit Gray Scale

— Bitmap 24-bit Color

Julio 2010


RasterizaciónLos 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ónExisten 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 pantalla. Este proceso funciona bien en cuerpos gran-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.

— 12pt sin anti-aliasing

— 12pt con anti-aliasing

— 48pt sin anti-aliasing

— 48pt con anti-aliasing

Julio 2010


Mejorando la visualizaciónHinting 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 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 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.

— Hinting aplicado, tanto la representación bitmap de la letra como el contor-no vectorial han sido modificados para que el nivel de similitud sea óptimo.


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 pantallaSon 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: 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 dis-torsionarse No poseen problemas de espaciado Algunos caracteres poseen elementos para diferen-ciarlos de otros similares (“j”, “i”, “l”, “1”). Las san serif son más legibles.

» » » » » » »» »

aatipografíatipografía

1 I i J j

— Verdana comparada con Frutiger posee ojos más grandes, mayor al-tura de x y presenta caracteres más anchos.

— Verdana vs. Futura presenta ajustes en los interletrados para evitar prob-lemas de espaciados. Claramente los caracteres de Verdana producen palabras más largas.

— Los caracteres similares de Verdana poseen elementos diferenciadores 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 pantallaExisten 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 FontsSon 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 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 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.

— Tenacity de Joe Gillespi

— Lo-Res Family de Zuzana Licko

— Mini 7 de Joe Gillespi

Julio 2010


Fuentes de SistemaSon las que vienen por defecto en el sistema operativo de nuestro ordenador. Con el crecimiento de la populari-dad de Windows, muchas tipografías que venían “de re-galo” se volvieron muy usadas por el público consumidor. Tal es el caso de Arial, Times New Roman, Comic Sans, etc. Los usuarios de Mac y PC tienen diferentes fuentes instaladas. En los últimos años este “set” de tipografías instaladas por defecto ha ido creciendo, pero las limita-ciones todavía existen.

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.

Por eso en diseño web definimos una lista de familias ti-pográficas y no una única fuente. Para que en el caso de que el visitante del sitio, no tenga la primer fuente selec-cionada, lo visualice con la segunda de la lista, sino con la tercera y así sucesivamente.

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.apaddedcell.com/web-fonts

Julio 2010


Métodos de reemplazoExisten algunos métodos que nos permiten incluir en el diseño web tipografías que no son de sistema.

Mientras se hace masiva la versión 3 de CSS (Hojas de estilo en cascada), lenguaje que utilizamos para dar for-mato 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, se han desa-rrollado diversad técnicas para cumplir esta función de un modo alternativo.

El siguiente artículo presenta una recopilación bastante completa de los métodos más comunes, sus ventajas y sus desventajas: http://www.disenorama.com/articu-los/reemplazo-de-textos-una-comparacion

Otros métodos más recientes no mencionados en el artí-culo anterior son:

Facelift - http://facelift.mawhorter.net Alternativa que combina PHP y JavaScript para generar una imagen en tiempo real del texto a reemplazar.

Cufón - http://cufon.shoqolate.com Alternativa que mediante JavaScript reemplaza los textos indicados por el diseñador.

Font-face http://www.font-face.com http://code.google.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.

Julio 2010


Links de interéshttp://en.wikipedia.org/wiki/Font_rasterization Explicación detallada del proceso de rasterización de la tipografía en pantalla (en inglés).

http://en.wikipedia.org/wiki/Font_hinting Explicación detallada del concepto de hinting (en inglés).

http://jontangerine.com/silo/typography/web-fonts 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.

http://www.typetester.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 fi-nal será una pantalla.

http://www.slideshare.net/huer1278ft/grids-are-good-right Presentación que muestra paso a paso cómo crear una grilla para diseñar un sitio web. Tips de composición.

Tipografía para pantalla - · PDF fileJulio 2010 Tipografía para pantalla...

Documents

Transcript of Tipografía para pantalla - · PDF fileJulio 2010 Tipografía para pantalla...