1. Web fonts
rendereo y suavizado

2. Esta charla surge de la
necesidad de usar webfonts
como íconos en lugar de
imágenes.

3. A
Por qué usar webfonts como
íconos:
- livianAs
- admiten efectos “En vivo” css
- reutilizables
- independientes de resolución
(listas para el mundo retina)
- ACCESIBLES

4. B
El problema es que
cuando las quiero usar
en windows…
(usando un generador
como font squirrel)

5. Así se debería ver …pero así se ve.

6. Usted pensará:
Ah, es que esto es mac …Y esto es windows.

7. D
No. Ambos son windows.
El problema tiene que ver
con la tecnología de
suavizado.

8. C
Retrocedamos:
font-smoothing
technologies.

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. I
A tamaños pequeños
de fuente, todos los
sistemas operativos
modernos usan
subpixel rendering.

19. K
La diferencia está en
lo que cada os
priorizó al
desarrollar su
tecnología.

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. M
LA principal
DIFERENCIA ENTRE
AMBOS sistemas es que
gdi cleartype (WIN)
usa hinting.

24. Q
El Hinting le “sopla”
al motor de rendereo
cómo representar la
fuente.

25. p
El problema es,
precisamente, el
hinting horizontal de
cleartype…

26. R
El cual funciona mal
con fuentes
demasiado curvas…

28. … y por ende, para
los íconos.

29. W
En vista de estos
problemas, microsoft
desarrolló una
nueva tecnología:
directwrite.

30. Z
Directwrite agrega
suavizado vertical a
cleartype, manteniendo la
legibilidad y aumentando
la suavidad.

31. Clear type
directwrite

32. 1
Tanto directwrite como el
viejo grayscale
funcionan perfecto para
iconos y fuentes curvas.
Pero…

33. c
Pero:
1) cleartype está activado por
defecto en windows vista/7.
2) directwrite sólo está
implementado por defecto en IE9.

34. e
¿Y firefox, chrome, ie8…?
Aún nos queda el viejo
grayscale.
Pero… ¿cómo activarlo?

35. h
Post-script
al rescate.

36. j
Hay dos (tres) tecnologías
para dibujar contornos
tipográficos: truetype y
post-script.

37. n
MAC renderea ambas
igual… pero windows hace
la diferencia:
truetype usa cleartype
postscript usa grayscale.

38. ¿Y cómo sé cuál es una tipografía
postscript para la web?
Formato Tecnología
TTF TrueType
EOT TrueType
WOFF TrueType o PostScript
OTF TrueType o postScript

39. Font-face generado por fontsquirrel
@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-­‐)
*/
}

40. Font-face optimizado para iconos
@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');
}
Salen ttf y woff… entra otf.

41. q
Otf = opentype font, el
estándar usado por la
mayoría de las fuentes de
sistema.
Soporta truetype y postscript.

42. q
Otf postscript hace la magia
en firefox/chrome.
y… ¿cómo sabes si la fuente
otf es postscript?

44. u
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)

45. Resumiendo:
PLATAFORMA Formato más ¿Suaviza
adecuado BIEN?
IE9 Cualquiera
"
Windows vista/7/xp OTF post-script
firefox 3.6+, chrome,

OPERA
Windows vista/7/xp TrueType
IE 6 - 8

Windows vista/7/xp TrueType
firefox 3.6-


46. ,
¿y el futuro?

47. w
Gracias.