Todo sobre elegir la fuente correcta para un sitio web

Question

De hecho tengo ahora dos preguntas:

1) ¿Qué tipos de letra son preferidos para un sitio web? En este momento me gusta mucho 'Segoe UI', pero solo está disponible en los sistemas Windows más recientes, como Vista y 2008 Server. Así que he definido una secuencia:

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; 

realmente no me gusta el aspecto de todos ellos a excepción de 'Segoe interfaz de usuario'. ¿Alguna sugerencia sobre qué fuente agradable podría usarse además de eso? También probé "Trebuchet MS", se ve muy bien en los documentos, pero no realmente en una página.

2) ¿Alguna manera de especificar con CSS diferentes tamaños de fuente para cada font-familiy en particular? Como 'Segoe UI - 9px', Tahoma - 8px, etc. Probablemente esto no sea posible, pero tal vez haya algunos trucos.

También sé que obtendré muchos comentarios ahora para usar tamaños de fuente relativos, pero no quiero eso. Tengo algunos gráficos en mi diseño que no son elásticos. Si el usuario o el navegador llevan por defecto a la fuente representada con un tamaño variable, el diseño se derrumbará bastante pronto. Prefiero tener el diseño con limitaciones de tamaño de fuente para no tener ningún diseño.

Answer 1

1) ¿Qué tipo de letra se prefiere para un sitio web?

Consulte esta página con respecto al safe web fonts.

2) ¿Alguna manera de especificar diferentes tamaños de fuente para cada familia de fuentes en particular a través de CSS?

Nope.

Pronto, @font-face será compatible con todos los principales navegadores, y podrá utilizar cualquier fuente que desee en su sitio web.

Hasta entonces, eche un vistazo a Cufón o sIFR.

Answer 2

Re. Para su elección de fuente, consideraría que la usabilidad es un requisito clave (a menos que elija un formato deliberadamente diseñado).

Neilson hicieron un study y encontraron que Verdana o Arial son opciones óptimas en términos de legibilidad.

Answer 3

1) ¿Qué tipo de letra se prefiere para un sitio web? En este momento me gusta mucho 'Segoe UI', pero solo está disponible en los sistemas más recientes de Windows como Vista y 2008 Server. Así que he definido una secuencia : font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; Realmente no me gusta el aspecto de todos de ellos a excepción de 'Segoe UI'. ¿Alguna sugerencia de sobre qué buena fuente podría ser usada además de eso? También probé 'Trebuchet MS', se ve muy bien en los documentos , pero realmente no en una página.

¿Qué tipo de letra se prefiere? Esta es una pregunta difícil. Hay tres plataformas informáticas principales que tienen su propio conjunto de fuentes base.Luego, algunos programas como Adobe Creative Suite, Microsoft Office suite o incluso software tan simple como el visor de Powerpoint 2007 para fuentes de instalación de XP para el usuario. Hay muchos gráficos en la web que enumeran commonly used fonts.

Para un sitio web, querrá utilizar fuentes legibles. La mayoría de las fuentes de pantalla comúnmente utilizadas en la web son bastante legibles. Las fuentes que menciona, por ejemplo, son buenos ejemplos. La fuente más legible en la pantalla es Verdana, aunque generalmente se considera fea. Arial es siempre una elección segura.

Sin embargo, tenga cuidado con la declaración de IU de Segoe: si un usuario de Windows XP tiene esa fuente, probablemente no sea legible con anti aliasing desactivado.

Para los encabezados, puede ir personalizado y usar técnicas como sIFR y Cufon para reemplazar el texto con fuentes de sistema no nativas.

Una nota rápida sobre el tamaño: la mayoría de los sitios tienden a establecer un tamaño de letra realmente pequeño. 13 píxeles realmente es el mínimo para textos largos (ver relative readibility). Una fuente con una altura x pequeña, como Times, solo debe usarse para encabezados o en un tamaño suficientemente grande (por ejemplo, más de 15 píxeles).

2) Cualquier forma de especificar con CSS diferentes tamaños de fuente para cada particular, font-familiy? Al igual que 'Segoe UI - 9px', Tahoma - 8px, etc. Esto es probablemente no sea posible, pero tal vez son algunos trucos?

No, esto no es posible. Puede hacer suposiciones sobre el navegador y el sistema operativo que las personas ejecutan a través de Javascript y, por lo tanto, hacer suposiciones sobre las fuentes que han instalado, pero es mucho trabajo por una ganancia relativamente pequeña. Aconsejaría en contra de eso.

Answer 4

CSS3 admitirá de forma nativa fuentes descargables (no se le pedirá que descargue, simplemente funcionarán sobre la marcha), por lo que podrá usar cualquier tipo de letra que desee. Solo tenemos que esperarlo, pero ya estará disponible solo en Firefox 3.5 y Opera 10.

También puede usar fuentes clásicas como Arial/Helvetica, Verdana, Georgia o incluso Times Roman para un gran impacto visual . Solo necesita encontrar el tamaño de fuente correcto y el contraste con otros elementos en la página.

Answer 5

Utilice el tipo de letra correcto para su sitio. No es tan simple como decir "esta es la mejor fuente para sitios web". Aquí hay dos citas (leer principios) de Robert Bringhurst's "The Elements of Typographic Style":

• "La tipografía existe para honrar el contenido."
• "Elija caras que se adapten a la tarea y al sujeto".

En otra nota, a menos que una cara serif realmente se adapte al sitio web, las caras sans-serif son más apropiadas para medios digitales.

Con respecto a su segundo punto, Phil Oye ha lanzado recientemente FontUnstack, un plugin jQuery que le dirá qué fuente se está utilizando para un elemento dado. Al elemento se le asignará una clase (es decir, "set_in_gill_sans") a través de la cual puede aplicar estilos específicos para diferentes tipos de letra.

Además, mira font matrix (1.5 años) y estos bien pensados ​​font-stacks.

Answer 6

Solo personalmente, me gustan Verdana y Georgia, aunque solo son Mac/Windows, "seguras". En su caso, tal vez lo mejor sea seleccionar una fuente de segunda opción que tenga las mismas métricas que su primera opción.

Answer 7

La mayoría de los principales navegadores ya son compatibles con @font-face, por lo que puede usar fuente abiertamente disponible.
Google Web Fonts anfitriones algunas fuentes libres para elegir:

También se pagan sitios web como Typekit que acogerá fuentes pagados por usted y dejar de comprarlos: