En este artículo presentaremos las fuentes web comunes, incluyendo chino e inglés:

Inglés

Sans-serif

  • Helvetica:Considerada la fuente favorita de los diseñadores, estilo Realist, de líneas simples y modernas, muy codiciada. En Mac se considera la mejor fuente web, pero en Windows se ve muy mal debido al hinting.
  • Arial:Un clon de Helvetica, muy similar a Helvetica, con pequeñas diferencias en detalles como la R y la G. Si el tamaño de letra es demasiado pequeño y hay demasiado texto, puede cansar la vista. Se muestra bien tanto en Windows como en Mac.
  • Lucida Family:Lucida Grande es la fuente estándar de la interfaz de Mac OS, de estilo humanista, un poco más viva. Se muestra mejor en Mac que en Windows.
  • Verdana:Fuente diseñada específicamente para la visualización en pantalla, de estilo humanista. Se muestra claramente incluso en tamaños de letra pequeños, pero pierde muchos detalles; es mejor no usarla para títulos.
  • Tahoma:También de estilo humanista, algo parecida a Verdana, pero un poco más estrecha y con un counter más pequeño. Fue una fuente estándar de Windows; después de Mac 10.5 también viene instalada por defecto.
  • Trebuchet MS:Una fuente de estilo humanista diseñada para Microsoft; personalmente creo que tiene un carácter demasiado marcado y, si no se usa bien, puede no combinar.

Serif

  • Georgia:Cuando se trata de fuentes serif adecuadas para el texto en pantalla, Georgia es la indicada. Trazos gruesos, serifas claras, contornos grandes; en tamaños pequeños también se ve clara y los detalles siguen siendo aceptables.
  • Times:Times fue diseñada para periódicos; su característica es que puede incluir más texto en un espacio limitado, con trazos más débiles. En pantalla, en tamaños pequeños para el cuerpo de texto, resulta cansada para la vista. Cuando Engadget rediseñó su sitio, usó Times para el texto, recibió muchas críticas y luego la cambiaron por Georgia.

Chino

  • SimSun:La fuente más común en Windows; en tamaños pequeños es de mapa de bits, en tamaños grandes es TrueType, pero en tamaños grandes no se ve bien, así que es mejor no usarla para títulos.
  • Microsoft YaHei:Fuente introducida después de Vista; con ClearType activado se ve bien, pero sin ClearType se ve borrosa.
  • STHeiti:El chino predeterminado en Mac.
  • Droid Sans y su derivado WenQuanYi Microhei:Es el chino en Android y también el chino predeterminado en la gran mayoría de las distribuciones de Linux; por supuesto, algunos usan WenQuanYi Zenhei, pero cada vez menos.

Nota:CSS3 comenzó a admitir fuentes embebidas (Embedded font), por lo que las opciones de fuentes en inglés aumentaron mucho de repente; sin embargo, debido al gran tamaño de los archivos, las fuentes chinas siguen siendo solo unas pocas opciones.

Efectos de fuentes web

Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
24px Microsoft YaHei, fuente chinaFuente china en negrita ©一方天
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
20px Microsoft YaHei, fuente chinaFuente china en negrita ©一方天
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimSun
26px SimSun, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px SimSun, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimHei* Use la negrita con precaución
26px SimHei, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px SimHei, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789

Fuentes en inglés no monoespaciadas

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Comic Sans MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
abcdefghijklmnopqrstuvwxyz 0123456789
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Time News Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789

Fuentes en inglés monoespaciadas

Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Hei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Monaco
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
simhei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789

Fuentes chinas

SimSun
14px SimSun, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px SimSun, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
14px Microsoft YaHei, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px Microsoft YaHei, fuente chinaFuente china en negrita
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
MingLiU 11px, carácter chino
11px, fuente china nítidaFuente china en negrita (11px)
PMingLiU 11px, carácter chino
11px, fuente china nítidaFuente china en negrita (11px)
Ejemplos comunes de uso con 11px: Tahoma, Verdana, Arial, PMingLiu, MingLiu
11px, fuente china nítidaFuente china en negrita (11px)
MS UI Gothic 10px, carácter chino
Se dice que esta fuente muestra un poco mejor el chino tradicional, pero no se ve muy clara.(10px)