Web fonts y otras técnicas de reemplazo de fuentes

bex · #1 (**permalink**) 06/09/2010, 13:08

Hola foreros,
Hoy participando en un tema en el foro de SEO me surgió una controversia.

Las web fonts son realmente una maravilla del CSS, pero más del 20% de los usuarios usan navegadores que no las soportan.
Soporte de web fonts por navegador: http://webfonts.info/wiki/index.php?...rowser_support
Uso de navegadores por versión: http://marketshare.hitslink.com/brow...e.aspx?qprid=2

En contrapunto tenemos la famosa técnica de usar una imagen de fondo en un elemento, escribir el texto en el código y darle text-indent:-9999;. Esta última técnica me parece muy buena, ya que es soportada por todos los navegadores y deja el código perfecto para los robots, navegadores para ciegos y demás. La única contra es que no se puede seleccionar el texto.

Por otro lado tenemos sIFR (reemplazo de texto por flash), pero esta técnica, a diferencia de la anterior, requiere de Javascript.

Me gustaría saber qué opiniones hay por el foro.
Gracias!

shava · #2 (**permalink**) 07/09/2010, 11:53

Yo mi opinión es que por accesibilidad, las webfonts (o google fonts, ya lo que guste) es la opción correcta. Si no aparecen las fonts no hay problema, ya que cogerá una del sistema por defecto.

Porqué no me gusta flash: por la necesidad de plugins y tener soporte javascript. Puede que en algunos casos se utilice algún navegador que no dependa de javascript (estoy seguro de que aún hay quien los utilice si aún se utiliza IE6).

Porqué no hackear con css: porqué aparte de que es una cochinada (siempre que se pueda hay que dejar el código lo más limpio posible sin utilizar hacks), y que el texto no es seleccionable.

PD: con lo de cochinada en los hacks, tengo que arrojar una lanza a favor de que sin ellos muchas veces algunas cosas no se pueden hacer (maldito unreal crossbrowsing).

bex · #3 (**permalink**) 07/09/2010, 13:49

Gracias por tu respuesta shava. Te cuestiono algunas cosas de buen ánimo, a ver qué opinás...

Cita:

Iniciado por shava

Si no aparecen las fonts no hay problema, ya que cogerá una del sistema por defecto.

De acuerdo, pero usando técnicas CSS siempre aparece el texto con la fuente elegida.

Cita:

Iniciado por shava

Porqué no hackear con css: porqué aparte de que es una cochinada (siempre que se pueda hay que dejar el código lo más limpio posible sin utilizar hacks)...

Yo nunca hablé de un hack, hablo de una técnica CSS que deja el código igualito igualito a como si no se usara, limpio limpio. No veo la cochinada.

Carlangueitor · #4 (**permalink**) 09/09/2010, 23:29

Hablando estrictamente de accesibilidad el uso de webfonts no afecta en nada. Ya que no es un impedimento en el momento de navegar en ciertos entornos.

Ahora, ya hablando desde un punto de vista más estético tienes que darte cuenta que siempre va a ver algún usuario que tenga desactivado algo, como js, css, imágenes, etc. Así que pretender que el 100% de los usuarios accedan correctamente a tu página es inútil.

A mi parecer lo más sencillo de usar es cufón, requiere de Javascript, pero me parece perfecto, a excepción de que el texto generado no es seleccionable. Pero también con CSS puedes lograr un buen nivel de accesibilidad, ya que el principal navegador, Internet Explorer Soporta eot desde la versión 4.

Saludos

kseso? · #5 (**permalink**) 10/09/2010, 06:22

¿Por accesibilidad?
CSS y su @font-face siempre y cuando se haga una declaración en el selector apropiada, y no sólo la fuente importada:
.selector {font-family: "fuente personalizada", secundaria, "familia genérica";}

De los inconvenientes que se le achacan a esta técnica, ninguno va por ese tema, sino por
.- Cuestiones de renderizado (según qué navegadores, fuente y tamaño)
.- Pesos de algunos archivos de fuentes.
.- Efectos transitorios en la carga del texto y empleo de la fuente: dependiendo del navegador y archivo puede que primero se muestre con una genérica y posteriormente se cambie a la indicada.
Y otros por el estilo.
Porque el que se le achacaba de descarga (por parte de algún navegador) de todos y cada uno de los archivos de la misma fuente (eot, ttf, svg..) ya tiene solucción en el orden de la declaración.

Pero no hay diferencia entre usar una "safety" u otra importada desde el punto de vista del visitante.

Todo lo relativo a demoras, transferencias, peticiones al servidor, ajustes o "redibujado" de la página una vez mostrada es común a cualquiera de las técnicas, ya sea @font-face, métodos de reemplazo por imágenes, flash... (aquí una amplia recopilación) o la google font api que tan de moda está ahora.

bex · #6 (**permalink**) 10/09/2010, 08:19

Bueno genial, muchas gracias a todos por sus respuetas. La pregunta venía porque trabajo mucho con departamentos de marketing de empresas grandes y las empresas grandes siempre obtienen lo que quieran de sus proveedores. Y siempre me piden sitios con "texto que no sea aburrido", un concepto complicado de interpretar a veces.

Hasta ahora siempre usé reemplazo por imágen, por ser la más universal en el renderizado. Ya investigaré un poco cada técnica y veré con cuál me quedo. Gracias a todos.

Cualquier otra opinión es más que bienvenida!

cristian_cena · #7 (**permalink**) 12/09/2010, 14:45

Hola gente, primero felicitaciones por el tema que estan tratando y la calidad de las opiniones, particularmente uso sIFR pero en la práctica noto que no puedes usar todas las fuentes que se te ocurran ya que al ser renderizado el texto suele aparecer un pequeño suavizado a la fuente segun con que punto tipografico se trabaje.

Por ejemplo, la fuente "standard 07_58 (true type)" a mi criterio funciona en un diseño solo dentro de un rango que va de los 8 a los 11px. Y en estos puntos es de extrema necesidad conservar la legibilidad de la fuente. Característica que se pierde con el suavizado que aplica sIFR.

La alternativa que estoy analizando de aplicar en futuros proyectos pero que todavía no me hice tiempo de hacerlo es @fontface siguiendo el articulo "fuentes bonitas" de kseso?. Me parece la mejor alternativa para el uso de fuentes no-web.

A proposito kseso? En cuantos navegadores (y sus versiones) has testeado tu tecnica?

Gracias y un fuerte abrazo.

kseso? · #8 (**permalink**) 12/09/2010, 18:38

Gracias Cristian por otorgarme la propiedad de @font-face. Ya aviso a mis abogados :P

El problema que mencionas relativo al font-size no es tanto de la typo utilizada como de la elección de la misma.
A ver si soy capaz de explicarme:
La mayoría de las tipografías (hablamos de aplicación en pantallas) tienen un rango óptimo de tamaño, uno "aceptable" y otro totalmente desaconsejado. A medida que se aleja uno del óptimo (por grande o pequeño) el desastre es más notorio.

Así, para tamaños pequeños, lo aconsejable sería utilizar las "fuentes pixel", diseñadas precisamente para obtener una legibilidad a tamaños pequeños. Sin embargo, a medida que lo aumentas, van perdiendo su "gracia". Ocurre hasta con la humilde verdana.

Lo contrario, por el extremo opuesto, ocurre con las fuentes con mucha personalidad o fuerte presencia. Las diseñadas como bold/bolder, con adornos (desde las serifas hasta las de arabescos), etc.

Resumiendo: así como no hay color desaconsejable per sec, sino que hay que verlo en el conjunto interactuando con el resto de elementos, todo lo relativo a la tipografía a utilizar debe someterse al mismo análisis.

Sólo como apoyo a lo anterior, fíjate en ésta página. La typo, los tamaños, el contraste entre la fuente y el tema, la congruencia entre ella y las ilustraciones, etc. Como ves, todo camina en la misma dirección.

Cita:

A proposito kseso? En cuantos navegadores (y sus versiones) has testeado tu esa tecnica?

Pásate de nuevo por la guía. No hace mucho que hice la última actualización al respecto.

P.D.: disculpas por lo siguiente: mierda del static.forosdelweb y el facebookconect. Por su retraso y "no carga" han provocado que el comentario original se perdiese y este sólo sea un remedo de lo que debería haber sido.

cristian_cena · #9 (**permalink**) 12/09/2010, 19:21

Gracias por la respuesta kseso
Sobre las tipografías pixel, la tipo que nombre es de esa característica. Y en la práctica (solo con sIFR) eh comprobado que en puntos reducidos se hace notorio un leve suavizado que hace perder la nitidez, lo que afecta a la buena legibilidad.

Cita:

Iniciado por kseso?

Gracias Cristian por otorgarme la propiedad de @font-face. Ya aviso a mis abogados :P

(cuac) por decir lo que pienso sin pensar lo que digo jaja.

mdk · #10 (**permalink**) 06/11/2010, 18:15

A ver, por lo que me parece que me he enterado, creéis que no se pueden usar las fuentes que uno quiera con CSS, ¿y si el ordenador del lado del cliente no tiene la fuente instalada? bueno, si es así, no hace falta usar técnicas de remplazo con flash y chorradas varias, con un simple CSS de 3 o 4 líneas y los archivos de las fuentes alojadas en el lado del servidor basta. En esta web http://www.fontsquirrel.com/fontface/generator cargas la fuente que quieres utilizar, y automáticamente te crea el CSS que debes de utilizar, junto con las fuentes almacenadas. Es rápido, cómodo y tienes la fuente que quieras siempre sin hacer cosas raras. Recuerdo que ya pusieron esta web que he puesto en un post, no recuerdo cual. Pero la verdad es que en todo el tiempo que la he probado me va de maravilla, me carga las fuentes sin problemas, y se ven perfectas.

Saludos, y si no iba por ahí el tema, lo siento

kseso? · #11 (**permalink**) 12/11/2010, 14:27

Cita:

Iniciado por mdk

A ver, por lo que me parece que me he enterado, creéis que no se pueden usar las fuentes que uno quiera con CSS...
Saludos, y si no iba por ahí el tema, lo siento

Pues va a ser que tiene toda la razón.
Por lo tanto habrá que dársela.
Razón en que no se ha enterado de qué va el tema ni de lo que se ha dicho en él.
(Re)léaselo detenidamente, por favor.

logotype · #12 (**permalink**) 30/11/2010, 22:25

Kseso, interesante comentario sobre las fuentes, aunque se vaya un poco del tema central, si es necesario recalcar que el uso de las fuentes va más alla de la simpleza con la que comunmente se trata el tema. Cada fuente tiene una personalidad y esta se transmite al diseño otorgandole un concepto visual especifico, es tambien una manera de "huir" de las desabridas plantillas.
Habrá seguramente oportunidad de abundar sobre este tema mas adelante.
Saludos.

kseso? · #13 (**permalink**) 02/12/2010, 09:26

Cita:

Iniciado por logotype

Kseso, interesante comentario sobre las fuentes, aunque se vaya un poco del tema central, si es necesario recalcar que el uso de las fuentes va más alla de la simpleza con la que comunmente se trata el tema. Cada fuente tiene una personalidad y esta se transmite al diseño otorgandole un concepto visual especifico, es tambien una manera de "huir" de las desabridas plantillas.
Habrá seguramente oportunidad de abundar sobre este tema mas adelante.
Saludos.

Gracias Mario.
Efectivamente. Es un tema lo suficientemente amplio, con tantas ramificaciones e implicaciones en cada aspecto, que pretender reducirlo sólo a cuestiones de código (font-family, color, tamaño...) es, como dices, demasiado simplista.
Por eso, hay multitud de "tratados" al respecto, y cada día, se añade uno nuevo.

Por ejemplo, uno de los últimos que cayó en mi pantalla: "Why Typography is the Soul of Web Design?" http://bit.ly/ehMEqg

Cita:

Habrá seguramente oportunidad de abundar sobre este tema mas adelante.

Ya siento no compartir tu esperanza.

Un saludo, Logotype.