Un método rápido de diseño de tipografías con aspecto de escritura a mano

publicado en: Blog | 0
Share Button
ejemplo de uso de la tipografía Bufanda

La forma más convencional de diseñar una tipografía de tipo handwriting (manuscrita) suele consistir en escanear una escritura original, mejorar o adaptar la imagen, vectorizarla a mano para racionalizar los contornos y sistematizar los extremos que formen las ligaduras (si las tiene) para que encajen. Por supuesto también se puede dibujar directamente desde el principio, sin necesidad de partir de un arte final, pero suele resultar más sencillo conseguir un aspecto irregular, natural y manual partiendo, precisamente, de algo hecho a mano. La forma de dibujar el tipo de letra que se va a explicar se parece más al segundo proceso (dibujarla directamente) que al primero (escanearla y vectorizarla)

Tipografía a mano alzada escaneadaTipografía a mano alzada regularizada para vectorizarlaTipografía a mano alzada vectorizada

Existen algunos atajos para conseguir diseñar un tipo de letra que tenga el aspecto de escritura hecha a mano. El propuesto en este artículo consiste en partir de una letra basada en un trazo como las usadas por dispositivos para rotular en una pasada con una pluma gruesa (trazadores) o grabar con una única trayectoria de una fresa (de maquinaria CAM). A esta tipografía de partida le aplicaremos ciertas transformaciones buscando que parezca rotulada, también con un trazo, pero a mano.

En este ejemplo explicaré cómo diseñé el tipo de letra «Bufanda» usando de base la tipografía «ISA», que creamos en Acadacual hace tiempo y de la que seguramente hablaré en otra ocasión, que tiene un doble formato: el convencional de contornos, dibujada definiendo sus bordes (outline font), y el definido por el eje central de las formas de cada letra (stroke font) que permite la adaptación para diseñar la nueva tipografía.

ejemplo de la tipografía ISA en mayúsculasejemplo de la tipografía ISA en minúsculas

Las imágenes de arriba muestran dos ejemplos de la tipografía «ISA» definida por contornos. Suponiendo un dispositivo vectorial (como un trazador o plotter) pudiera generar la letra con un trazo cuadrado, algo bastante infrecuente, o se eligiera ese tipo de trazo en un dispositivo matricial (como una impresora) las únicas diferencias apreciables en el ejemplo anterior si se definiera la letra por su eje central sería la A mayúscula que, como puede verse en las imágenes de abajo, tiene un contorno recortado con respecto al generado por su eje.

En la primera imagen se compara el eje, en color verde, con el contorno, en color negro. La segunda imagen muestra el contorno, reforzado en color rosa, sobre el contorno que generaría el eje de la anterior. Por último, la tercera imagen es un detalle del recorte del contorno del extremo inferior derecho de la letra A mayúscula.

ejemplo de A mayúscula eje central de la tipografía ISAejemplo de A mayúscula trazo frente a borde de la tipografía ISAdetalle inferior A mayúscula tipografía ISA

La primera operación que se aplica a la tipografía base en este método rápido de definición de una escritura a mano consiste en una serie de transformaciones que determinen su geometría básica a partir del tipo de letra usado como referencia. Al uso final de un tipo de letra que simula escritura a mano se se suelen aplicar, entre otros, algunos efectos sobre la línea base (típicamente, distribuir renglones sobre curvas) al interletraje o kerning, a la separación de palabras y al tamaño y a la orientación de algunas letras. No es una buena idea definir las letras directamente con este tipo de efectos, como cambiar su tamaño individual o girarlas; es preferible buscar algo lo más neutro posible y terminar el trabajo de rotulación (suele usarse la expresión en inglés lettering, en diseño gráfico) en la aplicación de diseño gráfico en el que se use la tipografía.

Una de las transformaciones más frecuentes que suele aplicarse es la inclinación: una distorsión trapezoidal que simula muy bien, aunque luego hará falta retocarla, la escritura oblicua. Para este ejemplo he preferido mantener la letra recta y cambiar el tamaño en la horizontal a la mitad, comprimiéndola, para diseñar una tipografía estirada desde otra ya bastante compacta.

eje mayúsculas tipografía ISA comprimida para diseño Bufandaeje minúsculas tipografía ISA comprimida para diseño Bufanda

Al aplicar la transformación ya se intuye que el grosor del trazo original va a resultar demasiado ancho; hay que recordar que, por el momento no es un problema ya que se trabaja de partida sólo con el eje del diseño de la tipografía.

También se puede modificar el diseño para dar una personalidad diferente al nuevo tipo de letra. Para este ejemplo he decidido modificar, curvándolas, las terminaciones horizontales de algunos caracteres, como las eses y las ces, lo que completará mejor el espacio y hará más creíble el dibujo a mano alzado de las letras. Como un paso posterior consistirá en alterar el eje para hacerlo más irregular, lo esperable al estar creado a mano, no es muy importante que esta modificación se ajuste con exactitud al resto de la geometría del tipo de letra, de hecho, tomarse la molestia de realizar manualmente la modificación de cada letra refuerza el aspecto natural de mano alzada.

curvar terminaciones horizontales de tipografía ISA a Bufanda

Además de la alteración del trazado, para hacerlo más irregular, de la que hablaba arriba, hay otra modificación muy sencilla que hace que la tipografía parezca manuscrita; consiste en alargar los trazos para que se crucen en las intersecciones (base del número 1, cruz en la T mayúscula…) y en algunas de las esquinas, imitando cómo se dibujaría cada forma de cada letra. Para decidir qué trazos cruzar puedes ensayar la letra a mano varias veces (mejor con un lápiz fino) y fijarte en el proceso. Las letras que dibujes de un sólo trazo respetarán las esquinas (la parte superior del número 3 y la media del número 5 en el ejemplo) en esas puedes exagerar un poco el ángulo de la más corta siempre que sea coherente con la forma de la caligrafía que estás imitando (en el ejemplo puedes verlo en la parte inferior de la E mayúscula y en la superior del número 3)

Aunque puede parecer algo menor, es de mucha ayuda considerar el tamaño y la velocidad a la que escribirías. En mi caso, una letra M mayúscula pequeña y escrita rápido apenas tendría una esquina en la parte central, sería una curva más abierta cuanto más rápida y de menor tamaño pero escrita despacio y/o muy grande estaría formada por cuatro líneas (más o menos) rectas.

diferencias eje tipografía ISA y Bufanda

En los detalles de las imágenes de abajo pueden verse algunos de los cambios que aportan aspecto más natural (y en este caso, informal) En la primera, la terminación del número 6 rebasa la línea vertical; la segunda muestra cómo la letra A mayúscula, además de extender el trazo, se curva en la horizontal. El dibujo de los círculos (como los del número 8 o en de las letras O) es poco frecuente (y un poco personal) la mayoría de la caligrafía suele dibujar los círculos más anchos en la parte inferior y seguidos si están juntos, como en el número 8; en este caso se parece más a una rotulación de tipo técnico, herencia de la tipografía «ISA» que a caligrafía convencional.

Si observas el proceso de modificación verás que algunas de las terminaciones que se curvaron en pasos anteriores se han cerrado más para imitar más fielmente a la escritura hecha a mano siguiendo el método de copiar el movimiento del dibujo real.

Detalle tipografía Bufanda 01Detalle tipografía Bufanda 02Detalle tipografía Bufanda 03Detalle tipografía Bufanda 04Detalle tipografía Bufanda 05Detalle tipografía Bufanda 06Detalle tipografía Bufanda 07Detalle tipografía Bufanda 08

En las imágenes de arriba he añadido un eje blanco al contorno negro para ayudar a distinguir mejor la forma de la letra. Este grafismo me sirve también para explicar por qué la familia sólo tiene una letra de ancho regular y otra fina (light) que además, a diferencia de cómo suele diseñarse habitualmente, va al centro en lugar de a los extremos (parecido a la representación del eje de las imágenes anteriores) Como parece lógico, a esta clase de tipografías se les suele dar un uso más decorativo que de escritura de largos párrafos y en esas tareas gráficas no es infrecuente generar efectos con los contornos lo que engorda las letras y hace innecesaria una letra bold o black (distintos grados de negrita, en general) aunque sí puede ayudar una versión de trazo muy delgado en el interior por lo que es útil disponer de la versión fina del tipo de letra. Además, cumple con los requisitos del artículo: se genera de manera muy rápida ya que prácticamente sirve el mismo eje que se ha definido tanto para el ancho regular como para el delgado.

Un efecto muy interesante que quiero explicar por último sirve para dar aspecto de tinta más líquida (o pintura con aerógrafo, según se use) y consiste en engordar los extremos donde el medio, el soporte y el proceso de trazado a mano harían, en la escritura que se imita, que la tinta fluyera más. También puede ser una mejora el efecto contrario: adelgazar alguna de las líneas interiores.

En mi caso, he preferido que la tipografía Bufanda no tenga este efecto ya que quiero mantener la definición viable sólo con el eje (sin el contorno) pero, como es algo sencillo de ejecutar, parece útil para completar el método rápido de diseño de tipos de letra handwriting. Como se parte del trazo y el contorno se puede obtener automáticamente, al contrario de lo que parece, es muy sencillo imitar este comportamiento de la tinta.

Si sólo se desea agrandar los extremos, hay una técnica muy eficaz que consiste en dibujar un círculo de referencia (que correspondería con la gota de tinta final que se está imitando) y colocarlo en los extremos correspondientes a los que se sumará para integrarlo en el contorno y posteriormente hay que eliminar los encuentros duros (suele ser suficiente en la mayoría de los casos) o suavizar a mano los puntos de encuentro.

Modificación de la tipografía Bufanda para que acuse más el efecto de tinta fluida

En la imagen de arriba puede compararse el tipo de letra con el trazado uniforme, el que he elegido finalmente para la tipografía Bufanda, y el trazado que simula distinta intensidad de tinta en los extremos y en las partes intermedias de los trazos.

Igual que ocurre a la hora de hacer irregular el trazo de la letra, no suele merecer la pena valerse de los automatismos de los programas de dibujo vectorial (como Inkscape) o en su caso, tipográfico (como FontForge) frente a trabajarlos a mano ya que es infrecuente poder aplicar con éxito algún tipo de efecto a todos los caracteres (glifos) y aplicarlo uno a uno no ahorra mucho comparado con alterarlo manualmente.

Y lo mejor se ha quedado para el final. Puedes descargar gratis la tipografía Bufanda que, por supuesto, también es libre.

Seguir Víctor Ventura:

Desarrollador multimedia y web

Tengo la suerte de ir recorriendo una carrera profesional muy variada pero en la que siempre encuentro lugar para la expresión gráfica y para la programación. He desarrollado aplicaciones para CAD, presentaciones multimedia interactivas, tecnología web en el cliente y en el servidor y últimamente para Internet de las cosas, tanto en el ámbito electrónico como en el tratamiento de datos y el interfaz con los usuarios. En Acadacual Granada, además de programar, me encargo de que los servidores sigan funcionando.