Body Type
Update: I have released most of the code for this project so that you can take a look. Send any improvements! ;)
A typeface is an environment for someone’s expression: using typefaces we write documents, create posters and subtitle movies. We follow the type creator’s restrictions and design decisions (kerning, spacing, proportion) when using her fonts. Good typefaces are created by highly-skilled people and can take several years to create. Body Type aims to allow anyone to create a highly expressive and personal typeface using only their body and hand gestures.
Body Type is an excercise on freestyle computing and was built using OpenFrameworks, the Microsoft Kinect sensor, OpenNI, FontForge, Potrace, ImageMagick, PHP, TouchOSC and the Apple iPhone.
Background
This project builds on a previous exercise on generative art that made use of the Kinect OpenNI skeleton system to create letterforms. I decided to take the idea further and create a self-contained application that would allow anyone to create a TrueType font using their body and gestures. The software should allow people to create type using their body in a way evocative of light painting photography:
Technical information
Body Type was created using the Microsoft Kinect sensor which was controlled by a C++ application created using openFrameworks and its OpenNI extension. This allowed for the 3D input received from the sensor to be converted into variable-width outlines and skeletons. The next issue was creating a TrueType font (.TTF file) from these silhouettes. The font-generation process goes through several stages in order to achieve this:
- Using openFrameworks to generate a black and white bitmap representation of each letter.
- ImageMagick is used to convert the image to a format compatible with FontForge.
- FontForge makes use of Potrace to vectorize the bitmap and then generates the final letterform and font.
- Since Body Type was displayed in the STUDIO for Creative Inquiry as part of an exhibition, web functionality was added so that font-creators could send themselves the resulting files. PHP was used to create a compressed ZIP file of all image and TTF files and send it to the specified email address.
The created font has six different possible parameters to determine a letterform’s visual attributes: skeleton lines, skeleton dots, line width, upper body, lower body and hand trails. Since controlling these parameters would be quite complicated to do by using gestures or on-screen menus, a TouchOSC iOS overlay was created to allow remote control via Open Sound Control:
Results
During the STUDIO exhibition dozens of fonts were created. Below are samples of some of them.
By Terry Irwin
By Shawn Sims
By Heather Knight (dingbats)
By Cong Ma (chinese characters)
By Haakon Faste
Creating the font is just part of the process. A font is made to be used. This project acknowledges the limitations of the fonts created both technically (since they lack proper letter spacing) and alphabetically (since they contain only representations for letters A to Z and numbers 0 to 9). However, these fonts allow for “freestyle” graphic experimentation:
By Paulo Pinto
Further work can be explored creating complete characters sets.
This project was done as part of the requirements to complete the Spring 2011 Interactive Art and Computational Design course with Professor Golan Levin in Carnegie Mellon University.
Body Type
UPDATE: “Light painting” test:
NUEVO: Prueba con “dibujo con luz”:
–
Body Type is a body-based font generator using OpenFrameworks, OpenNI and the Kinect sensor.
Project for the Spring 2011 Interactive Art & Computational Design course in Carnegie Mellon University
golancourses.net/2011spring/
–
Body Type es un generador de tipografías basadas en el cuerpo que usa OpenFrameworks, OpenNI y el Kinect.
Proyecto para el curso Interactive Art & Computational Design en Carnegie Mellon University
golancourses.net/?2011spring/
mga bold
mga outline
Jeffrey Zeldman, Milton Glaser, Shigeru Miyamoto
Tres reconocidos personajes representando tres mundos diferentes:
Jeffrey Zeldman — mejor conocido por su revista web A List Apart, ha sido nombrado King of Web Standards (rey de los estándares web) por la revista BusinessWeek. Zeldman se convirtió en una celebridad luego de escribir Designing with web standards en el 2003. Como cofundador del Web Standards Project Zeldman contribuyó a la creación de estándares sobre los cuales se deberían crear los navegadores web: sin un estándar, empresas como Microsoft y Netscape creaban los navegadores que les daba la gana (algo como “mi navegador hace esto que el otro no hace… usa mi navegador”) y los diseñadores/desarrolladores web nos veíamos obligados a crear múltiples versiones de los sitios web (algo que todavía sucede pero en un menor grado… aunque ¿alguien ha podido ver Yahoo! Music en Firefox?). Recomiendo ver el slideshow que acompaña el artículo.
Posiblemente conozcan el logo arriba. Fue diseñado por Milton Glaser, uno de los más importantes e influyentes diseñadores gráficos (y de quien ya se había hecho mención acá). La revista Foro Alfa tiene en su más reciente número digital una transcripción de una charla que Glaser, ya por sus 78 años, dió a la AIGA en Londres llamada “Diez cosas que aprendí”. Algunos apartes:
Desafortunadamente nuestro campo, el así llamado creativo (odio esa palabra porque se suele usar mal, odio el hecho de que se la use como sustantivo, ¿te imaginas llamar a alguien creativo?) [...]
Soy un gran defensor del dibujo, no por haberme convertido en ilustrador, sino porque creo que el dibujo cambia el cerebro de la misma forma en que encontrar la nota correcta cambia la vida de un violinista. El dibujo te vuelve atento, te hace prestar atención a lo que ves, lo cual no es tan fácil.
Las creencias profundamente arraigadas de cualquier tipo evitan que te abras a experimentar, y es por eso que encuentro cuestionable a toda posición ideológica sostenida con firmeza. Me pone nervioso cuando alguien cree demasiado en algo. Ser escéptico y cuestionar toda convicción arraigada es esencial. Por supuesto hay que tener clara la diferencia entre escepticismo y cinismo, porque el cinismo es tan restrictivo a la propia apertura al mundo como las convicciones apasionadas: son como gemelos. En definitiva, resolver cualquier problema es más importante que tener razón.
Siguiendo con el feeling existencialista de la charla de Glaser está este divertido video/animación creado por Clemens Kogler, diseñador austriaco de 25 años, que es una rara combinación entre Nietzsche y PowerPoint:
Si reconocen el personaje de arriba conocen el trabajo de Shigeru Miyamoto. Este japonés es el padre de Mario, Donkey Kong, Zelda y demás personajes y juegos de Nintendo. Es la cabeza detrás del enormemente exitoso Wii (del cual se ha hecho mención anteriormente acá). Fue nombrado caballero de la Legión de Honor por el gobierno francés y recientemente El Mundo de España publicó una entrevista con él [vía]:
Cuando tengo una idea no es exclusivamente para un juego. Es una idea general sobre algo que luego trato de implementar en un juego. No hablo con los ingenieros o los especialistas hasta que tengo clara la idea y la solución de cómo aplicarla a un videojuego. Así que mi forma de diseño de juegos está más cercana al diseño industrial que otra cosa. Y ése puede ser uno de los secretos, como dices, de mi éxito.
Para terminar, el primer trabajo de CombatTV (un grupo al cual pertenecen estudiantes y profesores del Departamento de Arte de la Universidad de los Andes) que se inspira y hace homenaje a Game Over (sí… de este también se ha hecho mención acá). En este caso se trata de Breakout, un conocido juego de video de los ochentas:
Larga vida a Helvetica
Actualización 19/10/2009: si cree que domina la diferencia entre Helvetica y Arial puede hacer el quiz. Mi puntaje: 19/20 : / (al parecer tengo un patrón en lo que concierne a actualizaciones).
Actualización 20/3/2009: un blog que recopila 40 diseños muy reconocidos que usan Helvetica.
Actualización 21/12/2008: un artículo en la AIGA que refuta a la creencia general de que Helvética ha sido la fuente “oficial” del sistema de señalización de New York desde hace años:
There is a commonly held belief that Helvetica is the signage typeface of the New York City subway system, a belief reinforced by Helvetica, Gary Hustwit’s popular 2007 documentary about the typeface. But it is not true—or rather, it is only somewhat true. Helvetica is the official typeface of the MTA today, but it was not the typeface specified by Unimark International when it created a new signage system at the end of the 1960s. Why was Helvetica not chosen originally? What was chosen in its place? Why is Helvetica used now, and when did the changeover occur? To answer those questions this essay explores several important histories.
—
Helvetica —pronunciada helvética— es una fuente tipográfica creada por los diseñadores suizos Max Miedinger y Eduard Hoffmann. Su nombre se deriva del nombre en latín de Suiza. Este año (2007) Helvetica se cumplen 50 años de la creación de esta legendaria fuente que se convertiría en una de las más representativas del diseño gráfico moderno. Para celebrar el cincuentenario, Swiss Dots y Veer se unieron para producir “Helvetica: a documentary film“. Dirigida por Gary Hustwit (quien también ha trabajado en proyectos documentales sobre bandas como Wilco y pioneros musicales como Robert Moog, inventor del Moog) el documental incluye entrevistas con destacados diseñadores y el sitio web lo describe de la siguiente manera:
Helvetica encompasses the worlds of design, advertising, psychology, and communication, and invites us to take a second look at the thousands of words we see every day.
Al final de este post hay varios apartes del documental disponibles en YouTube.
Helvetica tiene muchos amigos; en MySpace ya tiene 3195. Khoi Vinh, quien ha sido mencionado anteriormente en este blog, diseñó una camiseta homenaje a Helvetica:
Cuando Apple creó el primer Mac en 1984, Helvetica fue incluida con el sistema operativo (pagando una licencia a los diseñadores que la crearon) contribuyendo a la popularidad de la fuente.
Arial es una fuente que muchos creen es basada en Helvetica pero no tan elegante. Al lanzar Windows 3.1, Microsoft optó por licenciar Arial en lugar de Helvetica (posiblemente por ser una licencia más económica) a pesar de ser esta última la más utilizada. Windows resultó ser un éxito y, por consiguiente, Arial se convertiría en una “hermana bastarda” de Helvetica, “usada por los no-profesionales”. Esta rivalidad Helvetica-Arial ha generado varios artículos y hasta un juego donde las dos fuentes luchan por la supervivencia (uno es Helvetica, por supuesto). También hay un libro-homenaje a la fuente. En términos web nos toca conformarnos con una coexistencia de ambas fuentes.
Hablando de tipografía, encontré este blog del diseñador y tipógrafo chileno Juan Pablo de Gregorio. Tiene muchos tutoriales y tips de diseño y tipografía y está en español (también tiene una versión en inglés).
Entrevista con Wim Crouwel:
Experimental JetSet:
Neville Brody y Rick Poynor:
Erik Spiekermann:
La retícula es tu amiga
La retícula tipográfica (bien) aplicada a la creación web permite ampliar las posibilidades de diseño a la vez que mantiene la estructura y jerarquía visuales de los elementos. Los primeros navegadores fueron desarrollados con un mínimo de funcionalidades tipográficas. En 1996 se introducen las hojas de estilo (CSS) que permiten un mayor control en términos de diseño aunque no fueron adoptadas por sitios web importantes sino hasta 2002. En vista que hoy día la gran mayoría de usuarios web tiene un navegador decente (entiéndase esto como Firefox, mi preferido, Opera, Safari o en su defecto Internet Explorer 6 o superior) que puede mostrar las hojas de estilo con cierta precisión, se ha dado un resurgimiento de los conceptos tipográficos elementales, esta vez aplicados al diseño web. Algunos ejemplos:
Mark Boulton tiene una guía para la generación de retículas que empieza explicando las retículas impresas y termina con estos conceptos aplicados a la web.
Khoi Vinh, director de diseño del New York Times Online, dió recientemente una charla en SXSW junto con Boulton donde detallan el proceso de diseño de un sitio web imaginario tomando como base el contenido de Yahoo!. Tiene un excelente post en su blog explicando el rediseño que incluye la presentación en PDF (vale la pena bajarla). Vinh también tiene otro post donde explica el diseño de su blog e incluye un tip para asegurarse que los elementos están quedando alineados mientras se diseña.
Richard Rutter tiene una guía principios de tipografía básicos aplicados a la web que vale la pena leer. Se recomienda también la bibliografía.
Finalmente, en A List Apart hay un artículo que explica una forma de usar una retícula vertical basada en el interlineado.
Actualización: Andrew Ingram ha creado un plug-in para Adobe Fireworks y Adobe Photoshop que permite crear retículas. GridMaker para Adobe Fireworks, GridMaker para Adobe Photoshop. Hay una versión 2, por ahora solo para Photoshop.
Actualización (17/11/09): Blueprint es un framework gratuito para diseñar usando retículas CSS que facilita el trabajo de diagramación que algunas veces puede ser tedioso.