Matías Cruz - Tipografía para pantalla

Transcripción

1 Tipografía para pantalla

2 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

3 Conceptos importantes Sistema operativo Es un conjunto de programas destinado a permitir una administración eficaz de los recursos. Comienza a trabajar cuando se enciende el dispositivo, y gestiona el hardware desde los niveles más básicos, permitiendo tambié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 cumpla con sus funciones: computadoras, teléfonos móviles, reproductores de DVD, consolas de video juego, etc.

4 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. Por ejemplo, la resolució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 fotograma 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 rectángulos y pueden tener distintos niveles de brillo y diferentes colores (blanco y negro, escala de grises, color). Bitmap 1-bit Blanco y Negro Bitmap 8-bit Gray Scale Bitmap 24-bit Color

5 Rasterización Los conceptos antes mencionados intervienen en la forma en que visualizamos las tipografías en la pantalla de cualquier dispositivo electrónico. En los formatos impresos 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 pueden ser escaladas a cualquier tamaño sin pérdida de calidad. 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 bajas), 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.

6 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. 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 producirá 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 grandes (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

7 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 creados 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. Hinting aplicado, tanto la representación bitmap de la letra como el contorno vectorial han sido modificados para que el nivel de similitud sea óptimo. Subpixel rendering Las nuevas pantallas LCD y OLED poseen pixeles compuestos por múltiples sub pixeles (generalmente uno por canal rojo, verde y azul). Esto permite explotar esta tecnología para rasterizar las tipografías en pantalla con mayor nivel de detalle subidiviendo el pixel.

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

9 Fuentes creadas para pantalla Son aquellas concebidas para ser vistas en bajas resoluciones. 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. a a Verdana comparada con Frutiger posee ojos más grandes, mayor altura de x y presenta caracteres más anchos. 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, i, l, 1 ). Las san serif son más legibles.» tipografía tipografía 1 I i J j Verdana vs. Futura presenta ajustes en los interletrados para evitar problemas 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.

10 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. 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 mayúscula, J, L, i o la l minúscula fueron individualizados y los amplios espacios entre las letras consiguen una legibilidad excepcional. Más información en:

11 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.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 Microsoft hizo muchísimos esfuerzos en optimizarla. Más información en:

12 Fuentes creadas para pantalla Trebuchet: Tipografía creada por Vincent Connare de Microsoft en Es una sans serif humanista, optimizada para la legibilidad 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, manteniendo cierta personalidad en sus caracteres. Más información en:

13 Fuentes creadas para pantalla Tahoma: Tipografía diseñada durante los años por Matthew Carter para Microsoft. 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. Posee únicamente dos pesos, Regular y Bold, y carece de versión itálica u oblicua. La optimización del hinting estuvo a cargo de Tom Rickner. Más información en:

14 Fuentes creadas para pantalla Georgia: Brillante diseño de Matthew Carter optimizado por Thomas Rickner. La primera versión es de 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. 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 antiguos. Posee itálica verdadera. Más información en:

15 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 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).

16 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. Más información en:

17 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 tipografí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. Más información en:

18 Fuentes creadas para ambos medios Lucida: La macrofamilia Lucida, 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. Está compuesta por un gran número de subfamilias distintas como la Lucida Typewriter, Lucida Sans, Lucida Console o la Lucida Bright. Más información en:

19 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. Más información en:

20 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, 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. Más información en:

21 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 pantalla. 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 posible redimensionarlas. Deben ser utilizadas en el cuerpo para el que fueron creadas, de lo contrario, dejan de encajar en la grilla de pixeles y se distorsionan. Utilizándolas exactamente con un múltiplo de su tamaño natural, coinciden 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 Mini 7 de Joe Gillespi Lo-Res Family de Zuzana Licko

22 Fuentes de Sistema Son las que vienen por defecto en el sistema operativo de nuestro ordenador. Con el crecimiento de la popularidad de Windows, muchas tipografías que venían de regalo 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 limitaciones todavía existen. 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. Por eso en diseño web definimos una lista de familias tipográficas y no una única fuente. Para que en el caso de que el visitante del sitio, no tenga la primer fuente seleccionada, 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:

23 Métodos de reemplazo Existen 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 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, se han desarrollado 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: Otros métodos más recientes no mencionados en el artículo anterior son: Facelift - Alternativa que combina PHP y JavaScript para generar una imagen en tiempo real del texto a reemplazar. Cufón - Alternativa que mediante JavaScript reemplaza los textos indicados por el diseñador. Font-face 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.

24 Links de interés Explicación detallada del proceso de rasterización de la tipografía en pantalla (en inglés). Explicación detallada del concepto de hinting (en inglés). Test que nos permite comprobar cómo nuestra combinación de navegador web - sistema operativo - plataforma muestran las diferentes tipografías. 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. 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. Presentación que muestra paso a paso cómo crear una grilla para diseñar un sitio web. Tips de composición.