1. Design & Illustration
  2. Font Design

Bases de cómo dibujar una fuente y crear tu propia fuente manuscrita

by
Read Time:18 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

¿Alguna vez quisiste imprimirle a tus composiciones y diseños digitales un toque verdaderamente personal? En este tutorial sobre dibujar fuentes, veremos cómo puedes crear una tipografía desde tu escritura, para usar en tu computadora. 

El tutorial se dividirá en tres partes. Primero, veremos las bases de dibujar una tipografía. Luego, una vez que entremos en materia, veremos cómo puedes optimizar tu escritura para asegurar alta calidad y versatilidad. Y finalmente, analizaremos diferentes métodos para tener tu fuente en la computadora y convertir tus letras manuscritas en una fuente digital.

Heartland Handwriting Script Font is available on Envato Elements.Heartland Handwriting Script Font is available on Envato Elements.Heartland Handwriting Script Font is available on Envato Elements.
Fuente manuscrita Heartland está disponible en Envato Elements.

¿Buscas fuentes manuscritas listas para usar? Desplázate hacia abajo en este tutorial. Tenemos una selección de las mejores fuentes manuscritas de Envato Elements. También puedes probar las fuentes manuscritas gratuitas de Envato Elements, o consultar nuestras fuentes manuscritas disponibles para descargar:

Lo que aprenderás en este tutorial de cómo crear una tipografía

  • Cómo dibujar fuentes
  • Bases de dibujar tipografía
  • Cómo escribir tus propios caracteres
  • Cómo escanear y digitalizar tu fuente manuscrita
  • Cómo hacer una fuente manuscrita en Illustrator

1. Practica cómo dibujar una fuente

Lo que necesitarás para la primera parte de este tutorial:

  • papel de dibujo (blanco)
  • lápiz HB o 1H afilado
  • regla graduada en milímetros

Probablemente escribes garabatos o listas cada día, pero raramente estás consciente de tu escritura. Cuando te percatas repentinamente de tu escritura, puede comenzar a verse como algo no natural.

Primero deberías adoptar un modo más natural de escritura. Me parece que la mejor manera de hacerlo es practicar el dibujo de una tipografía. Esto es realmente útil pues te hace más consciente de las características clave de una fuente y te hace más capaz de reconocer características comunes (consistencias) entre diferentes caracteres dentro de una letra. Esto demostrará ser útil cuando comencemos a perfeccionar nuestros caracteres manuscritos y a optimizarlos para la digitalización.

Paso 1

Coloca tu regla en la página, en un ángulo horizontal, tan recto como puedas. Toma tu lápiz afilado y presionando moderadamente, dibuja una línea arriba del borde superior de la regla. 

Si tu regla es la habitual de 30 mm de anchura, puedes mantenerla en su lugar y dibuja una segunda línea a lo largo del borde inferior. Esto tiene el beneficio de asegurar que ambas líneas sean perfectamente paralelas. De otra manera, simplemente crea dos líneas horizontales con una separación de 30 mm. La línea inferior representa la línea base y la línea superior es la altura de la mayúscula

Marca los 10 mm del tercio superior de la altura total entre las líneas y dibuja una tercera línea horizontal con tu regla y el lápiz, presionando más ligeramente para hacer una línea un poco más tenue. Esta línea representa la altura de la x. Despeja las dudas en tus términos de tipografía, como altura de la x y la línea base en mi artículo Tipografía de la A a la Z.

drawing baselinedrawing baselinedrawing baseline

Paso 2

Puedes repetir la secuencia de líneas, usando las mismas medidas del Paso 1, para crear una página llena de líneas. Esta es tu propia cuadrícula de escritura en la que puedes practicar el dibujo de fuentes.

Paso 3

Abre un programa donde puedas editar texto fácilmente como Adobe InDesign o incluso Microsoft Word o Pages

Selecciona una clásica tipografía con serifa, como Adobe Caslon Pro, que se muestra aquí o Garamond. Para practicar el dibujo de una tipografía es mejor escoger una con serifa, pues las letras sin serifa tienen características más sutiles y pueden ser más complicadas de dibujar de manera precisa si eres principiante.

Escribe los siguientes caracteres: 'H n o y', con un espacio entre cada uno. Estos son buenos caracteres para elegir, pues muestran una gama de características distintas: dos astas verticales y un travesaño en la 'H', una apertura y serifas en la 'n', un contador completamente cerrado en la 'o' y un marcado descendente y brazos diagonales en la 'y' minúscula.

caslon pro samplecaslon pro samplecaslon pro sample

Si trabajas en InDesign también puedes cambiar a la cuadrícula de la línea base (Ver > Cuadrículas y guías > Mostrar rejilla base) para ver más fácilmente cómo se alinean las proporciones de los caracteres.

view baselineview baselineview baseline

Dimensiona los caracteres a una escala mayor en tu pantalla o aplica el zoom. Ahora puedes comenzar a dibujar los caracteres. Alterna entre usar tu regla y dibujar trazos a mano. No te preocupes si tus intentos se ven un poco desprolijos, el objetivo de este ejercicio es que te sientas cómodo dibujando fuentes y observes las características de las fuentes y las similitudes (o diferencias) entre cada carácter.

drawing caslondrawing caslondrawing caslon

Notarás que las fuentes con serifa se basan en los principios de simetría y orden. Extiende los trazos desde el borde de los caracteres y nota los ángulos y las proporciones. Las astas son casi siempre de la misma anchura, sin importar el carácter del que se trate, pero podrías notar que el tamaño de las serifas es ligeramente mayor en la 'H' mayúscula. Nota igualmente que algunas partes de los caracteres son más delgados; esta clase de trazos se llaman filetes extrafinos.

Paso 4

Aunque no aplicaremos todas estas características en nuestra fuente manuscrita, es en verdad importante reconocer que todas las letras son gobernadas por un conjunto de reglas, formales, que es más común con serifas y sin serifas o informales, que es más común con letras dibujadas a mano, pintadas o manuscritas.

Una vez que has practicado el dibujo de una fuente, o de varias fuentes si quieres, deberías empezar a investigar un poco sobre tipografías manuscritas, para ayudar a pensar sobre cómo quieres se organice tu letra manuscrita.

Dirígete a un sitio de provisión de fuentes como FontSquirrelDaFont y echa un vistazo a las fuentes manuscritas disponibles ahí. Elige una tipografía que creas comparta cualidades con la tuya y descárgala. 

Elige un software que te permita ver la colección completa de caracteres en la fuente. Adobe InDesign es una buena elección, pero también podrías utilizar Glyphs, sobre el que hablaremos más detalladamente posteriormente.

En InDesign, crea un marco de texto y establece la Fuente en tu tipografía recientemente descargada. He elegido Wagnasty. Ve a Ventana > Texto y tablas > Pictogramas para abrir el panel Pictogramas. Podrás ver la completa colección de caracteres disponibles en la tipografía. 

glyphs panelglyphs panelglyphs panel

Toma nota de los tipos de caracteres que están presentes y de lo ausente. Por ejemplo, en Wagnasty tenemos:

  • una completa colección de letras mayúsculas, de la A a la Z
  • no hay letras minúsculas
  • una completa colección de números del 1 al 9
  • punto (.), coma (,), dos puntos (:), punto y coma (;), signos de exclamación (¡!), signos de interrogación (¿?)
  • apóstrofe (') 
  • paréntesis (), corchetes [], llaves {} y chevrones y los ángulos <> (
  • algunos símbolos básicos matemáticas/ecuación (= + %)
  • numeral (#)
  • algunos símbolos de monedas
  • asterisco (*) 
  • barra (/) barra invertida (\), guión (-), virgulilla (~), barra vertical (|) 

Esta es una colección básica de caracteres que te permitirían escribir la mayoría de las cosas en el idioma inglés sin demasiados problemas.

También debes notar si la fuente tiene cualquier peso adicional, por ejemplo, negrita o cursiva. Más a menudo que ocasional, una fuente manuscrita tendrá solo un peso regular, pues necesita lucir auténtica. Aplicar un peso diferente podría lucir artificial.

La mayoría de las fuentes manuscritas tienen un similar conjunto de caracteres básicos. Como Callie Hand:

Callie Hand fontCallie Hand fontCallie Hand font

O algunas podrían incluir adicionales como Journal, que incluye imágenes o símbolos peculiares dibujados a mano:

Journal fontJournal fontJournal font

2. Cómo crear tus propias fuentes

Ahora que has practicado dibujar fuentes y observaste la gama de tipografías manuscritas y los caracteres disponibles dentro de cada conjunto de fuentes, puedes empezar a pensar en estructurar tu propia tipografía personalizada.

Para esta sección del tutorial necesitarás lo siguiente:

  • papel reglado (un cuaderno viejo desprolijo será suficiente)
  • papel de dibujo (blanco; y con alguna textura si quieres darle una apariencia más informal y rústica a tus caracteres)
  • lápiz afilado HB o 1H
  • regla graduada en milímetros
  • una pluma con punto fino tinta negra (me gusta usar Pilot Hi-TecPoint)
  • borrador

Paso 1

Muchas personas habrán desarrollado con el tiempo dos o más variantes de su escritura. Cuando escribo pasajes de texto más largos, mi escritura tiende a unirse y a inclinarse ligeramente hacia la derecha, creando un texto cursivo itálico.

italic cursive writingitalic cursive writingitalic cursive writing

Sin embargo, hay varios problemas al tratar de convertir fuente cursiva o manuscrita a una fuente digital. Tendrías que asegurar que el kerning (espaciado entre caracteres) esté establecido de manera muy precisa, para que los caracteres siempre parezcan perfectamente unidos. También tendrías que asegurar que cada combinación de caracteres lucirían perfectamente unidos, que muy difícil se logra sin tener que pasar horas editando posteriormente la escritura en tu computadora.

Así que a menos que quieras tener un dolor de cabeza, se recomienda que busques digitalizar texto manuscrito que no esté en cursiva. Mejor, debería tener caracteres independientes que no necesiten ser perfeccionados para corresponder con precisión con cualquier carácter vecino.

Por fortuna, a menudo utilizo una variación diferente de mi escritura, generalmente para anotar documentos o escribir notas rápidas. Todo está establecido en mayúsculas y no está unido. También tiene una ligera inclinación itálica.

block capital writingblock capital writingblock capital writing

Elige un pasaje corto de un libro, y copia el texto en papel reglado usando tu estilo de escritura natural. Mientras lo haces lo mejor posible para mantener la escritura natural, trata de asegurar que los caracteres no estén unidos o encimados. No importa si mezclas mayúsculas y minúsculas. Pero date cuenta, si quieres hacerlo, tendrás que crear eventualmente un completo conjunto de caracteres en mayúsculas y una completa colección de caracteres en minúsculas.

book passagebook passagebook passage

También puedes practicar escribir algunos símbolos como signos de exclamación o corchetes.

punctuation markspunctuation markspunctuation marks

Puedes utilizar este pasaje de libro como una útil referencia para cuando comiences a crear tu propia muestra final de escritura. No siempre se siente natural escribir caracteres naturales, en un orden de la A a la Z, así que puedes mirar el pasaje y apreciar cómo creaste una 'G' o una 'F', por ejemplo, cuando escribías de manera fluida y natural.

Paso 2

Regresa a tu papel de dibujo. Toma tu lápiz y regla y siguiendo los Pasos 1 y 2 de la Parte Uno del tutorial (arriba), dibuja una secuencia de tres líneas, que representan la altura de la letra, la altura de la x y la línea base. 

En la Parte Uno, creamos un grupo de líneas que midan 30 mm de la altura total. Sin embargo, si tratabas de escribir naturalmente en esta escala, ¡seguramente tendrías problemas! Reduce la altura total entre la altura de la mayúscula y la línea base a 6 mm; marca el tercio superior de 2 mm para mostrar la altura de la x

line widthsline widthsline widths

Incluso te podría parecer que todavía es demasiado larga para permitirte escribir naturalmente sin esfuerzo. Escribe un par de caracteres en el papel, para ver de qué tamaño escribes tus caracteres de manera natural. 

Reduce la altura total a 4 o 5 mm si estás más cómodo escribiendo en una escala menor.

Repite la secuencia de líneas hasta que hayas llenado la página.

drawing narrow linesdrawing narrow linesdrawing narrow lines

Paso 3

Toma tu pluma (la tinta negra creará un buen contraste para escanear más adelante) y rota el papel un poco en sentido contrario a las manecillas del reloj. Esto es para evitar forzar el brazo demasiado mientras escribes.

Al mismo ritmo que normalmente escribes, escribe los caracteres en mayúsculas de la A a la Z en un solo intento, junto con la misma línea si tienes espacio. 

handwriting letter sethandwriting letter sethandwriting letter set

Si cometes errores, simplemente intenta de nuevo en la siguiente línea. Pero no te preocupes sobre cualquier error menor o fallas en la escritura. Quieres que la escritura luzca orgánica y natural y perfeccionarla demasiado frustrará el objetivo.

Tomando como referencia la lista de caracteres que anotamos en la Parte Uno del tutorial, escribe otros caracteres en el mismo estilo natural y en la misma escala. Si lo quieres, también puedes escribir una colección de letras minúsculas, también de la a a la z.

numbers and punctuation marksnumbers and punctuation marksnumbers and punctuation marks

Paso 4

Deja que la tinta se seque completamente, y luego toma un borrador y con cuidado elimina las líneas del lápiz alrededor de los caracteres para que solo quede un encantador conjunto de caracteres limpios, listos para ser escaneados.

erase pencil lineserase pencil lineserase pencil lines

3. Cómo escanear y digitalizar tu fuente manuscrita

En esta parte aprenderás cómo crear tipografía manuscrita en Illustrator. Para esta parte final del tutorial necesitarás:

  • un escáner (o como alternativa un trípode y una cámara digital)
  • Adobe Illustrator
  • acceso a un editor de fuentes/programa de conversión por ejemplo, FontLab Studio o Glyphs (puedes probar Glyphs por 30 días y una versión reducida está disponible en las aplicaciones para Mac)

Nota: Te guiaremos por el proceso de usar Glyphs en este tutorial, pero existen otros estupendos programas de edición de fuentes. Me parece que Glyphs es muy amigable con el usuario, pero muchos tipógrafos también sienten debilidad por FontLab y RoboFont.

Paso 1

Configurando el escáner a una alta resolución en ppp (hice el escaneo a 1600 ppp), digitaliza tu muestra de escritura. 

Guarda el archivo en formato TIFF o JPEG. Luego abre Adobe Illustrator y crea un Nuevo documento.

Aplica Archivo > Colocar y selecciona tu imagen escaneada. Con la imagen seleccionada, abre el panel Calco de imagen (Ventana > Calco de imagen). Con la casilla Previsualizar marcada, establece el Modo en Blanco y negro y ajusta los niveles de Umbral, Trazados y Vértices hasta que estés satisfecho con la precisión del calcado. Haz clic en Calcar.

image trace windowimage trace windowimage trace window

Luego, con la imagen aún seleccionada, ve a Objeto > Calco de imagen > Expandir. Como último paso, aplica Control-clic (Mac OS) o clic-derecho (Windows) > Desagrupar. 

Ahora necesitas librarte de las secciones blancas de la imagen. Abre el panel Capas (Ventana > Capas) y crea una nueva capa. Arrástrala hacia abajo para ubicar la nueva capa debajo de la capa de la imagen. Selecciona la herramienta Rectángulo (M) y arrastra para crear un rectángulo que se extienda por toda la mesa de trabajo. Establece el Relleno en un color brillante que haga contraste.

Puedes ver ahora más fácilmente donde hay partes blancas en la imagen. Selecciona el área blanca alrededor del exterior y elimínala. Selecciona las áreas blancas más pequeñas dentro de los bucles y contadores de los caracteres y elimínalas.

deleting white from vectordeleting white from vectordeleting white from vector

Has vectorizado con éxito tu escritura, ¡magnífico trabajo! 

Paso 2

Ahora abre tu software de edición de fuentes. Aquí, te voy a guiar por el proceso de digitalizar tu fuente manuscrita usando Glyphs.

Aplica Archivo > Nuevo para crear una nueva fuente en Glyphs. En el lado izquierdo de la ventana de Glyphs que se abre verás un menú de opciones, listando grupos de caracteres que puedes añadir a la fuente. 

Haz clic en Letra para ver la colección completa de opciones de menú. Para insertar letras mayúsculas, selecciona Mayúsculas. En la ventana aparece un conjunto completo de caracteres en mayúsculas de la A a la Z.

Haz doble clic en un carácter para editarlo directamente. 

Glyphs new windowGlyphs new windowGlyphs new window

Regresa a Illustrator y selecciona el relevante carácter vectorizado. Aplica Edición > Copiar.

vector of charactervector of charactervector of character

Dirígete nuevamente a Glyphs y aplica Edición > Pegar. Glyphs colocará el vector en la ventana, listo para que lo escales y lo ajustes. Los valores numéricos en la parte inferior de la pantalla son editables, permitiéndote ajustar el espacio a ambos lados del carácter, afectando el kerning. 

editing character in Glyphsediting character in Glyphsediting character in Glyphs

A la izquierda de la ventana puedes ver lo símbolos ‘-’ y ‘+’, que te permiten escalar el carácter. También puedes ajustar manualmente la escala, usando la herramienta Escala (S) accesible en el panel herramientas ubicado en la parte superior de la ventana.

increasing scaleincreasing scaleincreasing scale

Deberías usar las guías en la pantalla como apoyo, ubicando la parte inferior del carácter en la Línea base y la parte superior del carácter (si es mayúscula) llegando hasta la línea de Altura de la mayúscula.

Paso 3

Puedes retroceder para ver el conjunto completo de caracteres haciendo clic en la pestaña Fuente hacia la parte superior de la ventana.

Repite el proceso anterior, haciendo doble clic en los caracteres en Glyphs para abrirlos y alternando entre Illustrator y Glyphs, copiando y pegando los caracteres.

completing the set of characterscompleting the set of characterscompleting the set of characters
character setcharacter setcharacter set

También puedes comenzar a agregar otra clase de caracteres, usando el menú de la izquierda en la ventana de Glyphs. Tendrás que añadir manualmente marcas de Números y Signos de puntuación, seleccionándolos de los menús emergentes y seleccionando Generar.

adding numbersadding numbersadding numbers
adding punctuationadding punctuationadding punctuation
exclamation markexclamation markexclamation mark

Paso 4

Una vez que hayas añadido todos los caracteres a tu fuente, puedes darle un nombre. 

Aplica Archivo > Información de la fuente para abrir una nueva ventana. 

Font InfoFont InfoFont Info

Dale a la fuente un nombre adecuado y también puedes añadir detalles adicionales, como tu nombre, tu sitio web y la información de tu compañía. Una vez que termines, solo cierra la ventana.

Font nameFont nameFont name

Paso 5

Una vez que hayas editado los caracteres en tu fuente, puedes exportarla como una fuente digital. 

Aplica Archivo > Exportar

Export to digital fontExport to digital fontExport to digital font

Mantén las opciones predeterminadas como están, para crear una Fuente OpenType, luego haz clic en Siguiente. Guarda la fuente en una carpeta que sea fácilmente ubicable.

OpenType FontOpenType FontOpenType Font

Puedes salir de Glyphs y explorar hacia tu carpeta elegida, para ver el archivo de la fuente. 

otf font in folderotf font in folderotf font in folder

Posteriormente puedes instalarla en tu computadora, como lo harías con cualquier fuente estándar .otf.

installing with Font Bookinstalling with Font Bookinstalling with Font Book

¡Ahora sabes cómo crear tipografía! 

Tu fuente manuscrita ahora está completa y lista para usarse como una fuente digital en tus documentos. Úsala par añadir un toque personal a notas o anotaciones o incorpórala en maquetados de diseño ¡para que tu trabajo en verdad sea único! 

typing your characterstyping your characterstyping your characters

Repasemos las lecciones que hemos cubierto en este tutorial. Abordamos:

  • cómo practicar el dibujo de fuentes y reconocer elementos y reglas comunes en tipografías
  • cómo aplicar esas lecciones de dibujo a tu escritura, optimizándola para digitalización
  • cómo escanear tu ilustración para hacer una fuente manuscrita en Illustrator
  • cómo convertir tus vectores en una fuente digital, editarla usando Glyphs u otro software de edición de fuentes

¡Fabuloso trabajo! Diviértete creando más de tus fuentes, ¿por qué no experimentas con diferentes estilos de tipografías dibujadas a mano o pintadas?

Las 5 mejores fuentes manuscritas de Envato Elements

Ahora sabes cómo dibujar una fuente y crear tipografía manuscrita en Illustrator. Pero si quieres ahorrarte horas de trabajo, necesitas fuentes manuscritas para logo listas para usar.

Envato Elements es el mejor lugar para conseguir fuentes manuscritas. Si eres un creador digital, te encantará nuestro mercado basado en suscripción. Por una módica tarifa mensual, disfrutas de fuentes manuscritas ilimitadas. También puedes obtener ilimitadamente fuentes prémium, plantillas de gráficos, acciones y ajustes preestablecidos, y más.

Estas son algunas de las mejores fuentes manuscritas de logo de Envato Elements:

1. Bellmounts: Fuente manuscrita (en formatos OTF y TTF)

Bellmounts: Handwritten Script Font (OTF, TTF)Bellmounts: Handwritten Script Font (OTF, TTF)Bellmounts: Handwritten Script Font (OTF, TTF)

Si buscas las fuentes manuscritas más nuevas y más fantásticas, Bellmounts es la ideal para ti. Presenta ligaduras OpenType que la hacen perfecta para marcas.

Fuentes manuscritas de logo como esta tienen soporte multilingüe, así que lucirán sensacionales en cualquier idioma.

2. Shifters: Tipografía que te inspira a crear tu propia fuente (en formatos OTF, TTF y WOFF)

Shifters: Handwritten Marker Font (OTF, TTF, WOFF)Shifters: Handwritten Marker Font (OTF, TTF, WOFF)Shifters: Handwritten Marker Font (OTF, TTF, WOFF)

Shifters es una formidable y moderna fuente manuscrita de marcador. Si te gusta la apariencia rústica para tus diseños y marca, chécala.

La tipografía viene con números, signos de puntuación, acentos, caracteres multilingüe, ligaduras y alternativas. Es una de las fuentes manuscritas de logo más completas.

3. Rovey: Fuente manuscrita con serifa (en formatos OTF y TTF)

Rovey: Handwritten Serif FontRovey: Handwritten Serif FontRovey: Handwritten Serif Font

Las fuentes manuscritas con serifa son una tendencia popular gracias a su apariencia única. Y Rovey es una de nuestras mejores en esta categoría que te impulsa a descubrir cómo crear una tipografia.

Es perfecta para diseños creativos, logos y marca. Y viene con estilizados conjuntos ¡y una fuente manuscrita adicional de regalo! ¡Combina ambas para crear los mejores diseños! 

4. Maska: Desearás crear tu propia fuente manuscrita fina (en formatos OTF y TTF)

Maska: Handwritten Signature FontMaska: Handwritten Signature FontMaska: Handwritten Signature Font

¿Eres fanático de fuentes manuscritas delgadas? Maska es una de nuestras más increíbles de este tipo.

Viene con características OpenType como ligaduras verticales. Luce fantástica en invitaciones, papelería, marca y como una fuente manuscrita de logo.

5. The Edensick: Fuente manuscrita gruesa (en formatos OTF, TTF y WOFF)

The Edensick: Thick Handwritten Font (OTF, TTF, WOFF)The Edensick: Thick Handwritten Font (OTF, TTF, WOFF)The Edensick: Thick Handwritten Font (OTF, TTF, WOFF)

¿A quién no le gusta una buena fuente manuscrita gruesa? The Edensick es una bonita fuente de marcador, perfecta para papelería y marca.

Esta es una completa tipografía gruesa. Viene con muchas características OpenType, caracteres codificados como PUA ('áreas de uso privado' por sus siglas en inglés), pictogramas y soporte multilingüe.

Los caracteres alternativos están divididos en varias características OpenType como conjuntos estilísticos, alternativas estilísticas, alternativas contextuales, florituras y ligaduras. ¡Prueba esta fantástica fuente manuscrita!

Descubre más fuentes manuscritas y recursos para saber cómo crear una tipografía

Ahora sabes cómo dibujar fuentes y cómo crear tu propia fuente manuscrita. Compartí algunas de las mejores fuentes manuscritas para firma de Envato Elements. Si quieres descubrir más recursos estupendos, consulta estos:

Nota editorial: Este artículo ha sido actualizado con la colaboración de Maria Villanueva. Maria forma parte del equipo de escritores de Envato Tuts+.

One subscription.
Unlimited Downloads.
Get unlimited downloads