css - personalizadas - Todo sobre la elección de la fuente correcta para un sitio web
fuentes para css (7)
1) ¿Qué tipos de letra se prefieren para un sitio web? En este momento me gusta mucho ''Segoe UI'', pero solo está disponible en los sistemas más nuevos 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 ellos, excepto ''Segoe UI''. ¿Alguna sugerencia sobre qué buena fuente podría usarse además de eso? También probé ''Trebuchet MS'', se ve muy bien en documentos, pero no en una página.
¿Qué tipo de letra son preferidas? Esta es una pregunta difícil. Hay tres plataformas de computación principales que tienen su propio conjunto de fuentes base. Luego, algunos programas como Adobe Creative Suite, el conjunto de aplicaciones de Microsoft Office o incluso un software tan simple como el visor de Powerpoint 2007 para XP instalan fuentes para el usuario. Hay muchos gráficos en la web que enumeran las fuentes más utilizadas .
Para un sitio web, vas a querer usar fuentes legibles. La mayoría de las fuentes de pantalla utilizadas comúnmente en la web son bastante legibles. Las fuentes que mencionas, por ejemplo, son buenos ejemplos. La fuente de pantalla más legible es Verdana, aunque en general se considera fea. Arial es siempre una elección segura.
Sin embargo, tenga cuidado con la declaración de la interfaz de usuario de Segoe: si un usuario de Windows XP tiene esa fuente, probablemente no será legible con el aliasing desactivado.
Para los encabezados, puede personalizar 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 fuente realmente pequeño. 13 píxeles realmente es el mínimo para textos largos (consulte la legibilidad relativa ). Una fuente con una altura x pequeña como Times solo debe usarse para encabezados o en un tamaño suficientemente grande (por ejemplo, 15+ píxeles).
2) ¿Alguna forma de especificar con CSS diferentes tamaños de fuente para cada fuente en particular? Como ''Segoe UI - 9px'', Tahoma - 8px, etc. Probablemente esto no sea posible, pero tal vez haya algunos trucos.
No, esto no es posible. Puede hacer suposiciones sobre el navegador y la gente del sistema operativo que se ejecutan a través de Javascript y, por lo tanto, hacer suposiciones sobre las fuentes que han instalado, pero es mucho trabajo para una ganancia relativamente pequeña. Yo aconsejaría no hacerlo.
En este momento tengo dos preguntas:
1) ¿Qué tipos de letra se prefieren para un sitio web? En este momento me gusta mucho ''Segoe UI'', pero solo está disponible en los sistemas más nuevos 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 ellos, excepto ''Segoe UI''. ¿Alguna sugerencia sobre qué buena fuente podría usarse además de eso? También probé ''Trebuchet MS'', se ve muy bien en documentos, pero no en una página.
2) ¿Alguna forma de especificar con CSS diferentes tamaños de fuente para cada fuente en particular? Como ''Segoe UI - 9px'', Tahoma - 8px, etc. Probablemente esto no sea posible, pero tal vez haya algunos trucos.
También sé que recibiré 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 extensibles. Si el usuario o el navegador de forma predeterminada conducen a la fuente renderizada con un tamaño variable, el diseño pronto se desintegrará. Prefiero tener diseño con limitaciones de tamaño de fuente a no tener diseño en absoluto.
CSS3 admitirá de forma nativa las fuentes descargables (no se le pedirá que las descargue, solo funcionarán sobre la marcha), por lo que podrá utilizar el tipo de letra que desee. Solo tenemos que esperar, pero ya que estará disponible solo en Firefox 3.5 y Opera 10.
También puedes usar fuentes clásicas como: Arial / Helvetica, Verdana, Georgia o incluso Times Roman para un gran impacto visual. Solo tiene que encontrar el tamaño de fuente correcto y contrastar con otros elementos de la página.
La mayoría de los principales navegadores ya son compatibles con @font-face por lo que puedes usar cualquier fuente disponible abiertamente .
Google Web Fonts aloja algunas fuentes gratuitas para elegir:
También hay sitios web de pago como Typekit que alojarán fuentes pagadas para ti y te permitirán comprarlas:
Personalmente, me gustan Verdana y Georgia, aunque solo son Mac / Windows "seguras". En su caso, tal vez sea mejor seleccionar una fuente de segunda opción que tenga las mismas métricas que su primera elección.
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 (lea los principios) de "Los elementos del estilo tipográfico" de Robert Bringhurst:
- "La tipografía existe para honrar el contenido".
- "Elija caras que se adapten a la tarea, así como el tema".
En otra nota, a menos que un rostro de serifa realmente se adapte al sitio web, los rostros de sans-serif son más apropiados para los medios digitales.
Con respecto a su segundo punto, Phil Oye ha lanzado recientemente FontUnstack , un complemento de jQuery que le dirá qué fuente se está utilizando para un elemento determinado. El elemento recibirá una clase (es decir, " set_in_gill_sans ") a través del cual puede aplicar estilos específicos para diferentes tipos de letra.
Además, echa un vistazo a la matriz de fuentes (1.5 años) y estas font-stacks bien pensadas.
1) ¿Qué tipos de letra se prefieren para un sitio web?
Consulte esta página sobre fuentes web seguras .
2) ¿Alguna forma de especificar diferentes tamaños de fuente para cada familia de fuentes en particular a través de CSS?
No
Pronto, @font-face será compatible con todos los principales navegadores, y podrás usar cualquier fuente que desees en tu sitio web.