Post on 22-Mar-2016
description
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