Web Fonts: Rendereo y suavizado

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