Custom fonts en el diseño web

Últimamente ha habido un gran avance en este tema, soluciones de paga como typekit y otras más veteranas y de uso libre como sIFR y Cufon.

¿De qué se trata todo esto? Históricamente el diseño web ha estado atado a unas cuantas fuentes websafe, esto significa que el site se verá con la fuente que seleccionaste en todos los navegadores y sistemas operativos, cuando menos los de más uso.

Soluciones como sIFR basada en js+flash han sido muy usadas pero su implementación no es tan sencilla y como todas las cosas tiene sus desventajas. Cufon usa el navegador para dibujar la fuente en vectores usando VML (Vector Markup Language) para IE y HTML5 Canvas para  navegadores más modernos. Es más rápido que sIFR pero el texto no se puede seleccionar y no se puede agregar un estado de hover sobre el texto convertido.

He usado las dos soluciones, de las dos me gusta más sIFR aunque claro la decisión de la técnica que uses debe ir de la mano del uso que se le vaya a dar, me refiero a que para un sitio puede ser mejor una y para otro sitio otra, dependiendo del uso del mismo.

Typekit

Después vino typekit que es de paga y que ya tiene unos dos años creo en desarrollo, no estoy seguro pero es más o menos el tiempo que tengo viéndolo en blogs y sitios relacionados. Typekit viene a ofrecer una solución muy diferente a sIFR y Cufon. Desde un control panel seleccionas las fuentes que quieres usar —el inventario es limitado, los pesos que quieres usar, en general tienes buen grado de control sobre lo que vas a mostrar a través de CSS, y lo más importante, usa @font-face que es la forma correcta de usar fuentes custom. El problema de las fuentes custom siempre ha sido el licenciamiento de las mismas y typekit viene a solucionar un poco esto porque te sirve fuentes de forma legal por decirlo así.

Typekit hace una llamada a un js que sirve la fuente a tu sitio (sí, la fuente está hosteada en sus servers) y es necesario agregar unas lineas para hacer funcionar el CSS de forma correcta, en realidad es muy sencillo y el resultado es bueno.

Ventajas

  • Fácil de usar
  • Usas la fuente de forma legal
  • Control sobre las fuentes via CSS

Desventajas

  • Es de paga
  • Catálogo limitado de fuentes
  • Generalmente carga primero la fuente original y después es sustituida por la que pagaste, es muy rápido el cambio pero se nota
  • A veces tardan en cargar las fuentes porque son servidas de forma remota. El peso aprox. de cada fuente es de 80kb (Normal, Bold, Italic) súmale

Y luego viene Google

Google lanzó en estos días una solución que usa la misma tecnología que typekit pero sin el control panel, se llama Google Font Directory y hace exactamente lo mismo que typekit pero gratis :D. El cagálogo de fuentes es muy limitado pero si quieres probar usando fuentes diferentes a las de siempre en tus sites héchale un ojo. Aquí puedes ver un ejemplo en uso.

Conclusión

Si puedes pagar por una licencia de Typekit hazlo sin quitarle el ojo de encima a Google Font Directory porque con el tiempo va a ir mejorando en funcionalidades y el catálogo de fuentes que es muy bueno actualmente pero reducido.

sIFR y Cufon aún son la respuesta a miles de diseñadores web y van a estar aquí pos un buen tiempo, si tienes tiempo dales una oportunidad así sabrás cuando llegue el momento que solución es la mejor para tu sitio.

Comentarios desactivados

Typography quick tips

Como el título lo dice, el site da algunos tips sobre el uso de la tipografía en la web.

Comentarios desactivados

Sitio Capital Activo

Capital Activo

Capital Activo nos confió el diseño de su sitio y después de un millón de correcciones de texto el site por fin está en línea. Como siempre, les agradecería que si ven algún bug y me lo hagan saber. El diseño de este site es de Edgar Jiménez de Trost.

Como datito extra, este post es el número 600 :D, nudonation existe desde febrero del 2005, eso da un promedio de 120 post por año o 12 post por mes, mucho menos de lo que quisiera. Uno de los propósitos del año que viene es publicar más, veremos.

Nuevo tamaño de banner publicitario

Entre a The Washington Post y vi que están usando un nuevo tamaño de banner publicitario. Hace que el site se vea un poco como periódico en papel. Juzguen ustedes.

Siento que estos tamaños tan grandes son en respuesta a que en los últimos años los monitores han aumentado considerablemente su resolución, otra es el ancho de banda que cada vez es mayor también.

Sitio web Teknol

Teknol

Teknol es una startup mexicana que produce software y hardware al puro estilo surfase de Microsoft. Antonio Pacheco Director de Tecnología nos visitó y nos comentó que estaba interesado en re-hacer su site ya que el anterior no cumplía con su tarea. El site está en su primera etapa, tuvimos que hacerlo en tiempo record ya que Teknol tenía importantes compromisos que cumplir y el site era prioritario.

Aún le faltan cosas, actualmente está basado en documentos estáticos, pero en los próximos días será montado en WordPress con lo que se abre al abanico de funcionalidades. También le dimos una manita de gato al logotipo, Edgar mi compañero y socio lo trazo de nuevo y le dió más aire alrededor de la tipo logrando que sea mucho más legible. Ver logotipo anterior.

Como siempre, les agradecería si me hacen saber de cualquier bug que brinque.

Sitio de ILPIL

ILPIL

El International Logistics and Productivity Improvement Laboratory (ILPIL) de la Universidad de Arizona nos pidió un site para publicar los avances de sus investigaciones. El site está montado sobre wordpress y como siempre cumple su función perfectamente dándole a los clientes la facilidad de editar sus propios contenidos de forma práctica.

Para los títulos usamos el plugin wp-sifr que nos permite meter cualquier tipo de fuente en los títulos. Tengo que confesar, estoy en mi período Gotham, es mi fuente favorita en estos momentos.

Si le ven algún bug por favor me dicen!!

Sitio web de Extra Kleen

extrakleen

Contentos de terminar este trabajo para Extra Kleen que aunque fue pequeño nos consumió algo de tiempo. A este cliente también le hicimos el logotipo. Como siempre si ven algún bug les agradezco dejarlo en los comments.

Sitio Materia de Negocios

Picture 1.png

Hace tiempo que comenzamos con Materia de Negocios, de hecho aún le faltan muchas cosas, sólo quiero mostrarlo. Corre sobre wordpress. Por favor si le ven algún bug envíenme un comment.

Materia de Negocios es una publicación impresa y en línea que habla sobre la escena económica en la región de Sonora principalmente.

Trost ya tiene sitio

Nuevo site de Trost

Después de tres años de estar en contrucción, Trost estrena sitio. Después de darle varias vueltas al asunto, después de talvez 4 ó 5 layouts que nunca vieron (ni verán) la luz por fin tenemos sitio :)

Mientras bocetaba siempre estuve pensando en montar en wordpress, pero viendo sites por ahí me encontré que muchos portafolios de diseñadores o de despachos de diseño son de una sola página, entonces decidí hacer un site de un sólo documento. Estoy contento con lo que salió, creo que por el momento no necesitamos más. El site valida en CSS y XHTML. Si alguien se pregunta ¿Por qué tiene gatos el site de Trost? bueno, es un pequeño tributo al mejor gato que existió en el mundo y que ya no está con nosotros u_u

SGS Seguridad design proposal

home-sgs.jpg

(Click en la imagen para ver más grande) Hace poco publiqué sobre el logo de SGS Seguridad, una compañía local de servicios de seguridad. Bueno pues este es el home de la compañía. Se podrán dar cuenta de que el logo en este caso amarillo y gris obscuro me facilitó la paleta de colores para el site.

El cliente ya lo vió y le gustó mucho, me tomé la libertad de publicarlo, algo que normalmente no hago en esta etapa del diseño, espero que no se moleste :|

Para el banner ppal estoy pensando en usar jcycle con autoplay para que se roten tres ó 4 banners. Estará montado sobre wordpress (en que otra cosa si no en WP? jeje)

ito.com.mx

ito.png

Hoy se ha lanzado oficialmente ito.com.mx servicio para acortar url´s. Es un proyecto de Malditoweekend Network.

A mi me toco hacer la parte visual, el logo y el diseño del site.
Bien, pues a usar productos mexicanos!

La casa blanca cambia de sitio

gov.jpg

Sergio me envía este link donde podemos ver que el sitio oficial del gobierno de EU ha cambiado de cara, como bien dice Sergio se nota la mano de los mismos desarrolladores que hicieron su sitio de campaña. Me gusta el sitio, tú como la ves?

Como datitos extra:

  • Está hecho en .net
  • Usa swfobject para desplegar el flash
  • Tiene un blog
  • Usa jquery como librería de js
  • Está hecho bajo estándares, HTML 1.0 Transitional para ser exactos

Categorías

Archivos por mes

Buscar

Suscríbete vía RSS

Suscríbete vía E-mail

Lo más reciente

  1. Logos que no deberían ser
  2. Preview de tus brochas de photoshop
  3. Parece que ya estamos de vuelta
  4. Custom fonts en el diseño web
  5. Infinitum aumenta velocidad de nuevo
  6. Lost: el humo negro
  7. Logo Phonotic
  8. Logo 3way
  9. Logo optimiza.mx
  10. Logo Cranker Bikes