Powered by

Móvil & Web Hotel

La “nueva importancia” de las tipografías en el diseño web

1 comentario

2 agosto 2012 a las 6:00, por

Diseño web

Tipografías

Hace años, pocas decisiones alrededor de un nuevo proyecto web se tomaban más rápido que la relacionada con el texto web (el que genera directamente en el HTML) y la tipografía a utilizar: “Usar una tipografía estándar”Si se veía el uso de alguna tipografía “diferente” se cargaría como imagen (mapa de bits) para que se viera en todos los navegadores y lo pudieran disfrutar todos los usuarios. Había una posibilidad intermedia que era especificar a través de css que se escribiera un texto con una tipografía determinada y, si el usuario no la tenía instalada en su ordenador, que mostrara otra estándar que seguramente tendría el sistema operativo.

Otro problema que generaba esta solución es que los motores de renderizado de los navegadores y los monitores no eran buenos (o no lo que debieran) y cuando se escribían dichas tipografías a un tamaño grande se veían lo que se conoce comúnmente como dentado. Esto significa que la transición del color de la tipografía al fondo no es nada suave, es decir, esos subpíxeles no se interpretan con la claridad necesaria ni hacia un tránsito natural de un color a otro.

¿Qué es lo que ha forzado esta mejora?

  • Los propios motores de búsqueda siempre agradecen texto a imagen. Por tanto si queremos crear un titulo con una tipografía determinada no tenemos porqué cargarlo como imagen.
  • Para las adaptaciones de web móvil siempre será mejor, el uso de texto a imagen ya que los motores de render de estos formatos son más lentos que los del desktop. A parte, al adaptar a otros formatos con estilos css siempre será mejor aumentar o disminuir tamaños de letra a escalar imágenes.
  • Con la aparición de los monitores LCD ya se daba una solución a esos subpíxeles de transito entre texto y fondo. Ya que solucionaba esos colores intermedios utilizando el RGB (Rojo, verde, azul) y no en escala de grises como hacían antes, provocando mayor claridad en el tránsito. Lo que provoca ver los bordes más suaves y naturales.
  • Con la aparición del css3 y el html5 aparece un nuevo mundo a la hora de jugar con textos: escritura en vertical, en diagonal, creación de sombras, etc.
  • Ciertos navegadores (Safari 3.1 dio un salto importante en este aspecto) al mejorar sus motores de render

Ya hemos visto el porqué ha cambiado. Ahora queda ver cómo nos podemos adaptar a ese cambio.

Para ello debemos saber que el estandar de tipografía que debemos utilizar son formatos .ttf (TrueType), .otf (OpenType) y .eot (EmbedOpenType). El .ttf es más conocido ya que es el que suelen tener las tipografías que instalamos en nuestra dispositivo.

Una vez tengamos el .ttf (debería ser una tipografía que tenga sus derechos de divulgación) para poder utilizarla en la web deberemos crear un formato .eot y luego importarla ayudándonos de los estilos css.

Para crear dicho .eot utilizaremos el FontSquirrel, que crea paquetes completos para importar en la web y luego llamar a cada uno de los formatos específico para cada navegador. Es muy sencillo, incluso el FontSquirrel tiene varios paquetes de tipografías ya creados.

Su funcionamiento es más que bueno, pero seguirá creciendo en importancia según vayan mejorando los motores de render de cada navegador, ya que hay un salto muy importante de Internet Explorer 8 al 9, Chrome y Opera renderizan peor que Safari, etc. Y según vaya creciendo las características del HTML5 y css3 y su compatibilidades con los diferentes navegadores.

Innwise

Innwise

Optimizamos tu estrategia de comercialización online mediante una eficiente gestión de canales de distribución, buscando a través de un revenue management un resultado final rentable siempre como objetivo. Ponemos a tu disposición un amplio paquete de soluciones de emarketing.

1 comentario 

  1. Pingback: Las 10 mejores fuentes para tu biblioteca tipográfica ¡bonitas y gratis! | Blog TRW

Deja un comentario

campos obligatorios *

También te puede interesar