1 puntos por GN⁺ 2025-09-07 | 1 comentarios | Compartir por WhatsApp
  • Para darle personalidad a un sitio web personal, se intentó crear directamente una fuente basada en escritura a mano.
  • El uso de herramientas open source como FontForge e Inkscape no resultó intuitivo y causó incomodidades.
  • Al final, mediante el servicio de pago Calligraphr, fue posible generar y corregir fácilmente una fuente manuscrita.
  • Fue necesario hacer ajustes finos y correcciones repetitivas, pero hubo satisfacción con el resultado final.
  • También dejó una buena impresión la política de negocio amigable con el usuario de Calligraphr, por lo que se recomienda.

Un intento por agregar personalidad a un sitio web personal

  • Se buscaba que el sitio web propio tuviera una atmósfera más personal y distintiva, diferente a la de los sitios corporativos aburridos.
  • Se habían ido añadiendo pequeños cambios de diseño, como efectos únicos en imágenes y enlaces.
  • En lugar de una tipografía monoespaciada tradicional, se quería aplicar una fuente cursiva con sensación de escritura a mano, pero al no encontrar una adecuada, se decidió crear una directamente.

El intento fallido con herramientas open source

  • Se intentó crear una fuente vectorial usando herramientas open source como Inkscape y FontForge.
    • Se escribió la A, B y C mayúsculas con una tableta gráfica, se guardaron como SVG y luego se intentó importarlas a un editor de fuentes.
    • La mala experiencia de usuario de FontForge y su UI poco intuitiva resultaron frustrantes.
    • Incluso en tareas básicas como seleccionar e importar archivos o cargar SVG, hubo muchos tropiezos y molestias.
    • Al editar glifos, también se sintió incómodo manipular los manejadores Bézier para trabajar las curvas.
    • Debido a los mensajes de error repetitivos y al engorro de navegar por rutas, se abandonó el intento a medio camino.
  • También se probó la función de creación de fuentes SVG de Inkscape, pero se comprobó que era un proceso complejo e ineficiente, ya que requería combinar cada glifo en una sola ruta y conocimientos de edición vectorial.

La elección del servicio web de pago (Calligraphr)

  • Mientras se buscaban varios tutoriales open source, se descubrió la existencia del servicio closed source Calligraphr.
    • La versión gratuita tiene limitaciones en ligaduras, variantes y un máximo de 75 glifos, pero es posible usar las funciones premium con un solo pago por 1 mes.
    • Se valoró mucho que pudiera usarse con un único pago sin renovación automática y una política de precios transparente.
  • Cómo se usa Calligraphr
    • Funciona imprimiendo una plantilla, escribiendo a mano sobre ella y luego escaneándola para subirla al servicio.
    • La plantilla puede incluir distintas formas, como caracteres, símbolos y ligaduras seleccionadas.
    • Se pueden crear varias versiones para evaluarlas y elegir una, y también se añadieron ligaduras personalizadas ajustadas al título del blog.
    • Se usó un plumón Sharpie para dar un estilo de trazo grueso y definido.
    • Se aprovechó la función de escaneo de documentos del iPhone para escanear en PDF y luego subirlo.

Mejora iterativa y ajustes finos de la fuente

  • A través de la web UI de Calligraphr fue posible previsualizar la fuente y probar su aplicación directamente.
    • Al aplicar la fuente al sitio web real, se revisó la legibilidad y el diseño en distintos tamaños.
  • La primera versión tenía problemas, como letras que no se alineaban con la línea base y rompían el equilibrio, así que se corrigieron con detalle mediante funciones de ajuste de posición y tamaño.
  • Se redujo el espaciado entre letras (kernig) para dar esa sensación de conexión natural propia de la escritura a mano.
  • Algunos glifos incluían ruido escaneado fuera del área del glifo, lo que generaba espaciados extraños.
    • Si solo se reducía el ancho, quedaban puntos sueltos en las oraciones.
    • Se solucionó bien eliminando por completo los píxeles innecesarios con la herramienta de edición.
  • Este trabajo repetitivo incluso se sintió agradable, porque las mejoras se notaban claramente a simple vista.

Resultado y experiencia positiva con el servicio Calligraphr

  • La fuente terminada le dio a los encabezados y pies de foto del sitio web una sensación similar a la escritura real a mano, cumpliendo con la personalidad que se buscaba.
  • Gracias al grosor del Sharpie, ofrece excelente legibilidad incluso en texto pequeño.
  • A diferencia de las herramientas open source, se sintió la eficiencia de lograr el resultado en poco tiempo y con bajo costo.
  • Incluso después de terminar la suscripción, Calligraphr exporta automáticamente un respaldo de los datos del usuario.
    • Incluye toda la información de los glifos y los datos de imagen en formato JSON, lo que permite reutilizarlos más adelante para volver a suscribirse o seguir editando.
    • Dejó una gran impresión por sus prácticas de negocio amigables con el usuario, como políticas claras de antemano, sin empujar pagos recurrentes y con entrega transparente de los datos.
  • Si alguien quisiera intentar hacer lo mismo, es una experiencia recomendable aunque sea solo por la simplicidad y el enfoque al cliente de Calligraphr.

1 comentarios

 
GN⁺ 2025-09-07
Comentarios de Hacker News
  • Hice algo parecido en 2013 para mi sitio web de bodas. Usé un servicio por correo para crear un TTF decente y luego lo convertí a WOFF. Todavía sigue en línea en https://ruthandjosh.net/story/ (advertencia: vibra millennial)
    • Mantener un sitio con enlaces vivos en estos tiempos es realmente impresionante
    • Esta historia es realmente hermosa, no me dio nada de pena ajena
    • Gracias por compartir esta cursilería, me ayudó a cerrar la semana de maravilla. Shabat shalom
    • Este sitio está realmente genial. El diseño y la maquetación hasta se sienten atemporales
    • Me pregunto si Ruth de verdad se tomó una champaña sola en el avión
  • Aplaudo el esfuerzo y el proceso. Me identifico con esa decisión honesta de dejar de lado una alternativa de código abierto y optar por una más barata para tener algo propio. Mi historia también es parecida. Yo también soy un creativo autodidacta, así que a veces me pongo terco porque de verdad quiero probar cierta técnica o herramienta. No sé si sea por costo hundido o por perfeccionismo. El diseño del sitio tiene muchísima personalidad. PD: lo guardé en marcadores en mi Firefox bajo fonts, developer-blog, creative-sites, boutique-designs
  • Mi letra es realmente terrible, y entre más escribo peor se pone. Es un círculo vicioso. Como tengo mala letra, termino tecleando todo, y como no practico, empeora más. Si hiciera una fuente con mi letra, creo que hasta serviría como hash criptográfico. Aun así, me gusta la idea en sí. No siento que escribir mensajes a mano sea menos personal que teclearlos, pero en la práctica sí se siente un poco menos personal. Creo que una fuente hecha con letra manuscrita podría compensar un poco esa sensación
    • Quedaría perfecta como fuente para una portada de álbum de black metal
    • Creo que este fenómeno de "hay una forma más fácil, así que ya ni siquiera sientes la necesidad de aprender la habilidad" es un problema realmente serio hoy en día. Como la gente solo aprende sistemas fáciles, al final no aprende habilidades reales, sino solo a usar el sistema. Por ejemplo, mi roommate solo sabe usar un sistema para afilar cuchillos y no puede afilar uno a mano. Sin el sistema no puede hacer nada. Hoy en día hay muchísima gente así. Solo siguen el manual y no tienen conexión con el porqué de las cosas. Como sociedad también nos hemos debilitado mucho en capacidades básicas, y creo que es porque el capitalismo convirtió todo en una estructura donde pagas por ahorrar tiempo
  • Hasta donde sé, Microsoft Font Maker todavía funciona gratis en Windows Ink con stylus (aunque puede que no sea muy bueno). No recuerdo qué usé antes, pero quizá venía incluido en un PowerToy para Windows Tablet PC. https://apps.microsoft.com/detail/9n9209f8s3vc?hl=en-US&gl=US
  • Como sufrí abuso en la infancia, mi letra es muy mala. Tampoco sé escribir bien en cursiva. Si existiera una fuente hecha con mi letra, todos dirían: "vaya, los papás de esta persona debieron de haber sido muy irresponsables". En Microsoft Word el nombre de la fuente probablemente aparecería como "Danny Wets The Bed". Es broma, pero disfruté mucho leer esto y es un post excelente
  • Cuando era adolescente, una vez hice una ttf-font con la letra de la chica que me gustaba y se la regalé. De verdad subestimé muchísimo ese trabajo. Usé una herramienta incluida en Corel Draw Suite, escaneé el alfabeto que ella había escrito y vectoricé cada letra a mano. Fue una cantidad brutal de trabajo. Han pasado 25 años desde entonces, y todavía me sorprende esa pasión inocente que tenía en esa época. Le dediqué una cantidad enorme de tiempo solo para hacer un regalo de cumpleaños y, la verdad, en gran parte no tenía idea de lo que estaba haciendo. Al final lo terminé, pero creo que solo fue posible precisamente porque no sabía nada
    • Mucho mejor que un mix tape. Si yo escribiera algo con mi letra, sería más bien un castigo
    • Me pregunto qué pasó después entre ustedes. Quisiera saber si ese esfuerzo valió la pena y si tuvo un final feliz
  • Me pregunto si la tecnología ya avanzó lo suficiente como para que en la práctica no se pueda distinguir de una letra escrita a mano. También me pregunto si, usándolo para tareas manuscritas que piden algunos profesores en la escuela, uno podría salirse con la suya sin que lo descubran. Esto es, por supuesto, un escenario hipotético
  • Me pregunto si hay alguna manera de convertir en un archivo de fuente real el enfoque que probó Amy Goodchild ( https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript )
    • Probablemente sería un asunto de "traducir" los paths de Chaikin a curvas de Bézier. Entonces se podría hacer una fuente en Metafont y, desde ahí, convertirla a ttf, otf, etc.
  • Hay otras personas que han recorrido un camino parecido
    • También está la excelente fuente Tekton, que existe desde hace tiempo. Está basada en la letra manuscrita del arquitecto Frank D.K. Ching, aunque el diseño real lo hizo David Siegel de Adobe
  • Es un trabajo realmente genial. Gracias por compartirlo. Justo ahora estoy preparando un taller con niñas y niños, y quería que ahí pudieran vivir la experiencia de "dibujar ellos mismos" su propio sitio web o webapp. Hasta ahora no había incluido la parte de crear fuentes porque no sabía cómo hacerlo, pero ahora ya sé cómo. ¡Muchas gracias! Si alguien tiene ideas para hacer este taller más divertido, me encantaría escucharlas. Por ejemplo, quería intentar una transición natural entre lo analógico y lo digital, como hacer prototipos en papel y convertirlos en dummies clicables reales. Por cierto, aquí los niños tienen entre 8 y 10 años
    • Hola, si me aceptan, a mí también me gustaría contribuir con eso. Siempre he querido enseñar tecnología creativa a niñas y niños de mi ciudad natal. Estoy en Nigeria/África, y programo JavaScript sin comillas simples ni punto y coma.