Alternativas a Helvetica

Stephen Coles, editor del magazin Font, publicado por Fontshop, y además del anteriormente muy activo blog Typographica, acaba de publicar un artículo sobre Alternativas a Helvetica.
Este tema merece una especial consideración: en muchas ocasiones queremos una tipografía lo más discreta posible, casi invisible. Lo más cómodo y rápido es sin duda elegir Helvetica (o su clon deficiente, Arial.)

Ahora bien, Helvetica es una de las tipografías más vistas de la historia, y no ayuda el hecho de que figure en documentos de visión por lo menos poco agradable (formularios de impuestos, por ejemplo.) Se ha sobreutilizado mucho, y estuvo exageradamente de moda en los diseños al estilo escuela suiza de los años sesenta y setenta.

Por todos estos motivos, vale la pena tomarse un momento más para elegir alguna de las muchas alternativas existentes en una colección tipográfica. Hay decenas de fuentes sans serif discretas y utilitarias que pueden sustituirla con éxito. Mi favorita es Univers, el diseño de Adrian Frutiger. Superficialmente parecida a Helvetica, en realidad está llena de pequeños detalles que la hacen mucho mejor. También utilizo mucho Franklin Gothic, aunque en este caso hay muchas más diferencias. En el artículo, Coles examina una variedad de diseños tipográficos que uno puede emplear tanto para textos extensos como para titulares u otros elementos.

Otro artículo similar: Typographic Alternatives to Helvetica, en el blog Some Random Dude. También encontramos una discusión sobre este tema en el foro Typophile.

Las mejores 100 tipografías de la historia


Una página en alemán (Die 100 besten Schriften aller Zeiten) , que vale la pena visitar aunque no entendamos mucho la lengua germánica, puesto que se trata de una esmerada selección de tipografías útiles para una gran variedad de proyectos, realizada por un grupo de grandes expertos, tanto diseñadores como tipógrafos. Algo que sin duda va a venir muy a mano.

Esta publicación (32 páginas) está disponible en forma impresa para todos los residentes en Alemania, y Fontshop la envía de forma gratuita. También se puede descargar el contenido del sitio en un documento PDF (6.8 MB). La selección evidentemente es discutible y cada uno podría variar una parte de la lista, pero sin duda una parte significativa de las fuentes de esta relación se mantendrían constantes si preguntáramos al colectivo de profesionales del diseño gráfico y buenos conocedores de la tipografía.

Cómo optimizar páginas web para imprimir a la perfección

Cuando deseamos imprimir un artículo en una página web que nos interesa especialmente, con frecuencia nos encontramos que la página impresa contiene muchos elementos innecesarios.

Lo mejor, para empezar, es acceder a la vista previa del documento (en Archivo > Vista previa de impresión) Si el código html está optimizado para la impresión, aparecerá una versión especial para imprimir en la vista previa, en la cual se han suprimido los elementos innecesarios e incluso, la tipografía está definida para una óptima impresión.

Si los desarrolladores del sitio han incluído una hoja de estilo optimizada para impresión, nos encontraremos con algo como la imagen siguiente al acceder a la vista previa del documento (el ejemplo es una página de A List Apart):


La miniatura de la izquierda es la página como se ve en el navegador; a la derecha, su vista previa de impresión. Está claro que en este caso no hace falta hacer nada para que nos quede bien la copia impresa.

Pero si la página no cuenta con una versión especial para imprimir en su hoja de estilo, seguramente la hoja impresa aparecerá igual que en la pantalla, lo cual supondrá un desperdicio de tinta, papel y además, llenar el documento de cosas inútiles.

En primer lugar, debemos deshacernos de los elementos innecesarios. ¿Cómo? Y además ¿cómo hacerlo si uno no tiene conocimientos avanzados de HTML o CSS? Realmente, hay varias formas posibles de conseguir lo mismo, de manera que comentaremos en primer lugar la forma más sencilla de conseguir una impresión optimizada.

Podemos empezar con un sencillo bookmarklet o favelet. Un bookmarklet / favelet no es más que un código Javascript que se ejecuta al hacer clic en un enlace que se puede guardar incluso en la lista de favoritos (bookmarks); de ahí el nombre. Para nuestros propósitos, necesitamos un favelet que efectúa una operación con los objetos que constituyen la página, haciendo por ejemplo invisibles los elementos que se desee ocultar. Por ejemplo: click2zap o Mypage.

Mientras se ejecute aparecerán unos botones en rojo en la parte superior derecha. Enable / disable activa o desactiva el script. Si está activo, con un clic se elimina la parte del documento sobre la que nos encontrábamos, la cual previamente se ha resaltado con un fondo amarillo, como vemos en el ejemplo siguiente:

Como podemos ver, haciendo clic en esta lista de enlaces la haríamos desaparecer del documento (en su versión guardada en a memoria; evidentemente, esto no afecta para nada a la página original).

La misma página después de eliminar las barras de navegación, listas de enlaces y otros elementos que no interesa mantener en la copia impresa:

Y al hacer clic en la vista previa del documento, aparece completamente limpio:

Los otros dos botones, Print y Undo sirven, respectivamente, para imprimir la página y para deshacer la última operación de eliminación de objetos de la página.

Otra forma, aún más versátil, de optimizar la impresión de una página web es utilizar la extensión Aardvark, ya comentada en un artículo anterior. Esta extensión funciona con Mozilla Firefox. ¿Es posible que aún no lo utilice alguien? Aardvark se puede activar con el botón derecho en cualquier página y desde ese momento, al hacer clic en cualquiera de los objetos que forman la página, este queda seleccionado para efectuar con él una de las operaciones siguientes:

  • Eliminar el elemento: tecla R
  • Aislar el elemento: tecla I
  • Convertir a blanco y negro: tecla B
  • Eliminar los anchos fijos para el elemento: tecla D
  • Seleccionar un área mayor o menor, con W o N.
  • Salir de Aardvark, con la tecla Q

Aún hay otros comandos de interés para el desarrollador; para conseguir una versión impresa optimizada las operaciones que nos interesan son estas.
De modo que gracias a Aardvark, en unos pocos clics podemos pasar de una página que resulta fatal para imprimir a una versión totalmente optimizada. La extensión Scrapbook, diseñada para tomar notas organizadas y coleccionar páginas web o fragmentos de las mismas, también dispone de funciones para eliminar elementos no deseados.

Si queremos guardar una copia en PDF de este documento ya optimizado, basta imprimir con la impresora virtual PDF writer o Distiller (con Adobe Acrobat), con PDF Creator (gratuito) o con cualquier impresora PostScript y después generar el PDF con Ghostscript + GSView (también gratuitos).

Como comentábamos antes, existen otras formas de alterar un documento html y su código CSS para que se imprima de la major manera posible. Aquellos que tienen conocimientos de programación pueden crear sus propias hojas de estilo para impresión a medida. En el artículo Imprimir a medida del Manual de diseño digital se explica una forma de crear una hoja de estilo optimizada para impresión a medida.

Finalmente, no está de más recordar que aún se puede ahorrar papel imprimiendo a doble cara y, si es posible, dos páginas del documento por cara. Sólo hace falta seleccionar las opciones correspondientes en la impresora o, si a impresora no tiene opción de doble cara automática, tomarse la pequeña molestia de imprimir primero las hojas impares y luego las pares.

Sobre diseño editorial

Maquetadores es una iniciativa similar a newsdesigner.com, esto es, un blog donde se analiza el diseño editorial de publicaciones periódicas de muy distinto tipo. Con la ventaja añadida de estar en castellano. Un blog también muy recomendable es visualmente, en el que Dolores Pujol y Norberto Baruch analizan diferentes aspectos de la comunicación visual. Si conoceis algún otro recurso semejante, podéis compartirlo aquí añadiendo un comentario.

{Categorías: diseño, tipografía}
(estas categorías aún no contienen la totalidad de posts de esta bitácora; todos los nuevos artículos sí estarán categorizados y con el tiempo, también los anteriores.)

Índice detallado de la ampliación del Manual de Diseño

muestras de las páginas de la ampliación

Hemos incluído un sumario completo y detallado de todos los contenidos de la ampliación de nuestro Manual de Diseño Digital. Se trata de un fichero zip que contiene cuatro documentos en PDF, uno para cada sección —general, diseño gráfico, diseño web, tipografía— que detallan minuciosamente los contenidos del ebook que se puede adquirir exclusivamente en nuestro sitio.

Puesto que el manual está formado por más de 200 páginas y 125 ilustraciones comentadas, este índice puede dar una idea clara de lo que contiene.

Juegos con la tipografía y fotografías gratis

Es lo que ofrecen en Fontplay: por un lado una extensa colección de imágenes “fontplay” en las que se muestran diversas tipografías en uso, y por otro lado una amplia colección (más de 3000) de fotografías originales y sorprendentes que se pueden utilizar libremente, tanto en proyectos comerciales como no comerciales.

Galerías tipográficas

Metido en un proyecto de fotografía de rotulación urbana y tipografía en uso, he recordado dos magníficos archivos en internet con muchísimas imágenes de este tipo. Se trata del typemuseum y de las galerías de typophile (en este caso, junto con otros interesantes proyectos relacionados con la tipografía.)