Web Fonts: Rendering y suavizado en Windows

Transcript

1. Web fonts rendereo y suavizado
2. Esta charla surge de la necesidad de usar webfonts como íconos en lugar de imágenes.
3. Por qué usar webfonts como íconos: - livianAs - admiten efectos “En vivo” css - reutilizables - independientes de resolución (listas para el mundo retina) - ACCESIBLES A
4. El problema es que cuando las quiero usar en windows… (usando un generador como font squirrel) B
5. Así se debería ver …pero así se ve.
6. Ah, es que esto es mac …Y esto es windows. Usted pensará:
7. No. Ambos son windows. El problema tiene que ver con la tecnología de suavizado. D
8. Retrocedamos: font-smoothing technologies. C
9. Como sabemos, las tipografías son dibujos basados en vectores (ecuaciones matemáticas).
10. Para que un vector sea representado en pantalla, debe “rasterizarse”: se interpretan las fórmulas como mapas de bits.
11. EL suavizado de fuentes busca evitar el pixelado de las tipografías a escalas pequeñas o con muchas curvas…
12. Simulando las curvas que faltan con pixeles de otros colores.
13. El método más usual se llama “grayscale antialias”: interpolar pixeles con opacidad en las zonas curvas.
14. El problema es que a tamaños pequeños el antialias produce formas suaves, pero poco legibles.
15. Alguien pensó: “en realidad, cada pixel está formado por subpixeles r, g yb”
16. “Podríamos usar los subpixeles para hacer un antialias aún más fino”
17. … lo cual trae 3 veces más resolución horizontal.
18. A tamaños pequeños de fuente, todos los sistemas operativos modernos usan subpixel rendering. I
19. La diferencia está en lo que cada os priorizó al desarrollar su tecnología. K
20. Mac OS x (QUARTZ) se enfoca en que las tipografías se vean similares a la letra impresa.
21. WINDOWS (Clear type) se enfoca en que las tipografías SEAN LEGIBLES y NÍTIDAS.
22. MAC OS Mac os (QUARTZ) WIN/CLEAR TYPE
23. LA principal DIFERENCIA ENTRE AMBOS sistemas es que gdi cleartype (WIN) usa hinting. M
24. El Hinting le “sopla” al motor de rendereo cómo representar la fuente. Q
25. El problema es, precisamente, el hinting horizontal de cleartype… p
26. El cual funciona mal con fuentes demasiado curvas… R
28. … y por ende, para los íconos.
29. En vista de estos problemas, microsoft desarrolló una nueva tecnología: directwrite. W
30. Directwrite agrega suavizado vertical a cleartype, manteniendo la legibilidad y aumentando la suavidad. Z
31. Clear type directwrite
32. Tanto directwrite como el viejo grayscale funcionan perfecto para iconos y fuentes curvas. Pero… 1
33. Pero: 1) cleartype está activado por defecto en windows vista/7. 2) directwrite sólo está implementado por defecto en IE9. c
34. ¿Y firefox, chrome, ie8…? Aún nos queda el viejo grayscale. Pero… ¿cómo activarlo? e
35. Post-script al rescate. h
36. Hay dos (tres) tecnologías para dibujar contornos tipográficos: truetype y post-script. j
37. MAC renderea ambas igual… pero windows hace la diferencia: truetype usa cleartype postscript usa grayscale. n
38. Formato Tecnología TTF TrueType EOT TrueType WOFF TrueType o PostScript OTF TrueType o postScript ¿Y cómo sé cuál es una tipografía postscript para la web?
39. @font-­‐face  {             font-­‐family:  'WebSymbolsRegular';             src:  url('websymbols.eot');    /*IE  6-­‐8*/         src:     url('websymbols.eot?#iefix')  format('embedded-­‐ opentype'),  /*IE  6-­‐8  FIX*/                   url('websymbols.woff')  format('woff'),  /*FF-­‐Chrome,   IE9*/                     url('websymbols.ttf')  format('truetype'),  /*Old   Firefox*/                   url('websymbols.svg#WebSymbolsRegular')   format('svg');  /*  old  iOS  (4.2-­‐)  */             }   Font-face generado por fontsquirrel
40. @font-­‐face  {             font-­‐family:  'WebSymbolsRegular';             src:  url('websymbols.eot');             src:     url('websymbols.eot?#iefix')  format('embedded-­‐ opentype'),                     url('websymbols.otf')  format(‘opentype'),     url('websymbols.svg#WebSymbolsRegular')  format('svg');             }   Font-face optimizado para iconos Salen ttf y woff… entra otf.
41. Otf = opentype font, el estándar usado por la mayoría de las fuentes de sistema. Soporta truetype y postscript. q
42. Otf postscript hace la magia en firefox/chrome. y… ¿cómo sabes si la fuente otf es postscript? q
44. Si la fuente es otf truetype o ttf (que es lo mismo)… sólo te queda usar un conversor, como freefontconverter.com (Selecciona “otf” como formato de salida) u
45. PLATAFORMA Formato más adecuado ¿Suaviza BIEN? IE9 Cualquiera " Windows vista/7/xp firefox 3.6+, chrome, OPERA OTF post-script  Windows vista/7/xp IE 6 - 8 TrueType  Windows vista/7/xp firefox 3.6- TrueType  Resumiendo:
46. ¿y el futuro? ,
47. Gracias. w