Cómo diseñar y construir una fuente funcional cursiva

Lo que vas a crear

El tipo cursivo fue una vez un oxímoron, pero la moderna tecnología OpenType ahora nos permite crear fuentes cursivas verdaderas con formas de letras que se comportan según su contexto, al igual que las letras cursivas verdaderas, hasta cierto punto. 

En este tutorial, aprenderá cómo crear un diseño cursivo, convertirlo en contornos de bezier válidos y limpiarlo, empaquetarlo en una fuente y codificar las reglas de OpenType que programan su comportamiento cursivo..

1. ¿Realmente necesitas una fuente?

Esto puede parecer una pregunta extraña, pero cada vez más los diseñadores de hoy en día utilizan en exceso las fuentes. La palabra "fuente"Literalmente significa" fuente de fundición ", refiriéndose a los bloques de metal que una vez formaron una tipografía. Estos bloques estaban hechos de un metal increíblemente duro, diseñado para sobrevivir a cientos de miles de prensas, o más tarde, para servir como moldes, lanzando repetidamente copias de sus letras en toques de metal más blandos para la impresión tipográfica..

Con esto hay una implicación de que las fuentes están diseñadas para un uso pesado y repetitivo. Los diseñadores de tipos realizan una gran cantidad de trabajo en una fuente para garantizar que funcione lo mejor posible en alguna ajuste dado. 

Por lo tanto, si solo necesita una palabra decorativa, no tiene sentido diseñar (o en la actualidad comprar) una fuente completa. Probablemente esté mejor escribiendo su palabra o frase a mano e importándola a su diseño. Pero si, tal vez, necesita múltiples encabezados diferentes, o si desea establecer un pasaje particularmente largo en ese tipo de letra, o si desea un diseño que pueda imprimir cualquier cosa que quiera, entonces una fuente es el camino a seguir..

2. Creando el Diseño

Los diseños tipográficos son a menudo el resultado de accidentes felices. A menudo, puedo escribir casualmente algo en un papel que se ve realmente bien, y que se convertirá en inspiración para un tipo de letra completo. Por ejemplo, aquí hay algunos encabezados que escribí para algunas tareas de física / estadística que pensé que podrían ser un buen tipo de letra..

Un consejo: si está tratando de poner una muestra, a menudo es útil escribirla en papel cuadriculado para que pueda mantener sus letras y escanear los cortes, agradables y rectos.


Estos fueron escritos con una pluma de caligrafía de nibbed amplia. Puede comprar algunas plumas estilográficas caligráficas muy baratas por menos de $ 10 de fabricantes como Sheaffer.

Tendrá que escanearlos en imágenes para vectorizar los diseños. Si no tiene un escáner (como yo), simplemente puede tomar una imagen desde un ángulo ortogonal y usarla. Ambas exploraciones anteriores se hicieron con una cámara de iPhone. La calidad de la imagen no tiene por qué ser excelente, solo debe preocuparse por evitar la distorsión geométrica.

3. Rastreando las letras en FontForge

Para crear la fuente en sí, necesitará un programa de edición de fuentes. Existen varias opciones terriblemente caras, pero una gran aplicación, FontForge, es gratuita y de código abierto. Usaremos FontForge en este tutorial. Asegúrese de configurarlo para usar solo coordenadas enteras (Expediente > Preferencias > Edición > SnapToInt).

Paso 1

Lo primero que debemos hacer es importar el escaneo en el área de dibujo de FontForge. Haga esto haciendo clic en una ventana de edición de glifo, y vaya a Expediente > Importar.

Entonces, asegurándote de que estás en el Fondo capa, use las herramientas de mover y escalar para posicionar y dimensionar la imagen de referencia. Para propósitos de demostración, comenzaré con la letra 'r' en esta muestra, así que centre la 'r' en el centro del marco del glifo, justo en la línea de base.

Paso 2

Comenzamos dibujando el cruce donde comienza la acción de la carta..

Entonces plantamos Puntos de la curva HV en todos los mínimos y máximos del contorno de la carta. El uso de puntos de curva HV ayuda a anclar en su lugar puntos importantes a lo largo del contorno de la letra, y también evita dolores de cabeza interminables con puntos extremos que faltan en el camino. Por ahora está bien si el camino se cruza solo..

Luego, copie los puntos de arranque y colóquelos en línea recta para formar los puntos de la carrera. Es muy importante que las coordenadas y de los dos conjuntos de puntos sigan siendo las mismas..

Luego termina de delinear el glifo.

Paso 3

Ajuste los controles de bézier de los puntos de la curva para que coincidan mejor con el contorno del glifo..

Puede ver una vista previa completa del glifo en la vista principal de fuentes.

Etapa 4

Ahora podemos abordar el siguiente glifo, en este caso, una 'i'. Comience por descender de la 'r' estableciendo su ancho de avance en la parte superior de su borde exterior.

Rastreamos el glifo con las mismas técnicas que usamos para hacer la 'r', cuidando de hacer que la unión entre la extensión de la 'r' y la 'i' sea suave..

Tendrá que dibujar el trazo de la 'i' a la altura correcta, de modo que alinee los trazos de todas las otras letras, por lo que puede ser de gran ayuda crear pautas de Fontforge que marquen las alturas de las uniones. Cree pautas arrastrando hacia abajo desde la regla superior en la ventana de glifo. Asegúrese de que las directrices estén redondeadas a coordenadas enteras.

Luego simplemente dibuja el resto del glifo.

Paso 5

Esta 'i' se dibujó en el espacio del glifo 'r'; Necesitamos moverlo a su propia ranura de glifo. Seleccione el contorno (y el punto) haciendo doble clic en las rutas y córtelos y péguelos en la ranura del glifo 'i'. Establezca el ancho de avance estableciendo todos los rodamientos laterales igual a 0 (Métrica > Establecer ambos rodamientos). Cambia la imagen de fondo si es necesario.

Todavía puede ver las letras una al lado de la otra al escribirlas en el lista de palabras caja. Esto es extremadamente útil cuando se hacen fuentes cursivas para asegurarse de que las uniones sean suaves y estén alineadas.

Paso 6

Aquí estoy rastreando la letra 'l' de la muestra. Puede ser más fácil copiar una letra existente (en este caso, una 'i' sin puntos) y mover los puntos para que coincidan con la nueva letra, aunque todos tienen su propia forma de escanear manualmente las exploraciones..

El sistema de puntos de caja de límite HV a veces se descompone, ya que puede ser imposible trazar ciertas curvas usando solo puntos HV.

En este caso, puede ser necesario insertar puntos de curva adicionales a lo largo de la spline..

Las letras a mano rara vez son perfectas, pero las fuentes tienen que serlo (una de las desventajas de usar fuentes). Eso significa que para evitar combinaciones problemáticas, las letras, especialmente sus movimientos y saltos, deben ser algo estandarizados. En el caso de la 'l', eso significa bajar la cola para que se asiente en la línea de base.

Paso 7

Aquí hay un trazado de la letra 'c'. Como puede ver, realicé algunos cambios con respecto a la versión escrita para hacerlo jugar bien con otras letras. los Ventana de métricas Puede ser muy útil para probar cadenas de letras..

4. Derivando el resto del alfabeto

Su muestra de letras probablemente no contenga todas las letras del alfabeto. De hecho, a veces puede obtener mejores resultados derivando letras de las letras que ya ha dibujado. Por ejemplo, un script 'a' es muy similar a un 'ci'.

Creé la 'a' antes mencionada simplemente aplastando una 'c' y una 'i' en la muestra.

Cada letra que crees engendrará más letras. La 'a', por ejemplo, da lugar a la 'd'.

La 'd' no es la única letra que viene de 'a'. También es posible que pueda derivar el 'q', 'u', 'i' (si comenzó con una 'a' en lugar de un 'i'), 'n', 'm', 'p', 'h', y varios más de 'a'. Hay innumerables maneras en que puede derivar un alfabeto a partir de unas pocas letras de muestra. A continuación se muestra una forma, comenzando con una 's', 'a', 'c', 'e', ​​'l', 'o' y 'r'.

Aquí hay un ejemplo de una fuente que hice con todas las 26 letras..

5. Montaje de una fuente funcional

En este punto, la fuente contiene un alfabeto completo, pero apenas funciona como una fuente, ya que las letras solo funcionan juntas en el nivel más básico. La siguiente parte de este tutorial se centrará en la creación de alternativas necesarias y la programación de la fuente para vincular las letras en un guión cursivo agradable.

Paso 1

Sus letras 'b', 'o', 'v' y 'w' casi seguramente tendrán contornos que terminan más arriba que las otras letras. Haz tu mejor esfuerzo para estandarizar estas cuatro letras tal como lo hiciste con las letras normales.

Paso 2

Si aparece una de esas cuatro letras, la letra que sigue no se vinculará porque su impulso será más bajo que la carrera anterior. Necesitamos crear un conjunto de glifos alternativos con instintos altos que puedan vincularse con 'b', 'o', 'v' y 'w'. Haga esto agregando primero 26 ranuras de glifo a su fuente, en Codificación > Añadir ranuras de codificación.

Las nuevas ranuras ingresarán como espacios en blanco, y tendrá que ordenarlas yendo a Elemento > Otra información > Nombre de glifo masivo.

Dales un sufijo dealto', y asignarlos al bloque del alfabeto que comienza con'una'.

Esto crea un bloque de ranuras llamado 'a.high', 'b.high', 'c.high', etc. Copie y pegue una copia del alfabeto en minúsculas en este bloque.

Paso 3

Dale al glifo 'a.high' un ataque que se conectaría con 'b', 'o', 'v' y 'w'.

Etapa 4

Esto produce una 'a' alternativa apropiada para usar después de 'b', 'o', 'v' o 'w', pero no hace nada a menos que la fuente sepa cuándo usarla. Para indicar a la fuente que sustituya 'a.high', debemos crear una búsqueda de fuente (Elemento > Información de la fuente > Búsquedas > Añadir búsqueda). Que sea un Sustitución única busca, pero no le asignes ninguna característica. Sin un conjunto de características, esta búsqueda servirá como una lista de glifos emparejados para otras búsquedas..

Luego agrega un subestable a la búsqueda. Utilizar el Predeterminado usando sufijo botón para rellenar automáticamente la lista con emparejamientos basados ​​en los nombres de glifos. Si el botón no funciona, guarde su fuente, cierre Fontforge, vuelva a abrirlo e intente nuevamente.

Paso 5

Añadir otra búsqueda, esta una Sustitución de encadenamiento contextual buscar. Asignar el calt característica de la misma, que "activa" la búsqueda en la fuente cuando se utiliza para escribir texto.

Agregue una subtabla, y en ella, cree dos clases: una con 'b', 'o', 'v', 'w' y formas altas, y la otra con todas las demás letras que no estén en la primera clase. 

Al comienzo de cada lista, inserte 'void' o 'void2', porque por alguna razón, Fontforge solo leerá a partir de segundo glifo en cada clase. Para la regla coincidente, escriba el nombre de su primera clase, una canalización, el nombre de la segunda clase y la búsqueda de "enlaces altos" en el formulario @ <> (puede usar la Añadir búsqueda menú).

¿Que está pasando aqui? los Sustitución de encadenamiento la búsqueda se realiza a lo largo de cada letra que escribe y busca si es un miembro de Clase 1 ('b' y amigos). Si es seguido por un miembro de Clase 2 (todas las demás letras), se verá en el enlaces altos buscar, y reemplazar ese glifo con el glifo alternativo asociado que figura en enlaces altos. De este modo, [segundo] [una] se convierte en [segundo] [un alto] cuando se escribe.

Paso 6

Debido a que las clases tienen que estar separadas, esto falla si tiene más de una 'b' o compañía en una fila. Damos cuenta de esto creando una segunda subtabla, con una clase que contiene 'b', 'o', 'v', 'w' y sus formas altas. La regla coincidente tendrá la misma clase dos veces, y la segunda tendrá aplicada la búsqueda de enlaces altos. Esta subtabla buscará 'b' seguidas por otras 'b' (u otras letras en esa clase) y realizará las mismas sustituciones.

Deberías tener dos subtablas en el calt buscar ahora.

Paso 7

Una vez que haya 'OK' fuera del panel de información de fuentes, debería poder ver la búsqueda en acción en la ventana Métricas.

Con la ventana Métricas como una ayuda visual, convierta el resto de las letras en el bloque alto a tener golpes altos.

Las uniones altas deben conectarse sin problemas en la ventana Métricas.

6. polaco estilístico

En este punto, la fuente se ha convertido técnicamente en una verdadera cursiva, ya que la fuente ligará automáticamente cualquier combinación de letras que escriba. Pero todavía tiene mucho camino por recorrer para hacerlo Mira mejor.

Paso 1

En la parte superior de la lista de problemas para suavizar está el vínculo entre las letras de altura x y las letras ascendentes como 'h', 'k' y 't'. Como puede ver, las uniones pueden parecer un poco incómodas.

Tenemos que solucionar esto creando otro conjunto alternativo de letras, que se sustituirán cuando ocurran antes de una letra ascendente. Nombra a estos como los glifos altos, pero dales el sufijo .escarpado.

Cree otra búsqueda sin características, con una subtabla llena de pares de glifos regulares y empinados.

Paso 2

También deberá crear versiones alternativas de los glifos 'h', 'k' y 't' para enlazar con los glifos empinados (que tienen impulsos empinados). Probablemente sea más fácil agregar tres ranuras de glifo y nombrarlas h.insteep, k.insteep, y t.insteep a través de Elemento > Información de glifos ventana. También es posible que desee hacer otras tres copias de estos glifos para los casos en que se produzca más de una 'h' en una fila, aunque parece que actualmente no es funcional.

Por supuesto, dales su propia subtabla..

Paso 3

A continuación, entramos en el calt busque y agregue una tercera subtabla para configurar nuestras reglas de encadenamiento. En una clase, coloque la 'h', 'k' y 't', y en la otra ponga el resto del alfabeto, excepto 'h', 'k' y 't', porque las clases deben ser desarticular; y las letras 'b', 'o', 'v' y 'w', que, como letras altas, no pueden tener grandes rasgos. 

La segunda clase (letras regulares) va primero y obtiene el steeplinks búsqueda aplicada a ella. La primera clase recibe el insteplinks búsqueda aplicada a ella. Esto significa que si la fuente produce una combinación como [una] [h], la [una] será reemplazado con [una empinada], como se especifica en la subtabla de steeplinks, y la [h] se reemplaza con [h.insteep], según la subtabla insteeplinks. Esto produce el par emparejado [una empinada] [h.insteep].

Etapa 4

Luego entramos y modificamos los glifos alternativos para tener enlaces empinados. Será útil crear un tercer conjunto de directrices aquí. Puede omitir 'h', 'k' y 't', y 'b', 'o', 'v' y 'w', ya que no pueden proporcionar enlaces empinados bajo nuestra programación actual.

Como antes, la ventana Métricas te ayuda a ver cómo funciona la fuente y te ayuda a diseñar enlaces suaves.

Esto debería producir enlaces suaves en la mayoría de los casos. Se producirá un error si hay varias letras ascendentes en una fila en teoría, puede crear una cuarta subtabla en calt para sustituir las propias letras ascendentes sustituidas, aunque por alguna razón esto no funciona. La fuente retrocederá a la vinculación antigua, menos suave, pero aún conectada. 

También fallará en combinaciones como 'bat', con una letra alta combinada con una letra empinada de nuevo, en teoría, puede programar una subtabla que reemplazaría las letras altas con alternativas que son altas y empinada, pero de nuevo, en mi experiencia esto no funciona. 

Sin embargo, lo mejor que puede hacer es asegurarse de que la subtabla de vinculación empinada aparezca en la lista abajo los subtabos de enlaces altos cuando se enumeran en calt; este mecanismo de respaldo se asegura de que las primeras dos subtablas puedan realizar sus funciones más importantes sobre la tercera en caso de que surja un conflicto.

Paso 5

Un problema más importante pueden ser los pares de conflicto fijo como 'ti' y 'th'.

La forma más fácil de arreglar esto es crear ligaduras-Reemplazos personalizados para estos pares de letras problemáticas. Creé seis ligaduras: una ligadura 'ti' y una ligadura 'th', además de variantes altas y pronunciadas (recuerde agregarlas a las listas de búsqueda).

Paso 6

Las ligaduras deben programarse en una fuente con una Sustitución de ligaduras búsqueda, que debe agregar a la lista de búsqueda de su fuente. Marcarlo dlig (ligadura discrecional). Ya que calt es más importante que el dlig búsqueda, asegúrese calt aparece primero en la lista de búsqueda para darle prioridad si hay un conflicto.

La sustitución de ligaduras es más sencilla que la sustitución contextual: solo crea una subtabla dentro de ella para enumerar las ligaduras y los pares de letras que reemplazan. Porque dlig entra en vigor después de calt ha hecho lo suyo, los glifos de origen deberían ser los sustituidos por calt.

Debería poder ver las ligaduras en acción en la ventana Métricas.

Paso 7

Esto cubre los conceptos básicos de cómo crear una fuente cursiva. Una fuente completa contendrá muchos otros glifos, como acentos, símbolos, mayúsculas y otros. Algunos de estos glifos deberán integrarse en la programación del enlace agregando sus nombres a las diversas subtablas de búsqueda..

Una advertencia para cuando vaya a exportar su fuente como un archivo de fuente real (.ttf, .otf) a través de Expediente > Generar fuentes. Poco de la programación que agregamos a la fuente se guardará en el archivo de fuente exportado a menos que usted verifique la De tipo abierto caja en el Opciones ventana. Hay algunas otras cosas de limpieza que debe ejecutar antes de exportar su tipo de letra que son estándar en tipo digital:

  1. Eliminar todas las superposiciones (seleccione todos los glifos con Control-A, Elemento > Superposición> Eliminar superposición).
  2. Redondea todas las coordenadas a enteros (selecciona todos los glifos, Elemento > Redondo > A int).
  3. Haga que los contornos externos se ejecuten en el sentido de las agujas del reloj (seleccione todos los glifos, Elemento > Dirección correcta).

Felicidades, estas hecho!

Ahora sabe cómo diseñar un tipo verdaderamente cursivo, un tipo que simplemente funciona cuando lo usa en una aplicación. ¡Una fuente así no siempre es necesaria, las letras a mano no deben ser olvidadas! Pero ciertamente es algo útil y divertido para tener cerca, y las posibilidades con la programación OpenType son infinitas. Felices fuentes!

La fuente utilizada como ejemplo en la segunda mitad de este tutorial es En Screaming Color, una fuente cursiva que diseñé que se puede encontrar en dafont.com.