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