Fuentes en web

Sunday, 27 April 2008

He decidido comprobar manualmente cómo renderizan las fuentes los navegadores en los distintos sistemas operativos:

  • Windows: Firefox, IE 6, IE 7.
  • Mac: Firefox, Safari.
  • Linux (Ubuntu): Firefox.

Las fuentes testeadas son las las típicas browser-safe fonts: times/”Times New Roman”, arial/helvetica, verdana , “Trebuchet MS”, courier/”Courier New”; y las genéricas: serif, sans-serif, monospaced.

Resultados

  • Todos los sistemas operativos renderizan lo mismo en los distintos navegadores.
  • Todos los sistemas operativos usan como fuente por defecto serif.
  • Todas las llamadas browser-safe fonts no son reconocidas en Ubuntu y renderizan serif.
  • Ubuntu para las fuentes genéricas tiene una fuente con ese mismo nombre: por ejemplo la fuente para serif se llama serif.
  • times es lo mismo que “Times New Roman”
  • arial y helvetica renderizan lo mismo en Windows, pero en Mac/Firefox la posición varía un poco y en Mac/Safari el borde es ligeramente distinto (parece más suave el de helvetica).
  • serif es times en Windows and Mac.
  • sans-serif es arial=helvetica en Windows y helvetica en Mac.
  • monospace es “Courier New” en Windows y courier en Mac, pero a un 85% en tamaño comparado con poner directamente courier.
Mac default/serif/times:
Default Mac
Windows default/serif/times:
Default Windows
Ubuntu default/serif
Default Ubuntu
Mac helvetica/sans-serif:
Helvetica Mac
Mac arial:
Arial Mac
Windows helvetica/arial/sans-serif:
Sans Windows
Mac verdana:
Verdana Mac
Windows verdana:
Verdana Windows
Mac “Trebuchet MS”:
Trebuchet Mac
Windows “Trebuchet MS”:
Trebuchet Windows
Mac courier/monospace:
Monospace Mac
Mac “Courier New”:
Courier New Mac
Windows “Courier New”/monospace:
Monospace Windows
Windows courier:
Courier Windows

Conclusiones

  • Las llamadas “browser-safe fonts” no son tal, por lo que debemos poner siempre el genérico de nuestra fuente al final de la declaración para que al menos tengamos el tipo de fuente correcto.
  • Siguiendo esta regla hay otras fuentes que renderizan en Mac y Windows (no Linux), pero la verdad es que se ven tan feas en Windows que merece la pena quedarse sólo con las sencillas.

Teniendo esto en cuenta mi lista de opciones se queda en:

  • times, serif
  • helvetica, sans-serif
  • verdana, sans-serif
  • “Trebuchet MS”, sans-serif
  • “Courier New”, monospace

Leave a comment