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.

Sitio web 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 web de Extra Kleen

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.

Full CSS o tablas

Escenario: Tienes un cliente que te pidió un site donde tienes que publicar catálogos productos en un grid. ¿Qué usas para hacer el grid? ¿Full CSS o pones una tabla que es mucho más rápido?

• ¿Cómo sería el mantenimiento en un futuro a usar tablas?
• La solución en CSS necesita algunos hacks tanto para FF como para IEs, vale la pena esto?
• ¿Es semánticamente correcto usar un grid hecho con una tabla?
• ¿Al usuario le importa?
• ¿El sitio funciona de la misma manera?

Escribo este post porque me encontré otro que habla del tema y en los comments se pone buena la alegata, les paso la liga. ¿Tú que harías?

Give up and use tables

You know, we’ve all been there. We want to make it work with CSS. But sometimes it’s just not worth the effort. The hacks and conditional comments ruin our clean markup. And we spend hours trying to make a simple layout work. Occasionally, we have to remind ourselves that we’ve done enough and it’s time to move on.

Es cierto que toma más tiempo, pero es mejor, es cierto que a veces es frustrante, pero al final siempre aprendes algo nuevo.

Give up and use tables. ¿Tú que piensas?

El regreso de las tablas al diseño web

Un artículo muy interesante sobre el uso de algunos recursos de CSS2 que nos permiten forzar a un div a que se comporte como una tabla. Lo malo de todo esto es que no lo soporta el IE6 ni el IE7. Leer el post aquí.

Developer Bar para Firefox 3

Si usabas esta barra antes y al actualizar a FF3 dejó de funcionar hay buenas noticias, no se exactamente desde cuando, pero ya funciona bien en FF3. Aquí puedes descargarla.

Una alternativa al clearing

¿Estás cansado de usar esto?

En el sitio Quirks Mode nos muestran una solución sencilla para no usar markup extra en tu código. Ver la solución.

Lo vi en cssglobe.com

Sitio Plaza Las Palmas

Este es otro sitio que terminé hace poco, pero que no se porque no lo había publicado. El proyecto fue hecho para Plaza Las Palmas un complejo de oficinas acá en la ciudad de Hermosillo. El sitio está hecho en HXTML + CSS. Si le ven algún bug les agradecería que me lo hicieran saber. Visitar sitio de Plaza Las Palmas.

Si tienes alguna vez la necesidad de mostrar gráficas en tu sitio te recomiendo AmCharts, que es lo que usamos en este sitio para desplegar la gráfica de dona. Es uy flexible y tienes control sobre como se ve, ángulo, colores, altura, etc. Los datos se alimentan desde un archivo de texto o bien pueden ser alimentados dinámicamente. Puedes usarlo de forma gratuita sólo que te dejan una liga en la parte superior de la gráfica. Si no te importa esto puede ser una buena opción.

Sitio web Los Santos Residencial

Recién terminé este sitio para Los Santos Residencial, una colaboración entre Miguel Ayala y Trost.

A nivel de código el sitio fue relativamente sencillo pero presetnó algunos pequeños retos con el CSS. Usé más flash de lo que normalmente uso pero creo que la dosis de flash que tiene le ayuda. El sitio esta hecho completamente en XHTML + CSS y validan :). Sitio de Los Santos Residencial.

Posicionamiento con CSS

Excelente tutorial para conocer de la A a la Z el posicionamiento con CSS. Learn CSS Positioning in Ten Steps.

cssremix.com rediseña

Acabo de darme cuenta que cssremix cambió su diseño, a mi en lo personal me gustaba más el anterior, ¿ustedes qué piensan?