15_tipografia_presentacion
-
Upload
ariel-karlen -
Category
Documents
-
view
212 -
download
0
description
Transcript of 15_tipografia_presentacion
![Page 1: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/1.jpg)
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
![Page 2: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/2.jpg)
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
![Page 3: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/3.jpg)
Tipografías estándar de MacOS
Éstas son las tipografías instaladas por defecto en los sistemas Macintosh.
03
![Page 4: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/4.jpg)
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
![Page 5: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/5.jpg)
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
![Page 6: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/6.jpg)
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
![Page 7: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/7.jpg)
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
![Page 8: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/8.jpg)
Tipografías TrueType de Microsoft
La mayoría de las tipografías en pantalla son legibles a partir de los 8 puntos.
08
![Page 9: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/9.jpg)
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
![Page 10: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/10.jpg)
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
![Page 11: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/11.jpg)
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
![Page 12: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/12.jpg)
Hinting: contorno vectorial original
12
![Page 13: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/13.jpg)
Hinting: caracter sin hinting
13
![Page 14: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/14.jpg)
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
![Page 15: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/15.jpg)
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
![Page 16: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/16.jpg)
Hinting: comparación final
16
![Page 17: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/17.jpg)
¿Porqué el hinting?
17
![Page 18: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/18.jpg)
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
![Page 19: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/19.jpg)
Photoshop anti-aliasing: none
19
![Page 20: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/20.jpg)
Photoshop anti-aliasing: sharp
20
![Page 21: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/21.jpg)
Photoshop anti-aliasing: crisp
21
![Page 22: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/22.jpg)
Photoshop anti-aliasing: strong
22
![Page 23: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/23.jpg)
Photoshop anti-aliasing: smooth
23
![Page 24: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/24.jpg)
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
![Page 25: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/25.jpg)
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
![Page 26: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/26.jpg)
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
![Page 27: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/27.jpg)
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
![Page 28: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/28.jpg)
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
![Page 29: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/29.jpg)
¿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
![Page 30: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/30.jpg)
¿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
![Page 31: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/31.jpg)
Utilizar
Algunas recomendaciones generales para aplicar tamaños en websites mediante el font tag de HTML.
31
![Page 32: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/32.jpg)
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
![Page 33: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/33.jpg)
Cascading Style Sheets (CSS): propiedades
Algunas de las propiedades incorporadas en las CSS.
33
![Page 34: 15_tipografia_presentacion](https://reader030.fdocuments.ec/reader030/viewer/2022020500/568c378b1a28ab02359bf682/html5/thumbnails/34.jpg)
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