Cómo creé una fuente con mi letra manuscrita

 (kokorobot.ca)
3 puntos por GN⁺ 2023-11-28 | 1 comentarios | Compartir por WhatsApp
  • Como el texto manuscrito del cómic hakum variaba en tamaño y legibilidad de una página a otra, decidió crear su propia letra como una fuente TTF en lugar de usar una fuente existente
  • El segundo intento, escaneando texto escrito en papel, se veía más natural y orgánico que la escritura digital hecha con una tableta gráfica
  • El alcance se limitó a A-Z, a-z, números del 0 al 9 y signos de puntuación básicos; funciones ampliadas como negrita, cursiva y ligaduras quedaron fuera del objetivo
  • El flujo consistió en limpiar las imágenes escaneadas en Gimp, separarlas como PNG y luego ajustar contornos de glifos, side bearings y kerning en FontForge
  • En los procesos de Autotrace y exportación pueden aparecer problemas de validación como missing points at extrema y self intersecting, por lo que una fuente manuscrita requiere bastante posprocesamiento

Por qué convertí mi letra manuscrita en una fuente

  • Antes, el texto del cómic hakum se escribía directamente en digital con una tableta gráfica
  • El resultado estaba bien, pero incluso dentro de una misma página el tamaño de las letras a menudo aumentaba o disminuía, lo que a veces afectaba la legibilidad
  • Como no quería usar una fuente existente, decidió crear una fuente basada en su propia letra manuscrita
  • El objetivo era una fuente TTF para publicar en la web, incluyendo solo un conjunto limitado de caracteres
    • No se crearon versiones en negrita ni cursiva
    • Era la primera vez creando una fuente y usando FontForge, así que pueden existir métodos mejores

Dos intentos y terminología básica de tipografía

  • La primera fuente se creó a partir de letra manuscrita digital hecha con una tableta gráfica
  • La segunda fuente se creó con imágenes escaneadas de letras escritas en papel; como la escritura sobre papel era menos precisa, se veía más orgánica y natural
  • Al crear la fuente, aprendió términos de la estructura tipográfica; conocer la función de cada elemento ayuda a tomar mejores decisiones de diseño y a crear una fuente más funcional
    • Ascender: parte de una minúscula que sube por encima de la x-height
    • Baseline: línea base sobre la que se apoyan la mayoría de las letras y por debajo de la cual bajan los descenders
    • Cap Height: línea que indica la altura de la mayoría de las mayúsculas
    • Descender: parte que baja por debajo de la baseline, como en p y q
    • X-Height: distancia entre la baseline y la mean line en las minúsculas

Imagen escaneada y limpieza en Gimp

  • El objetivo de producción incluía mayúsculas A-Z, minúsculas a-z, números 0-9 y signos de puntuación básicos como coma, signo de exclamación y signo de interrogación
  • Al principio, dibujó en un cuaderno líneas guía para baseline, cap height, x-height y descender con lápiz, y luego escribió las letras
  • Al dibujar las letras entre líneas guía quedaban demasiado rígidas, así que después escribió varias veces la frase "The quick brown dog jumps over the lazy fox" en mayúsculas y minúsculas
    • Esta frase contiene todos los caracteres necesarios de a-z
    • Al escribir en forma de oración, no se pensaba demasiado en cada letra y salían mejores formas
    • Al dibujar sobre una cuadrícula, se terminaba prestando atención solo a las restricciones
  • Eligió la frase mejor escrita para crear la fuente y también aprovechó algunas letras dibujadas sobre la cuadrícula
  • Por este método, después tuvo que ajustar digitalmente el cap-height, x-height y descender de cada carácter
  • A las imágenes escaneadas de las letras se les aplicó Color > Threshold en Gimp para eliminar los grises
  • Por las características del lápiz y el papel, y por no haber usado cuadrícula, corrigió defectos de las letras con la herramienta de lápiz de Gimp
    • En Tool Options, desactivó todas las dynamics para obtener líneas limpias
  • Las letras ya limpias se copiaron y reunieron en un nuevo documento de Gimp, con un tamaño suficiente para alojar la letra más grande y ancha: la M mayúscula
  • En esta etapa se verificó que el grosor de los trazos no variara demasiado
  • Todas las letras se exportaron individualmente como PNG a la carpeta del proyecto

Crear glifos en FontForge

  • Eligió FontForge porque funciona en Linux y personas cercanas lo recomendaban; la experiencia de uso fue buena
  • Al crear un proyecto nuevo se abre la Font View Window, donde todos los slots de glifos de la fuente aparecen en forma de tabla
  • En Element > Font Info, ingresó la información de la fuente y agregó el nombre de la fuente bajo PS Names
  • Para exportar como TTF, cambió el Em size a 1024 en General dentro de la misma ventana
    • Por convención, el UPM de las fuentes TrueType usa potencias de 2 como 1024 o 2048
    • Las fuentes OTF tienen requisitos distintos
    • En los antiguos tipos móviles de metal, cada carácter entraba en su propio contenedor espacial para mantener una altura uniforme, y la altura de esa pieza tipográfica se llamaba “em”
  • Al hacer doble clic en un glifo en Font View, se abre Character View
    • Allí se dibuja o edita el glifo
    • Se puede ver uno por uno mediante una interfaz con pestañas, o revisar palabras lado a lado usando un archivo de texto preparado
  • En la lista de capas de la parte inferior izquierda, seleccionó la capa Back y luego importó el PNG de la letra correspondiente con File > Import
  • Luego creó el contorno del glifo de una de estas dos formas
    • Dibujando el contorno manualmente
    • Seleccionando la capa Fore y generando un contorno automático con Select > Autotrace
  • Autotrace toma como referencia la imagen de fondo y crea un contorno con puntos de control y curvas Bézier, pero puede generar demasiados puntos o problemas de extrema faltantes
  • Cuando se crea una forma cerrada, ese glifo también aparece en otras ventanas

Side bearings y vista previa

  • Para cada glifo, ajustó el side bearing izquierdo y derecho para definir el ancho final del glifo
  • Para centrar automáticamente todos los glifos, se usa Metrics > Auto Width
  • Para colocar todos los glifos centrados dentro de su ancho, se usa Metrics > Center In Width
  • Al corregir contornos, ayuda desactivar la capa de referencia
  • Para empezar de nuevo con un glifo, seleccione el glifo deseado en Font Window y use Edit > Clear
  • Para borrar solo la capa de referencia, use Edit > Clear Background
  • En el campo de texto sobre el lienzo de trabajo de Character View, se puede ingresar una palabra o caracteres arbitrarios después de la letra actual para previsualizar cómo se ven las letras una junto a otra
  • Este proceso debe repetirse para todos los glifos; en particular, si no se ajustan los side bearings del glifo Space, el espacio entre palabras queda demasiado grande

Configuración de kerning

  • El kerning es el proceso de ajustar el espacio entre caracteres para que las letras se vean fáciles de leer
  • En Font Window, vaya a Element > Font Info y, en la pestaña GPOS de Lookups, presione Add Lookup
  • En el menú desplegable Type, seleccione Pair Position (Kerning)
  • En la columna Feature, presione la flecha junto a New, seleccione Kern Horizontal Kerning y confirme
  • Seleccione el nuevo elemento GPOS, presione Add Subtable y confirme dejando el nombre predeterminado
  • Las letras a las que se aplicará kerning deben seleccionarse arrastrando en ambas tablas
    • Hay que seleccionar tanto mayúsculas como minúsculas
    • Para seleccionar ambos conjuntos en una tabla, use Shift
  • Al hacer clic en pairings, se muestra una versión ampliada del par de glifos en la parte inferior de la ventana
  • Arrastre el segundo glifo para colocarlo más cerca o más lejos del primero, ajustando todas las combinaciones de glifos para que se vean bien

Pruebas y validación de exportación

  • Para probar la fuente y el kerning dentro de FontForge, use File > Print
  • El texto predeterminado no muestra todas las combinaciones posibles, así que se puede agregar texto propio
  • kern_pairings.txt incluye todas las combinaciones de kerning y puede pegarse en la pantalla de prueba

  • Problemas que pueden aparecer durante la exportación

    • Al exportar con File > Generate Fonts, FontForge puede marcar algunos caracteres para revisión
    • Non-integral coordinates significa que uno o varios puntos del contorno del glifo tienen una posición con parte decimal, como 2.25
    • Seleccione el glifo con problemas, vaya a Element > Validation > Find Problems, marque "non-integral coordinates" y repita fix
    • En una fuente manuscrita que no depende demasiado de la precisión, mover esos puntos a coordenadas enteras muy cercanas puede no producir grandes cambios
    • Missing points at extrema ocurre cuando los puntos de control de una curva empujan la curva hacia afuera de sus límites
    • Hay que ajustar los puntos de control para que el punto más alto o extremo de la curva sea un punto amarillo
    • Element > Add Extrema puede ayudar, pero también puede distorsionar el glifo o crear más problemas de non-integral coordinates
    • Aunque este error estuviera en el log, la fuente pudo generarse, pero pueden aparecer distorsiones sutiles y molestas en la fuente
    • Si la fuente manuscrita es irregular o se usó Autotrace, pueden aparecer problemas de extrema
    • Self intersecting significa que el contorno del glifo se superpone consigo mismo
    • Hay que revisar todas las líneas y eliminar las superposiciones

Elección de TTF e instalación

  • Para el objetivo de uso, TTF (TrueType Font) era suficiente
  • OTF no era necesario porque no se planeaba almacenar muchos glifos, no se querían versiones en negrita o cursiva como estilos separados y no se necesitaban ligaduras
  • El contenido donde se usará la fuente se publicará en la web, y TTF es adecuado para ese propósito
  • Para generar la fuente con todos los glifos de Font View, use File > Generate Fonts
  • Seleccione TTF como formato de salida en el menú desplegable bajo el nombre de la fuente y confirme; la fuente se guardará en la carpeta del proyecto
  • La fuente generada se puede mover a la ubicación de fuentes del sistema
  • Material de referencia y ejemplos de uso

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-11-28
Opiniones de Hacker News

  • Me gustó el resumen de FontForge, y hace tiempo yo también lo probé un poco.
    Es algo tosco, pero tampoco sé si los competidores comerciales serán mucho mejores. Ni siquiera conozco sus nombres.
    Y el sitio web está muy bueno. Es único y tiene una personalidad muy marcada.

    • FontForge es open source, multiplataforma y tiene bastantes funciones, así que se agradece que exista, pero por mi experiencia directa los competidores comerciales sí son bastante mejores en la práctica.
      Si tienes macOS, puedes probar por tu cuenta Glyphs(/Mini) o RoboFont, que tienen periodos de prueba suficientemente largos. Aun así, lo que más expectativas me genera son las herramientas de próxima generación, incluidas las basadas en web como fontra.xyz.
    • También vale la pena seguir de cerca a MFEK para ver si llega a un estado más completo.
      Todo el trabajo relacionado con MFEK que he visto hasta ahora se ve bastante genial.
      https://mfek.org/
    • Ya que salió el tema de FontForge, me pregunto si alguien sabe cómo previsualizar con texto de varios párrafos mientras se crea una tipografía.
      Muchas veces una sola frase como “quick brown fox” no alcanza.

  • 100r.co también vale mucho la pena.
    Devine y Rekka documentan su vida, sus viajes y sus proyectos mientras operan un estudio desde el velero Pino.

  • Buen resumen de FontForge.
    Como sugiere el artículo, para hacer una tipografía a partir de escritura a mano también hay opciones más fáciles y automatizadas. Luego se puede retocar la tipografía resultante.
    https://www.calligraphr.com/en/ antes se llamaba MyScriptFont.

  • La tipografía que hizo se ve bastante parecida a una que hice yo.
    https://imgur.com/a/g8bIoUY
    No me metí demasiado en optimizaciones como el kerning, pero los 3 o 4 programas que probé eran todos tremendamente frustrantes, estaban rotos o eran difíciles de manejar. Puede que haya sido por cómo los usé, y sospecho que el software pago es mucho mejor. Es admirable que lo haya llevado hasta el final.

  • Me pregunto cuál es la forma más sencilla de combinar varias tipografías en una sola.
    VS Code no admite configurar tipografías por lenguaje o por token. Por ejemplo, no se puede usar Comic Sans para los comentarios y otra tipografía para el resto, aunque sí se pueden configurar cosas como cursiva/negrita.

  • Me gustan las tipografías desde que empezaron a usarse de forma generalizada en los 80, cuando se puso de moda el Desktop Publishing.
    Se podría decir que durante un tiempo se usaron en exceso, pero fue una de las primeras cosas que me hizo notar que el diseño importa. En fin, es una tipografía genial y el resumen también es excelente.

  • Me pregunto si realmente hay gente que haga tipografías con MetaFont/MetaPost.
    Tampoco sé si FontForge tiene funciones de scripting. Nunca lo usé directamente, solo leí sobre él, pero sí leí los 5 volúmenes de “Computers and Typesetting” de Knuth.

  • Me pregunto si ya existe alguna startup wrapper de IA que haga creación de tipografías.
    El prompt sería interesante. Por ejemplo: “diseña una tipografía navideña amigable para niños, con una fuerte influencia balcánica pero también mezclada con brutalismo soviético”.
    Comercialmente también debería volverse culturalmente natural usar tipografías exóticas. Entiendo por qué se usan Helvetica, Roboto, Noto Sans y tipografías más modernas, pero honestamente el mundo se volvió un poco monótono.

  • Fue una oportunidad desaprovechada que el propio post del blog no usara su propia tipografía.

  • La frase no debería ser que “el perro salta sobre el zorro”, sino que el zorro salta sobre el perro ;-)
    Porque los perros son flojos y los zorros son rápidos.