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