TIPOGRAFÍA EN PANTALLA Y EN LA WEB

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

Tipografías TrueType de Microsoft

En HTML los diseñadores se ven limitados a utilizar las tipografías que son estándar en los sistemas opera-

tivos de los usuarios. Aquí se muestran algunas de las más conocidas de Microsoft.

02

Tipografías estándar de MacOS

Éstas son las tipografías instaladas por defecto en los sistemas Macintosh.

03

Tipografías estándar de MacOS: Chicago

Originalmente las computadoras utilizaban solo fuentes bitmap, como la clásica Chicago. Estas fuentes

eran dibujadas disponiendo cuadrados dentro de un patrón que luego resultaba en un caracter.

04

Tipografías estándar de MacOS: Chicago

Hoy en día las computadoras generan en tiempo real los bitmaps de las fuentes de pantalla, que utiliza

este contorno o outline para determinar en qué posición ubica los cuadrados (pixels). Algunas de las curvas

suaves en letras particuales deben ser eliminadas para crear un bitmap en pantalla. Adicionalmente, es

contorno es a veces distorcionado por la grilla rígida de pixels.

05

Tipografías estándar de MacOS: Chicago

Para mostrar curvas suaves en la pantalla, cada caracter debe pasar por un proceso denominado “anti-

aliasing”. Este proceso genera una cantidad de pixels de tonos intermedios (grises) alrededor de los

contornos. Esto suaviza los los bordes y los hace más difusos. Anti-aliasing funciona muy bien para

tipografías en cuerpos grandes, pero cuando de tamaños pequeños se trata, se corre el riesgo de perder

claridad.

06

Tipografías estándar de MacOS: Chicago

La misma fuente se puede ver muy diferente dependiendo de su tamaño, la calidad del monitor y qué

método es utilizado (bitmap o anti-alias).

07

Tipografías TrueType de Microsoft

La mayoría de las tipografías en pantalla son legibles a partir de los 8 puntos.

08

Construyendo fuentes de pantalla

Las fuentes TrueType pueden ser modificadas para que sean más legibles en la pantalla. Esta modificación

se llama hinting. Aquí se muestra a Berlin Sans en bitmap de 1-bit en versión con anti-alias, antes del

proceso de hinting.

09

Construyendo fuentes de pantalla

Los problemas de las fuentes sin hinting se hacen más motorios al acercarse (zoom). La versión bitmap ha

sufrido cambios importantes en la forma de los caracteres, además el interletrado es irregular.

10

Fuentes con y sin hinting

Hintings de fuentes TrueType:

• Los contornos de los caracteres son vectoriales, de resolución independiente.

• Los archivos bitmap para visualización en pantalla son de resolución fija (pixels).

• Los hints son instrucciones que ayudan a encajar los contornos en la grilla de pixels.

• Los hints modifican los cada caracter, como así también la interletra de la fuente.

11

Hinting: contorno vectorial original

12

Hinting: caracter sin hinting

13

Hinting: bitmap con hinting

En el ejemplo de arriba, de un caracter con hinting aplicado, tanto la representación bitmap de la letra

como el contorno vectorial han sido modificados levemente para que el nivel de similitud sea óptimo.

14

Hinting: pixels modificados

Los cuadrados rojos indican los pixels que han sido agregados al bitmap original. El rojo oscuro indica los

pixels que se han eliminado para lograr una línea más suave.

15

Hinting: comparación final

16

¿Porqué el hinting?

17

Photoshop anti-aliasing

Adobe Photoshop permite 4 tipos de anti-aliasing a la hora de trabajar con tipografía. En cuerpos grandes

es recomendable utilizar smooth, pero en cuerpos pequeños muchas veces se lograr mayor claridad al

utilizar sharp o crisp. None debe utilizarse para tipografía que han sido diseñadas especificamente para la

pantalla, como las pixel-fonts.

18

Photoshop anti-aliasing: none

19

Photoshop anti-aliasing: sharp

20

Photoshop anti-aliasing: crisp

21

Photoshop anti-aliasing: strong

22

Photoshop anti-aliasing: smooth

23

Hinting + anti-aliasing

Agregando pixels grises a un caracter con hinting mejora notablemente la calidad de la fuente. Las partes

curvas de la “R” se representan con un borde difuso de grises, pero las partes rectas se mantienen limpias

y nítidas.

24

Comparación

La última versión (hinted grayscale) es la que mejor calidad por lo menos en cuerpos de 16 pt o más. La

versión con hint no está mal, pero se alcanzan a percibir pixeles serruchados en sus bordes. La versión de

Photoshop es muy difusa. Por último la versión unhinted es muy irregular en sus formas.

25

Problemas con el ancho de banda

Muchos diseñadores prefieren colocar los textos en forma de imagen, generalmente en archivos GIF. Esto

general un problema adicional: los archivos pesan más y demoran en bajar. La alternativa a esto es utilizar

el tag <font> en HTML, pero el control sobre la tipografía es mínimo. La mejor alternativa es utilizar las

Cascading Style Sheets o CSS para mayor control.

26

El tag <font> en HTML

El tag <font> del lenguaje HTML provee control sobre pocos atributos de la tipografía: fuente, tamaño,

variable y color.

27

HTML font tag y sus equivalencias de tamaño

Con el tag font todavía se pierde mucho control sobre los textos en páginas web.

La apariencia final nunca es certera y varía de usuario en usuario.

28

¿Qué resultados se pueden esperar?

En general, los diseñadores pueden basarse en que los usuarios de PC tengan configurados sus navegadores

para mostrar fuentes a algo similar a los 14 puntos.

29

¿Qué se debe evitar?

Tipografías que no han sido diseñadas para pantallas prácticamente no se pueden utilizar por debajo de los

9 puntos.

30

Utilizar

Algunas recomendaciones generales para aplicar tamaños en websites mediante el font tag de HTML.

31

Cascading Style Sheets (CSS)

Desde la versión 4.0 los navegadores incluyen soporte para las CSS. Con esta tecnología los diseñadores

tienen mucho más control sobre cualquier aspecto tipográfico y sobre la diagramación de los elementos en

la página. Se utilizan en forma similar a las hojas de estilos de los programas de auto-edición.

32

Cascading Style Sheets (CSS): propiedades

Algunas de las propiedades incorporadas en las CSS.

33

Presentación de Roger Black

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón