¿Combinaciones populares de fuentes serif y sans-serif compatibles con el navegador?

Tenía curiosidad por saber qué combinaciones de fuentes serif y sans-serif son preferibles para usar y que sean compatibles con la mayoría de los navegadores.

Si bien soy consciente de que con la introducción de CSS3, la importación de fuentes personalizadas es una gran solución, me preguntaba, como respaldo, ¿qué combinación sería buena para usar? ¿Hay incluso una combinación buena/mala con las fuentes disponibles?

Las fuentes se usarían para la página web de un restaurante.

No estoy 100% familiarizado con la tipografía y agradecería algunas opiniones profesionales.

¿Qué quiere decir que @ font-face no es totalmente compatible? Técnicamente es parte de la especificación css2. Todas las versiones de IE desde la 6 en adelante lo admiten, Safari 3+ (no sé acerca de 2) lo admite, todas las versiones de Chrome lanzadas lo admiten, Firefox lo admite desde 3.5 (y lo insta a actualizar a la última versión) . Diría que puede obtener el 80% de los visitantes con @font-face, y ese 20% es probablemente menos que eso, porque los navegadores instan a los usuarios a actualizar.
Eso es extraño, podría haber jurado que no funcionó en IE. Mmm. Bueno gracias por la corrección.
@ DKuntz2 Aquí está la confusión: si bien @ font-face es compatible con todos los principales navegadores, no hay un formato de fuente que actualmente sea compatible con todos los principales navegadores. Debe tener múltiples formatos de la fuente y tener cuidado con su declaración @font-face. Lea más aquí: paulirish.com/2009/bulletproof-font-face-implementation-syntax

Respuestas (3)

Si desea usar @font-face, busque un servicio que garantice una visualización adecuada en todos (la mayoría) de los navegadores y sistemas operativos. Me vienen a la mente Google Webfonts, Typekit y Fontspring, pero también hay algunos otros.

Dos artículos sobre el tema que pueden interesarle (que también cubren las fuentes web estándar):

DesignShack: 10 grandes combinaciones de fuentes de Google

y

Smashing: Guía completa de pilas de fuentes

el uso de servicios agrega gastos generales adicionales, así como javascript(s), así como la dependencia de terceros. así que cuando sea posible, implemente su propia sintaxis en css... mucho más ligero y personalizable.

Trebuchet, Verdana y Arial (sans) y Georgia y Times (serif) son comunes a Windows y OS X, por lo que la mayoría de los usuarios tendrán estas fuentes instaladas. Entonces, para responder a su pregunta, cualquier combinación de Trebuchet/Verdana/Arial y Times/Georgia será compatible con la mayoría de los dispositivos informáticos. Consulte http://media.24ways.org/2007/17/fontmatrix.html aunque no está completamente actualizado.

En mi artículo " Pilas de fuentes que funcionan en Windows, OS X y Linux ".

Se proporciona una pila tipo Helvetica mejorada en " Una pila de fuentes tipo Helvetica multiplataforma que suprime Arial ".

"Droid-like" (serif), "Verdana-like" (sans-serif) y pilas monoespaciadas se dan en " Three font stacks to match DejaVu / Bitstream Vera ".

Cada artículo menciona al menos una fuente web de Google. Los dos primeros explican cómo usar las fuentes de Google con Blogger™.

¿Combinaciones populares de fuentes serif y sans-serif compatibles con el navegador?
RespuestasAquíPolítica de privacidad1y, 1v