Download - Web Fonts: Rendereo y suavizado
Web fonts rendereo y suavizado
Esta charla surge de la necesidad de usar webfonts
como íconos en lugar de imágenes.
Por qué usar webfonts como íconos:
- livianAs
- admiten efectos “En vivo” css - reutilizables
- independientes de resolución (listas para el mundo retina)
- ACCESIBLES
A
El problema es que cuando las quiero usar
en windows… (usando un generador
como font squirrel)
B
Así se debería ver …pero así se ve.
Ah, es que esto es mac …Y esto es windows.
Usted pensará:
No. Ambos son windows.
El problema tiene que ver con la tecnología de
suavizado.
D
Retrocedamos: font-smoothing
technologies.
C
Como sabemos, las tipografías son dibujos basados en vectores (ecuaciones
matemáticas).
Para que un vector sea representado en pantalla, debe
“rasterizarse”: se interpretan las fórmulas como mapas de bits.
EL suavizado de fuentes busca evitar el pixelado de las tipografías a escalas
pequeñas o con muchas curvas…
Simulando las curvas que faltan con pixeles de otros colores.
El método más usual se llama “grayscale antialias”: interpolar
pixeles con opacidad en las zonas curvas.
El problema es que a tamaños pequeños el antialias produce formas suaves,
pero poco legibles.
Alguien pensó: “en realidad, cada pixel está formado por
subpixeles r, g yb”
“Podríamos usar los subpixeles para hacer un
antialias aún más fino”
… lo cual trae 3 veces más resolución horizontal.
A tamaños pequeños de fuente, todos los sistemas operativos
modernos usan subpixel rendering.
I
La diferencia está en lo que cada os
priorizó al desarrollar su
tecnología.
K
Mac OS x (QUARTZ) se enfoca en que las tipografías se vean similares a la letra impresa.
WINDOWS (Clear type) se enfoca en que las tipografías
SEAN LEGIBLES y NÍTIDAS.
MAC OS
Mac os (QUARTZ)
WIN/CLEAR TYPE
LA principal DIFERENCIA ENTRE
AMBOS sistemas es que gdi cleartype (WIN)
usa hinting.
M
El Hinting le “sopla” al motor de rendereo cómo representar la
fuente.
Q
El problema es, precisamente, el
hinting horizontal de cleartype…
p
El cual funciona mal con fuentes
demasiado curvas…
R
… y por ende, para los íconos.
En vista de estos problemas, microsoft
desarrolló una nueva tecnología:
directwrite.
W
Directwrite agrega suavizado vertical a
cleartype, manteniendo la legibilidad y aumentando
la suavidad.
Z
Clear type
directwrite
Tanto directwrite como el viejo grayscale
funcionan perfecto para iconos y fuentes curvas.
Pero…
1
Pero: 1) cleartype está activado por defecto en windows vista/7. 2) directwrite sólo está implementado por defecto en IE9.
c
¿Y firefox, chrome, ie8…?
Aún nos queda el viejo grayscale.
Pero… ¿cómo activarlo?
e
Post-script al rescate.
h
Hay dos (tres) tecnologías para dibujar contornos tipográficos: truetype y
post-script.
j
MAC renderea ambas igual… pero windows hace
la diferencia:
truetype usa cleartype postscript usa grayscale.
n
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?
@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
@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.
Otf = opentype font, el estándar usado por la
mayoría de las fuentes de sistema.
Soporta truetype y postscript.
q
Otf postscript hace la magia en firefox/chrome.
y… ¿cómo sabes si la fuente
otf es postscript?
q
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
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:
¿y el futuro?
,
Gracias.
w