Mi solución: hojas de sprites SVG con respaldo PNG

Personalmente, creo que las fuentes de íconos son una tecnología de emergencia deficiente que no existirá en 5 años. Las imágenes SVG son una forma mucho mejor de hacerlo si necesita vectores. SVG tiene la mayoría de los beneficios de las fuentes de iconos, además de:

• Los SVG pueden contener colores, degradados y otros efectos.
• Funciona con imgetiquetas.
• Funciona como CSS background-images.
• Los SVG son píxeles perfectos.
• Al igual que las fuentes de iconos, SVG se puede escalar a cualquier tamaño, por lo que obtienes compatibilidad con Retina de forma gratuita.
• Los SVG suelen ser archivos más pequeños que las fuentes de iconos.
• Si quiere todo en un solo archivo, puede usar hojas de sprites SVG.
• Los SVG son más fáciles de crear y se pueden editar en Illustrator.
• La representación es mucho más consistente en todos los navegadores (ciertamente para cosas simples de todos modos).

¿La gran advertencia para usar SVG? No hay soporte para Internet Explorer antes de la versión 9. Eso puede o no ser un factor decisivo para usted. WebKit (Safari y Chrome) y Firefox tienen una excelente compatibilidad con SVG. Para versiones anteriores de Internet Explorer, puede cambiar su hoja de sprites SVG por un PNG (muy fácil, generalmente solo unas pocas líneas de CSS).

Eso debería cubrirlo todo y brindarle solo unas pocas solicitudes HTTP, un tamaño de archivo pequeño, la capacidad de usar colores, degradados y otros efectos de diseño. Ah, y significa que no tienes que recurrir a la horrible piratería HTML. Las cosas pueden ser agradables y semánticas.

No hay muchas situaciones en las que recomendaría fuentes de iconos. Creo que son una idea terrible. Un recurso provisional realmente hacky que estará muerto y enterrado en algún momento en el futuro cercano.

Tú mismo lo mencionas: "La cuestión fundamental aquí es mantener un equilibrio entre lo visual y lo técnico". Esta es mi opinión, y estoy seguro que no todos estarán de acuerdo, pero esto es lo que he observado en los últimos años trabajando en web.

Fuentes web frente a fuentes seguras: técnicamente, no necesita fuentes web. Puede usar los seguros que no requieren que el usuario descargue ningún archivo adicional (solicitudes). Puede hacer maravillas combinando el tamaño, el peso, el espacio entre letras y la altura de las líneas, y probablemente comunicarles su mensaje con éxito. Usar una fuente diferente en este caso probablemente solo sea una elección estética.

Texto HTML vs gráficos: no creo que haya una fórmula para esto. Cuando las fuentes web se volvieron extremadamente populares, todos se subieron al tren de las fuentes sin importar cuán horribles se veían algunas fuentes en ciertos sistemas operativos/navegadores. Me recuerda un poco cómo la gente le daba la espalda a las mesas y, de repente, cualquiera que las usara era una blasfemia. Las tablas siguen siendo la mejor opción para los datos tabulares. Los gráficos Pixel Perfect siguen siendo, en mi opinión, la mejor opción para diseños estéticos.

Sin embargo, esto probablemente cambiará en un futuro cercano. La renderización móvil es increíble y algunas fuentes nuevas se ven muy bien en diferentes dispositivos.

La última vez que quise 'personalizar', probé la mayoría de las fuentes sans-serif en font squirrel en 3 sistemas operativos diferentes y en todos los principales navegadores. Le di a cada uno una puntuación de 1 a 5 según lo bien que se representaron. La mayoría de ellos obtuvo un 3, algunos obtuvieron un 4. Para un sitio web personal, opté por la mitad de los gráficos, la mitad de las fuentes. Como menciona DA01, "todo depende de las necesidades del cliente, las necesidades de los usuarios del cliente y la solución particular que se está diseñando" (DA01 sic).

Han pasado años desde el 'lanzamiento' de @font-face, y por mucho que me encantaría usar fuentes hermosas en mis diseños, todavía no veo el sentido de usar fuentes que se representen de manera tan diferente en varios escenarios. Pero esta es solo mi humilde opinión, y tiendo a quedarme con 'lo que funciona para mí'. La respuesta SVG suena genial y podría cambiar mi opinión :)

De acuerdo, evaluaré dónde estoy, ya que no parece que aparezcan enfoques fijos.

Representación

Para empezar, los días de representación de fuentes web incompletas pronto quedarán completamente atrás, al menos con fuentes bien hechas. Los principales infractores (versiones de IE anteriores a la 9) se están convirtiendo rápidamente en una cosa del pasado. IE 8 sigue siendo un jugador, pero estoy convencido de que la audiencia no está motivada estéticamente de todos modos;)

efectos de fantasía

El texto del sistema/HTML puede manejar fácilmente cambios de
color,
opacidad,
escala,
posicionamiento horizontal y vertical
y sombras de texto.

Cuando mis efectos empiezan a complicarse, lo considero un momento obvio de tipo gráfico. Más allá de los controles de estilo simples (¿alguien quiere agregarlo a mi lista?), deberá confiar en
las bibliotecas de JavaScript,
las funciones OpenType con soporte irregular,
las descargas de fuentes web excesivamente grandes en el extremo del usuario
y posiblemente las funciones HTML5/CSS3 con soporte limitado.

Si quiero sesgar mi letra,
ajustar el interletraje,
aplicar texturas,
colocarlo con precisión y romper líneas sobre una imagen,
o cualquier otra cosa que requiera un control preciso, recurro a un gráfico.
Como dije, hay formas, simplemente no creo que valgan la pena en este momento.

Dicho esto, también tengo que preguntarme en esos casos si realmente necesito los efectos. Podría establecer muy bien el tipo de sistema sin que todas las cosas sofisticadas hicieran el trabajo. Quizás. Siempre hay una línea borrosa en alguna parte.

Gran cosa

Donde me encuentro dudando en confiar en webfonts es en tipos muy grandes. Solo para arrojar un número, digamos 60px y más. ¿Porqué es eso? No estoy del todo seguro, pero puedo pensar en un par de cosas que me preocupan.

Por un lado, el tipo grande a menudo requiere un poco más de kerning que el seguimiento simple no puede resolver. El tipo es dominante en la página y cada pequeño defecto se vuelve dolorosamente evidente para mí.

En segundo lugar, el tipo de letra tan grande tiende a requerir un ajuste muy cuidadoso dentro del diseño. Creo que es menos crítico en los sitios de contenido donde el tipo puede fluir y hay un espacio en blanco muy necesario, pero en un sitio de comercio o en un entorno de contenido denso, un salto de línea fuera de lugar o un carácter extendido puede causar estragos.

Creo que estas pueden ser inseguridades que quedaron de los días en que los navegadores hacían un trabajo realmente malo con el tipo. Desafortunadamente, aún persisten suficientes de esos problemas que me hacen ser cauteloso. Cosas como el botón Agregar al carrito de Giantnerd me dan ganas de aceptarlo :)

el veredicto final

Bueno, tal vez no sea definitivo. Final-ish.

A pesar de mis inseguridades, estoy superando el asunto de los tipos grandes. Y me encuentro usando menos efectos y texto de sistema más limpio en otros lugares. Una de las grandes ganancias son los diseños más receptivos: ¡el texto del sistema es fácil de cambiar sobre la marcha!

Estoy optimizando rápidamente los sitios de mis clientes y cambiando a una menor dependencia de la imagen. ¡Traigan las fuentes web! Tal vez sea otro período de renacimiento del estilo internacional en el diseño;)

En plena revelación

Sería negligente no mencionar ejercicios asombrosos como Lost Worlds' Fairs . Es una prueba maravillosa de que casi cualquier cosa es posible con el tiempo y la base de usuarios adecuada.