El proyecto 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.
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. Consta de 4 alturas con el mismo peso 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.
Origen
El origen 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.
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. DanaFont 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.
El nombre de la tipografía ha sido concebido por su estética retro. Dana Scully es el 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.
Letras modulares
Para la creación de los signos gráficos 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. 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
He 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. Cada módulo tiene unas dimensiones de 16px, que se corresponde a la medida estándar web: el rem.
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. He determinado tres alturas con vistas a la nomenclatura web: ascendentes, descendentes y xheight. Además, aunque es una tipografía que no contiene mayúsculas (puesto que éstas se componen de los iconos), he 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. Las altura de las ascendentes y las mayúsculas será la misma, no se harán distinciones.
En la imagen que se muestra a continuación se puede apreciar la diferencia de alineación.
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.
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. 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 lo que después de algunas pruebas, deseché la idea de iconos funcionales y empecé a pensar en iconos meramente decorativos. De ahí surgió la idea de los aliens, marcianitos o monstruítos, que diseñé como complemento perfecto para la tipografía.
DIV
El código de cada letra es infinito, así que, pensando en una mejor experiencia de usuario, he 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:
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, utilizo SASS, que es 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…
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.
Versión de OpenType
Además de la tipografía responsive para uso web, 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.
He 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.
Funcionamiento de la tipografía online
Aquí se puede ver un ejemplo de funcionamiento del alfabeto completo.
Ana Estrada www.anaestrada.es
Más información en: www.danafont.com
El proyecto DanaFont ha sido galardonado con un Laus de Oro en la edición del año 2018
