Dana 2.0, una tipografía modular responsive de Ana Estrada

El entorno web requiere cada vez más tipografías adaptativas. Ana Estrada es diseñadora especializada en UX/UI y desarrolladora frontend, y pensando en estas nuevas necesidades, ha diseñado Dana 2.0, una tipografía modular responsive disponible para su descarga en la web DanaFont. Un proyecto experimental y complejo y que ha sido reconocido con un Laus oro 2018 en la categoría Digital. 

Dana 2.0, una tipografía modular responsive de Ana Estrada
El proyecto Dana 2.0 surge como respuesta a la necesidad de dinamismo en la tipografía web. «El objetivo principal es la creación de un framework tipográfico responsive que responda a las necesidades actuales del lenguaje web», explica Ana Estrada. «Propongo una tipografía modular responsive creada a modo de framework a partir de HTML (SVG), CSS (animaciones) y JS, para desarrollar proyectos adaptativos web». Así, esta fuente consta de 4 alturas con el mismo peso y que varían según el dispositivo en el que se visualice.

«Lo que diferencia esta fuente es su aspecto adaptativo. Se genera una tipografía responsive que no cambia de tamaño, sino de configuración. Cada letra se compone de módulos que se redistribuyen para formar otras nuevas, de diferente ancho y altura».

El framework es funcional actualmente, además de la versión web, he creado una versión OTF de la fuente. El proyecto es extensible, pudiendo configurar nuevos módulos para crear más fuentes, generando otras alturas y pesos.
Dana 2.0, una tipografía modular responsive de Ana Estrada

Un origen experimental
El origen de Dana 2.0 se encuentra en la asignatura de Tipografía Experimental, impartida por José María Ribagorda en la ESDMadrid. «Mis pasiones siempre han sido la cartelería, el diseño web y la tipografía. Por eso, para mi TFG, quería combinar todas ellas», comenta Ana Estrada. «La influencia principal de mi proyecto es el trabajo de Elena Ramírez, diseñadora gráfica y web».

«A medida que investigaba y desarrollaba el primer prototipo, me daba cuenta de las infinitas posibilidades del SVG y el diseño web», afirma.

«Dana Font nació con vistas a su aplicación en identidades visuales flexibles. Y, aunque esa posibilidad no está descartada, lo he enfocado en torno al desarrollo de carteles responsive interactivos. Es el primer paso para la creación de un sistema que permita la interacción en carteles web».

En cuanto al nombre, este tiene tintes seriéfilos. «El nombre de la tipografía ha sido concebido por su estética retro», aclara la diseñadora. «Dana Scully es personaje protagonista de la serie: The X-Files, de la Fox. Ella fue la primera presencia femenina en televisión que, con su fuerte carácter, inspiró a muchas mujeres a luchar por sus metas. El nombre encaja a la perfección con su personalidad, puesto que es una serie que hace referencia a la tecnología analógica y que aborda la presencia alienígena en nuestro planeta. De ahí, el set de iconos que la acompaña y complementa. Además, la tipografía original de la serie: Trixie, basa sus características en la variabilidad de la misma, lo que hace que sea un guiño perfecto al creador: Erik van Blokland, pionero en este tipo de experimentos tipográficos».
Dana 2.0, una tipografía modular responsive de Ana Estrada

Letras modulares
Para la creación de los signos gráficos Estrada diseñó las formas en Illustrator. «A partir de la rejilla que había establecido gracias a la investigación y al proceso de bocetaje, mantuve el concepto de píxel (cuadrado) como base modular principal y empecé sustituyendo las formas que no cuadraban para la concepción final de la tipografía», dice. «Como se puede apreciar, los módulos están basados en formas geométricas primarias: el círculo y el cuadrado que, mediante operaciones booleanas, han dado como resultado otras formas, algo más complejas, que componen la totalidad de la letra».

«No son construcciones muy complicadas, no podían serlo si quería conseguir una animación web fluida y sencilla. Además, cuantas más formas hubiera, más difícil sería poder sustituirlas por otras más adelante, para crear variaciones tipográficas».

Cuadratín tipográfico
Ana ha determinado un cuadratín único, que no varía con los sucesivos cambios que se producen en la tipografía. «Todas las letras (y sus variaciones) están contenidas en una rejilla de 11×12. Así mismo, cada módulo tiene unas dimensiones de 16px, que se corresponde a la medida estándar web: el rem», explica.

Los anchos en cada letra no varían, se trata de una tipografía monoespaciada, ideal para componer y realizar transformaciones, puesto que cada letra ocupa lo mismo en el espacio. Su diseño está determinado en tres alturas con vistas a la nomenclatura web: ascendentes, descendentes y xheight.

Dana 2.0 es una tipografía que no contiene mayúsculas (puesto que éstas se componen de los iconos). Sin embargo, la diseñadora ha establecido las relaciones entre caja alta y caja baja, «debido a que determinados caracteres irán alineados según las proporciones de las mayúsculas», aclara. «Las altura de las ascendentes y las mayúsculas será la misma, no se harán distinciones.

Dana 2.0, una tipografía modular responsive de Ana Estrada

4 alturas
«El proceso de creación de las letras, una vez definidos los parámetros iniciales, fue relativamente simple, puesto que siguiendo las directrices marcadas, ha sido más un trabajo mecánico, que creativo, debido a los módulos reducidos de los que disponía», aclara la diseñadora.

«Con respecto a las vocales acentuadas, he diseñado diferentes tildes, pero para el desarrollo del proyecto utilicé una neutral que podría usarse en diferentes contextos», dice. «He desarrollado 3 juegos de números: mayúsculas, minúsculas y versalitas. Pero creí conveniente programar en la primera versión, los de caja alta, que son los números por defecto de cualquier tipografía. Dejé planteados los otros dos sets para la futura ampliación de la fuente».

«La tipografía, caracterizada por la ausencia de diagonales, dificultó el diseño de un conjunto complejo de signos, por lo que, después de varios intentos, llegué al diseño actual que en contexto se entiende perfectamente y no rompe con la estética global».

Al igual que los iconos, este proceso fue bastante complejo, siempre contienen diagonales. Por este motivo, después de algunas pruebas, Ana desechó la idea de iconos funcionales y empezó a pensar en iconos meramente decorativos. «De ahí surgió la idea de los aliens, marcianitos o monstruitos que diseñé como complemento perfecto para la tipografía».

DIV
El código de cada letra es infinito. Es por ello que, pensando en una mejor experiencia de usuario, Ana ha desarrollado un script que permite, con solo un div, generar el código automáticamente. «Simplemente debe escribirse en la página donde se quiera insertar el glifo, la siguiente línea de código», afirma.

UTF-8 Basic Latin
El número de carácter se ha asignado de acuerdo con el número correspondiente en: UTF-8 C0 Controls and Basic Latin.

Transformación
Para la configuración web de la tipografía, la diseñadora utiliza SASS, al tratarse de un lenguaje que compila el CSS, hace que la escritura sea más rápida y fácil. «Antes de realizar la animación y transformaciones, necesité ajustar unos parámetros iniciales para que las letras se comportaran de manera determinada: la altura inicial, qué tipo de elementos son, la escala, el tamaño del cuadratín…», comenta.

«El gráfico inferior (cheatsheet) realizado con cada letra, es la chuleta que seguí para realizar las animaciones con CSS. Me ha ayudado a visualizar cada transformación y saber qué posición corresponde a cada módulo en cada momento. Las transformaciones se realizan en rems, igual que la medida base establecida en la tipografía».
Dana 2.0, una tipografía modular responsive de Ana Estrada

Versión de OpenType
Además de la tipografía responsive para uso web, Ana Estrada consideró que sería conveniente crear la versión OTF de la fuente. «Al ser una tipografía monoespaciada, ha sido relativamente sencillo ajustar los diferentes parámetros. El espacio entre caracteres es igual al ancho de las astas. El único caso que se ha tratado de manera diferente ha sido la letra J, para mejorar la legibilidad y dotar de mayor personalidad a la fuente», remarca.

Además, como complemento al proyecto, Ana ha creado una serie de carteles que ponen a prueba las capacidades compositivas de la fuente y la introducen en un contexto editorial. Se puede ver el uso de la familia tipográfica y su comportamiento, se pueden visualizar casos y posibles aplicaciones.

→ www.danafont.com

[embedded content]

FUENTE

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *