El proceso completo de diseño de fuentes en 5 pasos

Las fuentes son una de las herramientas más comunes e incomprendidas del mundo digital. Todo el mundo los usa, y la mayoría de la gente está familiarizada con algunos de los clásicos como Times New Roman y Arial. Pero pocas personas piensan de dónde vienen, y mucho menos el hecho de que alguien tuvo que sentarse y escribir cada una de esas letras. Y hay una razón para esto: el truco de un buen diseño de fuentes es que están destinadas a ser útiles en una variedad de contextos, lo que significa que no deben llamar la atención y distraer la atención del mensaje.

Al mismo tiempo, el diseño tipográfico puede ser un excelente esfuerzo creativo. Brinda la oportunidad de poner su propia firma en cada palabra que escribe. Y el software moderno hace que la creación de su propia fuente sea más accesible que nunca. Por supuesto, eso no quiere decir que sea fácil…

Ilustración de un diseñador creando un tipo de letra

El diseño tipográfico puede ser una práctica que consume mucho tiempo, dado que está creando un alfabeto completo junto con diferentes estilos, como negrita, delgada o cursiva. También hay una gran cantidad de sutileza involucrada, y puede ser difícil para el diseñador de fuentes no capacitado ver las diferencias entre los tipos de letra, sin importar la creación de su propia variación. También hay muchas consideraciones técnicas a tener en cuenta, como el tamaño y el espaciado correctos. Para guiarlo a superar estos obstáculos, lo guiaremos a través del proceso completo de diseño de fuentes paso a paso.

Cómo funcionan las fuentes

El diseño tipográfico consiste esencialmente en pasar de sus propios dibujos hechos a mano de un alfabeto completo al desarrollo de un archivo de fuente. La instalación de este archivo de fuente en cualquier computadora agregará su tipo de letra a la biblioteca de fuentes de esa computadora, haciéndola accesible a través de cualquier aplicación que use fuentes, como Microsoft Word y Creative Cloud de Adobe. También puede obtener la licencia del archivo de fuente a través de un sitio como Creative Market y obtener un ingreso pasivo cuando alguien lo compre y lo descargue.

Para comprender mejor cómo funciona todo esto, resuelva brevemente algunos conceptos básicos. Comenzaremos con cómo las fuentes encajan en los muchos descriptores de letras diseñadas. Notará que los términos “fuente” y “tipo de letra” a menudo se confunden con sinónimos.

Postal escrita a mano
Un ejemplo de hand-lettering. Diseño por Mky
  • Tipografía: El arte de arreglar y diseñar tipos.
  • Tipo de letra: El diseño único de las letras en un alfabeto.
  • Fuente: el archivo de software que contiene un tipo de letra particular.
  • Caligrafía: Escritura e inscripciones ingeniosas, generalmente practicadas con herramientas analógicas en el momento.
  • Hand-lettering: representaciones ilustrativas de letras y palabras, a menudo en un cartel o señalización.

Hablemos de los formatos de archivo de fuentes. Los dos principales de los que escuchará son Open Type Font (OTF) y True Type Font (TTF). TTF fue desarrollado primero por Apple y Microsoft en los años 80 como una forma para que las computadoras y las impresoras leyeran las fuentes fácilmente. OTF fue desarrollado posteriormente por Microsoft y Adobe para ampliar estas funciones. Si bien TTF todavía está en circulación, OTF proporciona más almacenamiento y admite muchos más tipos de caracteres. Ambos son aceptables, pero OTF se considera preferible de los dos.

Diseño de fuente de logotipo tipográfico

Finalmente, es importante comprender las licencias de las fuentes. Como cualquier activo creativo creado por una persona real, los tipos de letra tienen un titular de derechos de autor. Las licencias son esencialmente una forma de extender el uso de una fuente a cualquier persona por una tarifa, pero las diferentes licencias vendrán con diferentes términos y restricciones .

Si planea vender su diseño de fuente en línea, el mercado generalmente tendrá su propio marco para la concesión de licencias y debe revisarlo antes de comenzar (esto también incluirá información sobre su parte de las ganancias). Si otorga licencias de una fuente personalizada a clientes particulares por su cuenta, deberá redactar su propia licencia para asegurarse de que no haya confusión sobre la propiedad.

El proceso de diseño de fuentes

1. Revisa las reglas básicas del diseño de fuentes

Antes de pasar directamente a dibujar sus letras, es importante que comprenda los conceptos básicos de la construcción de tipos. El diseño tipográfico es casi tan antiguo como la invención de la imprenta del siglo XV y los escribas usaban caligrafía artesanal en los manuscritos mucho antes. El punto es: los humanos han estado dibujando letras durante siglos, dándoles mucho tiempo para probar y fallar y establecer algunas de las mejores prácticas.

Guías de diseño de tipos y anatomía

Comience por familiarizarse con algunos términos básicos de tipografía . Preste especial atención a la anatomía del tipo y la función y ubicación de las guías (altura de la tapa, línea ascendente, línea de base, etc.). También es útil comprender las diferentes familias de fuentes , incluidas las variaciones de nicho, como las serifas Tuscan, Slab, Wedge y Hairline.

Si presta atención a los tipos de letra, notará que muchos contienen trazos gruesos y delgados alternados dentro de la misma letra. Esto no es por accidente, es un remanente de cómo se dibujaron las letras con caligrafía.

Cada vez que un calígrafo mueve la pluma hacia abajo, el movimiento es más lento y la punta libera más tinta, lo que da como resultado un trazo más grueso. En la carrera ascendente, el cepillo se mueve más rápido, lo que da como resultado un trazo más fino. Esto se basa inconscientemente en la forma en que leemos las letras, por lo que si planea diseñar una fuente no geométrica, debe estudiar la ubicación correcta de los trazos gruesos y delgados. Una hoja de trabajo como esta puede ayudarte .

Ver  Diseño móvil primero: Cómo hacerlo bien desde el principio
Ilustración de las diferentes formas tipográficas
Las letras se pueden agrupar en estas formas básicas o en una combinación. Diseño de fuente por Mky

Las letras también se pueden agrupar en ciertas categorías según su forma, y ​​es útil reconocerlas para dibujarlas de manera consistente. Estas son letras rectilíneas, curvilíneas y triangulares (cuadros, círculos y triángulos).

  • Las letras rectilíneas incluyen H, E y N
  • Las letras curvilíneas incluyen C, O y G
  • Las letras triangulares incluyen A y V

Muchas letras contienen combinaciones de estas tres formas, y descubrir el diseño de las letras dentro de las tres categorías generales puede ayudarlo a crear las formas combinadas.

Finalmente, hay una serie de ilusiones ópticas a tener en cuenta en el diseño tipográfico, algunas de las cuales se tratan aquí . Una de las más famosas es que en realidad debes dibujar letras curvilíneas más grandes de lo normal (sobrepasando tus líneas guía) porque nuestro ojo las percibe más pequeñas cuando se colocan junto a otras letras. Estas son trampas en las que comúnmente caen los diseñadores novatos, ¡así que sáquelas del camino ahora!

2. Planifica los objetivos de tu proyecto tipográfico

Si está trabajando para un cliente, se le entregará un resumen del proyecto. Esto establecerá los antecedentes del proyecto y los objetivos del diseño. Si está creando un tipo de letra para usted (o para vender en línea), aún debe crear un documento como este para conectarse a tierra durante el proceso de diseño.

Letras tipográficas para una etiqueta de producto

Aquí hay algunas preguntas básicas que querrá cubrir al comienzo de su proyecto:

  • ¿Por qué estoy haciendo esto? Un cliente debe tener un propósito específico detrás de la fuente, como fomentar el reconocimiento de la marca. Incluso si está diseñando una fuente puramente para su propia expresión, considere el sentimiento específico que desea que exprese.
  • ¿Quién usará la fuente? Si está haciendo esto para un cliente, debe tener información sobre sus necesidades comerciales y su público objetivo. Si está diseñando la fuente para un mercado de propósito general, aún debe tener una idea de qué tipo de persona se sentirá atraída por el estilo de diseño de fuente que está creando y los tipos de proyectos a los que podría aplicarlo.
Diseño de logotipo tipográfico para una marca de ropa
Logotipo de humbl.
  • ¿En qué contexto se utilizará la fuente? Una fuente para folletos tendrá un estilo diferente al de una para carteles de películas. En la misma línea, considera si tu fuente se usará más para los titulares o para el cuerpo del texto. Algunos de estos contextos necesitarán fuentes discretas, profesionales y legibles, mientras que otros dejarán espacio para fuentes más originales, creativas y llamativas.
  • ¿Qué fuentes son similares en estilo a lo que estoy creando? Hay miles de fuentes y una gran diversidad. Para descubrir cómo se destacará el diseño de su fuente, debe recopilar tipos de letra de referencia. Comience con el estado de ánimo ideal que desea que evoque su fuente, ya sea elegante o informal. Si encuentra un tipo de letra que le gusta, busque uno que sea notablemente similar y compárelos para detectar los detalles sutiles. Además de alfabetos completos, concéntrese en algunos estilos de letras específicos. Algunos lugares comunes para buscar fuentes son Font Squirrel , Envato , Behance o estudios icónicos como House Industries .

3. Haz un bosquejo de tu tipografía

El boceto es donde se lleva a cabo el proceso de diseño real. Esta es la fase en la que tomará señales de sus tipos de letra de referencia y tomará decisiones creativas específicas que diferenciarán su tipo de letra de los demás. ¿Qué versión de una “a” minúscula debería usar? ¿Los travesaños de su “E” mayúscula deben tener la misma longitud o variar? La única forma de responder preguntas como estas es dibujar las letras y juzgar los resultados por ti mismo.

Alfabeto tipográfico Bodoni
Cuando dibujes tu propia tipografía, inspírate en fuentes contemporáneas y clásicas, como Bodoni. Imagen vía Wikimedia Commons

No sientas que tienes que dibujar todo el alfabeto de inmediato. El propósito de dibujar es explorar direcciones artísticas, y dibujar un alfabeto completo para cada versión potencial de tu tipo de letra te agotará bastante rápido.

En lugar de eso, comience poco a poco dibujando letras al azar aquí y allá para tener una idea general del estilo que desea. Cuando encuentre una dirección que le guste, pase a letras específicas de las tres categorías de formas.

A continuación, dibuje palabras que tengan una buena variedad de estilos de letras, es decir, una buena combinación de mayúsculas, ascendentes, descendentes y formas combinadas. Es mejor usar palabras reales para ayudarse a visualizar cómo podría leerse realmente el tipo de letra. Incluso puede probar un generador de palabras al azar para la práctica creativa.

Una vez que haya pasado por este proceso varias veces y haya encontrado un estilo que le guste, puede pasar a dibujar todo el alfabeto usando las pautas mencionadas en el Paso 1 (aunque esto no necesariamente tiene que ser perfecto, ya que estos serán desarrollado en la siguiente etapa). ¡Asegúrate de no descuidar los números, la puntuación y los caracteres especiales!

4. Desarrolla tu fuente en un software de diseño

Repasemos el software que necesitará para crear un archivo de fuente utilizable. Básicamente, hay dos de los que debe preocuparse: un programa de diseño gráfico y un programa de diseño de fuentes.

diseño de fuente de estilo pintado a mano
Un tipo de letra realista pintado a mano como este saldría mejor en Photoshop. Diseño de fuente a través de Behance

En el frente del diseño gráfico, querrá elegir un software vectorial o rasterizado , por ejemplo, Adobe Illustrator o Photoshop (o el software equivalente de otras marcas). En su mayor parte, las fuentes vectoriales son preferibles. Sin embargo, si su diseño busca una apariencia más realista, pintada a mano, la trama (también conocida como mapa de bits) es el camino a seguir. Por ejemplo, el tipo de letra Macbeth que se muestra aquí utiliza un estilo pictórico detallado, y un enfoque de trama tendría más sentido aquí.

Ver  Definiciones de diseño web y términos que necesita saber

Además de esto, necesitará un programa de creación de fuentes. Uno de los más populares es Fontself Maker , y esta es una extensión para los productos de Adobe. Al momento de escribir este artículo, es un costo único de $39 para Illustrator y $59 para el paquete Photoshop/Illustrator. Existen otros programas profesionales como Glyphs que también puedes investigar como alternativa.

Diseño de fuente de logotipo tipográfico
Diseño de logotipo por GREAT.

En aras de la facilidad, nos referiremos a Illustrator y Fontself. Los principios generales deben trasladarse a otro software. Una vez que hayas descargado Fontself, instálalo como cualquier otro programa. Si ya tiene Illustrator abierto, es posible que deba reiniciarlo antes de que los dos se integren. En el futuro, debe tener un buen manejo de los conceptos básicos de Adobe Illustrator, especialmente las capas, la herramienta de lápiz, las curvas Bezier y la interfaz general.

Para configurar su archivo en Illustrator, solo asegúrese de estar trabajando en modo de color RGB y de que su mesa de trabajo sea lo suficientemente grande como para que quepa todo su alfabeto. Siempre puede ajustar el tamaño más adelante con la herramienta Mesa de trabajo.

Captura de pantalla de la interfaz de Adobe Illustrator

A continuación, querrá cargar su boceto de referencia, ya sea tomando una foto o escaneándola y transfiriéndola a su computadora. Llévelo al documento a través de Archivo > Colocar. En el cuadro de diálogo, navegue hasta su archivo de imagen de boceto y asegúrese de que la casilla Capa de plantilla esté marcada. Esto importará el archivo, lo atenuará y bloqueará la imagen en su lugar, lo que facilitará el rastreo en una nueva capa. Puede desbloquearlo haciendo clic en el icono del candado junto a la capa en el panel Capas.

Un ejemplo de cómo trazar letras usando puntos vectoriales en Illustrator
Para vectorizar bocetos de letras, use la cantidad mínima de puntos vectoriales en los bordes extremos y mantenga rectas las curvas Bézier. Imagen vía Jessica Hische

El trazado de letras funciona trazando puntos vectoriales con la herramienta de pluma y usando controladores de bezier para crear curvas donde sea necesario. Es una buena práctica colocar puntos vectoriales solo en los bordes extremos de la letra y mantener rectos los controles de Bézier manteniendo presionada la tecla Mayús cada vez que los ajuste.

Esto hace que sea mucho más fácil editar su forma a largo plazo. Para ver un gran tutorial de cómo funciona esto, echa un vistazo a esta demostración de la estrella de letras a mano Jessica Hische .

Mientras estás calcando, ten en cuenta que no tienes que seguir tu boceto al pie de la letra (no pude resistir). La versión del software es el aspecto que tendrá su tipo de letra final, así que haga los ajustes necesarios para obtener el resultado ideal.

5. Finalice y exporte un archivo de fuente terminado

Una vez que haya completado todo su alfabeto en Illustrator, asegúrese de que sus letras estén agrupadas (Cmd + G) por categoría (mayúsculas, minúsculas, números y puntuación) y ordenadas en filas apiladas.

Vaya a Ventana > Extensiones y elija la versión de Fontself que tiene. En la ventana que se abre, arrastre cada fila de caracteres a sus categorías correspondientes. Su tipo de letra ahora se cargará en Fontself.

Captura de pantalla de la extensión Fontself Maker
La interfaz de Fontself. El botón Guardar le permite exportar su archivo OTF. El botón Avanzado le permite interletar manualmente pares de letras. A esta versión de Fontself le falta el botón Inteligente, pero estará junto a Avanzado. Imagen vía Fontself .

Fontself proporciona una serie de opciones para realizar los ajustes finales a su tipo de letra. Hay un cuadro de vista previa en vivo cerca de la parte superior donde puede escribir frases de muestra para probar el diseño de su fuente. Al hacer doble clic en cualquiera de las letras, podrá cambiar su posición con las teclas de flecha.

Uno de los últimos ajustes que necesitará hacer es el interletraje , o el espacio entre letras. Fontself tiene un práctico botón de interletraje automático (etiquetado como “Inteligente”) ubicado debajo de Vista previa en vivo, y eso le ahorrará mucho tiempo. Pero cuando se trata de diseño, el ojo humano siempre será más preciso que una computadora, por lo que junto al botón Inteligente encontrará uno etiquetado como “Avanzado”. Esto lo llevará a otra ventana donde las letras se agrupan en pares de interletraje que puede ajustar manualmente. Esto puede llevar mucho tiempo, pero recuerda: incluso el tipo de letra más bellamente diseñado puede arruinarse con letras apretadas y mal interletraje.

Gif animado de cómo usar la interfaz de Fontself Maker
Cómo utilizar el botón inteligente para interletraje automático. Imagen a través de Fontself

Una vez que esté satisfecho con su tipo de letra, todo lo que tiene que hacer es presionar Guardar cerca de la parte superior de la ventana de Fontself. Desde aquí, nombrará su archivo de fuente, elegirá una carpeta de destino y su fuente se exportará como OTF. Al hacer doble clic en este archivo, se instalará en su computadora.

¡Y eso es todo! ¡Puede comenzar a usar la fuente en sus proyectos, investigar algunos mercados en línea para venderla o ponerse a trabajar en sus versiones en negrita, cursiva y otras!

La palabra final sobre el diseño de fuentes

El diseño de fuentes puede ser intimidante gracias a la gran cantidad de símbolos que tiene que crear a mano y la cantidad de tiempo que dedica a consideraciones como el interletraje. De todos modos, la sensación de tener una fuente que es suya y de nadie más puede valer la pena, sin importar si la está usando para un negocio o para su propia expresión.

Diseño de lettering para ropa infantil.

Y considerando todo, el diseño de tipos digitales es significativamente más fácil en estos días que hace diez años gracias a las herramientas modernas. Ahora cualquiera puede crear una fuente con un poco de práctica. Pero cuando esté listo para una fuente diseñada no por cualquier persona, considere contratar a un diseñador que sepa lo que está haciendo.

Si le ha gustado este artículo, no olvide visitar nuestro blog. También puede visitar nuestra web y observar cómo trabajamos.

PÍDENOS PRESUPUESTO AHORA

Explícanos tu proyecto y te ayudaremos a ponerlo en marcha.

Somos la Agencia líder en diseño de páginas web, diseño de tiendas online, posicionamiento SEO, campañas SEM y redes sociales.

© 2022 · Diseño Web Barcelona · Todos los derechos reservados