Un tema frecuente en el diseño web es la problemática de usar fuentes fuera de las “estándar” como Arial, Helvetica, Times New Roman, etc, incluso cuando la recomendación de la W3C para disponer de ellas mediante CSS y la regla @font-face tiene ya bastante tiempo. Los diseñadores web optaron por técnicas alternativas como remplazar los textos de los títulos con imágenes o mediante el uso de flash y javascript (sIFR), aunque esto signifique perder accesibilidad para el usuario, además de no indexar ciertas partes del documento en los buscadores.

Afortunadamente los navegadores “modernos” han habilitado la opción de poder indicar mediante un enlace descrito en CSS la fuente que queremos usar (por fin se usa @font-face), así que estás técnicas alternativas que menciono en el primer párrafo quedaran en el olvido. Por consecuencia y en teoría, el diseñador tendrá mayor libertad “creativa”.

El problema que acarrea esta nueva técnica lo mencionan en el blog de Typekit:

Mientras está técnica es realmente sencilla, legalmente es más ambigua. Casi todas las fuentes están protegidas por los derechos de autor (incluso las que se ofrecen gratuitamente), solo algunas te permiten enlazarlas vía CSS o redistribuirla en la Web. Es comprensible, las fuentes representas horas incontables de una labor finamente detallada. Por lo tanto, los diseñadores están preocupados de perder el control de su trabajo.

Bueno, los mismos Typekit presentan la solución que ha traído bastante discusión porque muchos piensan que se aplica un tipo de DRM.

Typekit trabajara con las casas diseñadoras de fuentes para desarrollar licencias que funcionen únicamente en el uso de las fuentes en páginas Web. Tendrás acceso a una librería (de Typekit) de fuentes de alta calidad. Simplemente tendrás que agregar una pequeña linea de código en tu documento (HTML) indicando la fuente que quieras usar.

Ellos mismos indican que la tecnología que están usando esta lejos de ser intrusiva o que se acerque al tan temido DRM. En este momento sen encuentran en fase de pruebas, pero ya ha dado mucho de que hablar. Habrá que esperar qué tan accesibles sean los precios, qué tan extensa sea su librería y que tan bien funcione.

Les recomiendo algunos artículos con el tema o relacionados:

• Ubiquitous web font embedding just got a step closer
• CSS @ Ten: The Next Big Thing
• Web Fonts, fuentes descargables para la web

Tan no complicado es, en los fundamentos básicos, que lo puedes aprender desde tu computadora si tienes la voluntad y totalmente en español por si fuera poco. Sin embargo, hay muchos tutoriales en la red desactualizados que recomiendan usar prácticas no muy habituales estos días, como usar elementos HTML para cosas que no han sido concebidos o peor aún, usar algunos elementos que ya han sido desaprobados por la misma W3C, eso y entre otras cosas que descubriras. Y si por cualquiera de los casos tuvieras la necesidad de usar uno de esas “malas prácticas” por lo menos entender porqué lo estamos haciendo. Aunque también es cierto que no hay que tomarse todo tan estricto en esto de los estándares web como bien menciona Jeff Croft.

Bueno, para aprender desde el principio:

• Saber de que trata HTML y CSS, que mejor que HTML con clase primero y en seguida el manual CSS de Carlos Benavidez.
• Después nos leemos el Manual de Belén Albeza para repasar y actualizar lo aprendido, además de permitir ver como estas dos especificaciones o recomendaciones trabajan juntas. Igualmente nos ayudara a introducirnos al XHTML que digamos funciona de la misma manera que el HTML y comparte el mismo objetivo: “estructurar contenido”.
• Si tenemos dudas en el camino siempre podemos consultar las especificaciones de la misma W3C traducidas por SIDAR HTML 4.01 y CSS 2. O bien consultar pequeñas guías de referencias, en el caso de estar con CSS bajar la chuleta de Ateneu Popular.
• Aprendido lo básico y por si quieres profundizar en el tema están los libros gratuitos para imprimir o leer en linea de librosweb.es sobre XHTML y CSS. Si lo tuyo son los blogs puedes consultar a Diseñorama o CSSLab para técnicas mas avanzadas.
• También es siempre bueno preguntar y para eso están los Foros del Web (yo tenía el nick de Opeth pero hace unos ayeres que no entro).

Todos esos enlaces son sólo algunas recomendaciones que tenía guardados por ahí, si buscas en San Google seguramente encontraras mucha más información útil ya publicada por gente totalmente desinteresada.

La mayoría son sitios de diseñadores, por eso en ciertos aspectos creo que tratan de experimentar, digo, no veo como lo aplicarían a sitios más comerciales como los blogs de una red de blogs, que cabe decir la mayoría de estás que encontramos en español no les vendría mal una mano de gato, en Xataca de Weblogs SL han hecho el intento con Veerle Pieters. A lo que me refiero es que por lo menos hagan el intento que su publicidad no sea tan molesta o “intrusiva”, maldito AdSense que feo eres.

Hey, no digo que por colocar publicad inmediatamente te convierte en algo desagradable para la vista, de hecho varios de estos blogs cuentan con publicidad, el objetivo es lograr que no desentonen con la “estética” de la bitácora.

A continuación una pequeña lista de blogs que me gusta su diseño, ni es una lista de los mejores (que podría ser), ni cualquier otra que se asemeje.

A Brief Message

Cuando llegas a A Brief Message entras directamente al post, puedes comentar inmediatamente sin tener que presionar el enlace del título. Un diseño minimalista que irradia elegancia a placer. Detrás de el está nada más y nada menos que Khoi Vinh de Subtraction, por eso el notorio uso de la retícula. También es interesante la dinámica del sitio, pequeñas críticas y opiniones de diseño en menos de 200 palabras.

Naz Harnid

De los diseñadores jóvenes más talentosos que he conocido recientemente. Alucinante el cuidado en los pequeños detalles y la paleta de colores, que en conjunto hace bastante cómoda su lectura.

erraticwisdom

Me gusta este diseño porque todo esta centrado en el contenido, si quieres saber algo más tienes a lado la barra lateral para desplegar. En especial me gustan esos títulos de gran tamaño y el patrón del fondo.

SuperflousBanter

Nunca pensé que el naranja fuera tan placentero verlo en pantalla. El único problema que veo es forzosamente presionar en “continue reading” en cada artículo.

Jon Tan

Este blog lo conocí por Rude. Casi ningún color, sólo un tipo de fuente (serif), todo los textos jerarquizados por tamaños (algo que se olvida hacer adecuadamente) y tonalidades de grises. Simplemente genial y por si fuera poco su contenido es magnifico.

Carsonified

Prácticamente fui viendo como construían el diseño del sito, además de ser uno de los tantos blogs que sigo desde mi lector puedo decir que pertenece a una de las compañías que más admiro.

31Three

El blog de Jesse Bennett-Chamberlain es sin ninguna duda uno de mis favoritos, favoritos… esos paleta de colores me mata.

Simplebits

Lo que me sorprende de este diseño es que enseña todo lo que hace la compañía en una muy pequeña área, para después continuar de lleno a lo que es el blog. Esta es digamos una segunda versión de su diseño anterior, la cual ya era estupenda.

Design View

El blog de Andy Rutledge es pura calidad en cuanto a contenido y diseño se refiere. Una de las cosas a destacar en este re-diseño es como se muestra los post más nuevos de los viejos, cambiando estos de tamaño de texto y color. Recientemente en Typesites analizaron tipográficamente el diseño.

Más excelentes diseños de blogs:

• BestWebGallery
• 47 Must See Great Blog Designs
• 45 More Excellent Blog Designs

Con el tiempo y la adquisición de Macromedia Fireworks fue un poco abandonado, de hecho creía que iba a tomar fuerza e Image Ready desaparecería inmediatamente (ya lo hizo en la suite CS3), porque no sé cual era la diferencia de editar una imagen en Photoshop presionando Ctrl+Alt+Shift+S (Cmd+Opt+Shift+s) que abrirla en el decepcionante Image Ready, en realidad Photoshop es bastante ineficiente en lo que a optimizar imágenes para web se refiere, lo que hace con “los PNG” es un buen ejemplo.

Pero Fireworks podría retomar fuerza, según Jason, sí (entre las destacadas):

• Añadieran un motor de interpretación (rendering) que entienda CSS y medidas relativas (em, %)
• Funciones para manejar las imágenes y textos como elementos envolventes y que respeten el flujo del documento más que islas de contenido que necesitan ser coladas individualmente
• Librerías de elementos de las interfaces de los distintos navegadores para usar en composiciones

Por otro lado y por el contrario, el otro artículo que leí “Enterprise Fire-Flow” de Nathan Smith, rescata algunas bondades de Fireworks. Él cita y menciona:

• “Si Photoshop es la herramienta para fotógrafos expertos, Fireworks es el instrumento para Profesionales Web”
• Un beneficio es que el formato “nativo” de Fireworks es PNG y permite trabajarlo en capas, lo que reduce el tamaño del documento comparándolo con el formato PSD de Photoshop
• Siendo PNG un archivo que manejan más programas lo hace más “portable”, ahorrando tiempo en conversión de formatos y permitiéndote hacer cambios más rápidos a los bocetos de interfaces
• Puedes crear páginas múltiples en un sólo documento, dando la posibilidad de crear todo el aspecto visual de un sitio
• Cuando divides/cortas tu imagen para pasarla a HTML y CSS, nadie gana a Fireworks en términos de compresión de imágenes
• Photoshop no puede leer archivos PNG con capas. Fireworks puede (parcialmente) leer y editar documentos PSD.

Con todas estas ideas y opiniones sobre Fireworks, todavía pienso que sigue rezagado como el programa ideal para el diseño web (en lo que a maquetar respecta). A mi me encartaría que Fireworks fuera el InDesign para Web, el que se encargue de poner las cosas en orden de lo que haces en Photoshop o en Illustrator, que te permita crear retículas para cada documento, que maneje los estilo de caracteres y textos como lo hace grandiosamente InDesign pero con las especificaciones CSS, que te permita crear mapas de navegación, etc.

Nota: En “maquetar” me refiero a diseñar visualmente la interfaz, el “código” final CSS y HTML sería en un programa especializado como Dreamweaver, Coda, NotePad++, Textmate, etc.

- Para el tipógrafo:
Em es un tipo de espacio que puedes usar para “sangrar” la primera línea de un párrafo.

– Para el diseñador de tipos:
Em es el espacio de diseño donde un carácter es dibujado.

- Para el ingeniero de software:
Em es una unidad sin dimensión para representar la forma de un carácter y el espacio de información.

- Para CSS:
Bueno, esto no lo explicaron. pero se me hace interesante lo que dice este documento de W3C “The amazing em unit and other best practices“.

“En CSS, la unidad Em es una unidad general para medir longitudes. Por ejemplo, los margenes y rellenos (padding) alrededor de los elementos. Tu puedes usar ambos horizontal y verticalmente, y esto es lo que desorienta a los tipógrafos tradicionales, ya que ellos han usado “Em” exclusivamente para medidas horizontales”.

Cuando abrí notepad++ me cansé de ver Courier como fuente predeterminada de texto, así que fui en búsqueda de alguna alternativa, hasta que finalmente llegue al estupendo y perfecto artículo de “The Typography of Code” por the hamstu vía i love typography.

Empecemos con un poco de historia. Courier fue creada para IBM por Howard G. Kettler en 1955, una tipografía diseñada para usarse en máquinas de escribir de aquella época. Pertenece a la familia monoespaciada (monospace o no proporcional), tiempo después fue rediseñada por Adrian Frutiger para misma la IBM, posteriormente se incluiría en Windows 3.1. Lo que distingue este tipo de fuentes de las demás, son que todos sus caracteres tienen un mismo ancho, esto significa que la letra “i” ocupa el mismo espacio que la “m”.

Las fuentes no proporcionales, como la Courier, son adecuadas para:

“Mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc… También son más adecuadas para la entrada de datos en las cajas de texto de formularios porque es mas fácil ver los errores por la mayor separación entre letras.”  ainda.info

“Como fuente monoespaciada ha adquirido un nuevo uso en el mundo electrónico en situaciones donde las columnas de caracteres deben estar consistentemente alineadas”
Wikipedia

Estas pueden ser algunas de las razones del porque la popularidad de las fuente monoespaciada entre los programadores. Además, obviamente, ser más legible para el tipo de texto que se usan en los códigos de programación y que permiten “maquetar” más fácilmente el texto por tabular.

Comentaba en un principio que buscaba un remplazo de Courier, la razón principal era para ganar legibilidad en mis archivos CSS y HTML. También por que las mayorías de mis notas las hago en Notepad++, ya que hace un tiempo no uso Word (no por radical, sencillamente empece, me acostumbre y me gusto), y lejos de argumentos “técnicos”, me harté de esta fuente.

En el artículo The Typography of Code para mi fortuna, hacen repaso de algunas de mejores fuentes monospace, de las que menciona son dos con las que me quedo y lo mejor de todo, las dos gratuitas, que inconscientemente ya tenía instaladas.

Courier New

Una imagen de la fuente que quiero remplazar, en realidad no es mala, de hecho viene como fuente predeterminada de varios programas y hasta el 2004 era la tipografía estándar del Departamento de Estado de Estados Unidos (la remplazaron con la Times New Roman, mmm…).

Consolas

Que buena fuente diseñada por diseñada Lucas de Groot, sobre todo en tamaño reducido. La consigues simplemente al descargar e instalar el visor PowerPoint 2007, que en un principio lo use para otro fin. Por defecto viene en Windows Vista y para instalarlo en Linux Alex Sancho tiene la respuesta.

Bitstream Vera Sans Mono

Una tipografía diseñada por Jim Lyles con licencia libre, por eso DejaVu, una variante de ella, viene instalada por default en GNU/Linux. Todas las variantes de Bitstream Vera las puedes descargar gratuitamente. La peculiaridad de la fuente es ser un poco más alta en su línea vertical que las demás, por eso la impresión de estar, valga la redundancia, alta.

A modo de conclusión, fuera Courier bienvenida Consolas. Sí, no hay más.

Más información y enlaces de interés:

• The Typography of Code | the hamstu. Estupendo artículo, con mucha información útil, sobre todo si realmente eres programador .
• Finding the Perfect Programming Font | Command-Tab. Otra comparación de fuentes inspirada en el primer enlace, pero aquí podemos encontrar fuentes usadas en las Mac, como Panic Sans del programa Coda.
• Fuentes gratis, cortesía de Microsoft | Yukei. Fuentes que puedes descargar, además de la ya comentada Consolas.

Pues días después podemos encontrar un artículo en Vitamin para saber como se creo dicho efecto, desde el código CSS hasta el orden de las imágenes PNG, “How to recreate Silverback’s Parallax“.

El otro “truco” en CSS que me gusto mucho lo conocí por medio de WebAppers, en cual podemos ver un vistoso efecto de desenfoque (blur) en el menú cuando colocamos el cursor sobre él, es mejor que lo veas en “vivo“. Acá el artículo para recrearlo Advanced CSS Menu Trick.

“Typesite es una exhibición quincenal de páginas con un interesante diseño en la tipografía… enfocándose en trabajos que inspiren y enseñen“

De momento sólo encontramos dos sitios, pero uno es el bello blog de Jesús Velasco, seguramente lo debes conocer, diseñado por el extraordinario diseñador (¿español?) Miguel Ripoll, el cual está bajo la lupa y análisis de otro gran diseñador Elliot Jay Stocks.

Sin duda un nuevo sitio para colocar en nuestro lector de feed (sí, ya no me voy a quejar).

Por otro lado y para seguir con buenas costumbres en el uso de la tipografía en el diseño web, recientemente en .net, una revista de diseño, publicaron un tutorial para descargar gratuitamente en pdf con consejos sobre CSS para mejores textos, “Better Web Typography.

La instalación es mu sencilla, en propias palabras de Intenta:

• Arrastramos el enlace del botón “Design“, que aparece en la web oficial, a nuestra barra de favoritos o lo añadimos manualmente a nuestros marcadores y favoritos.
• Cargamos la web que deseemos y hacemos click sobre el marcador “Design” que previamente habíamos añadido.
• El paquete se carga y hacemos click sobre el componente que deseemos utilizar.

Los componentes son una retícula, una regla (guías), una unidad (para medir entre dos punto) y una cruz. Solo debemos presionar sobre el icono en el panel que nos aparece.

El bookmark funciona para

• Internet Explorer 7
• Firefox 2+
• Safari 2.0.4+
• Opera 9.2+

No hay soporte para IE 6 “Design y sus componentes son diseñadas y desarrolladas para diseñadores web, no para tus clientes” jeje.

Leyendo un blog de Sitepoint conozco una extensión para Firefox de su propia creación. Con Dust-me Selectors, en su versión 2.0, podremos saber que selectores en nuestras hojas de estilo (CSS) no están siendo usados y viceversa.

Así es como trabaja:

La extensión extrae todos los selectores de todas la hojas de la página que estés viendo, y analiza cuales selectores no están siendo usados. La información se almacena asi que cuando analices páginas subsecuentes, los selectores pueden ser tachados de los hallados. Además de que puedes usarla para comprobar páginas individualmente o sitios enteros.

Más información:

• Sitio oficial Dust-Me Selectors
• Preferencias de la extensión
• Interface

Bastante bien para saber que se puede borrar y ahorrar un poco de espacio en las hojas, y también puede servir de complemento a la reciente lista que hicieron en Maestros del web “Extensiones para Firefox que todo desarrollador debe tener“.

Por cierto, para utilizar esta extensión sólo debemos presionar el botón rosa que aparece en la barra de estado en la parte inferior del navegador o bien, desde el menú herramientas.