Descargo de responsabilidad:
me doy cuenta de que no existe una "fórmula" perfecta para esta pregunta. Estoy buscando sus prácticas de trabajo experimentales. Si no tienes ninguno, no te lo reprocharé.
¡Durante los últimos años, las fuentes web finalmente se han generalizado! El soporte del navegador es lo suficientemente bueno y el mercado se ha ampliado hasta el punto de que los diseñadores tienen una excelente gama de posibilidades.
Para mis clientes centrados en el rendimiento, el uso de fuentes web tiene algunos beneficios agradables más allá de lo visual/de marca: sacar el tipo de las imágenes hace posible una mayor compresión de la imagen y las actualizaciones de contenido y estilo mucho más rápido.
La pregunta de hoy es: ¿
En qué momento hace la ruptura del texto html en vivo a los gráficos? Especialmente en el contexto de un sitio con requisitos de alto rendimiento (cargas de tráfico, lógica y carga de activos de terceros). Estoy caminando por la línea en algunos proyectos ahora y me está costando decidirme en algunos casos. Me pregunto qué fórmula se les ocurrió a otros. Si alguna.
Necesitamos equilibrar varios factores (sé que hay más):
Para complicar las cosas , el renderizado sigue variando mucho según el navegador y el sistema operativo . Compare IE 8 con 9, por ejemplo, o, más dramáticamente, OS X con Windows. Obviamente, su mercado puede negar la preocupación por algunos de esos problemas (desafortunadamente, sigo apoyando a IE7 en gran medida en algunos proyectos). Y aunque la compatibilidad con la función Webfont OpenType es bastante buena en Firefox, todavía se está quedando atrás en prácticamente todos los demás.
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:
img
etiquetas.background-images
.¿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.
text
, tspan
etc., obteniendo las fuentes con el tipo de fuente y confiando en el navegador para renderizar, o estás hablando de generar elementos de texto específicos como encabezados como rutas SVG con el texto en etc., title
alt -estilo de texto para la accesibilidad? ( stackoverflow.com/questions/4697100/… )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.
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;)
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.
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 :)
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;)
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.
Ryan
de paisano
Ryan
de paisano
Brendan
Ryan
Brendan
de paisano
DA01