Experimental Letters

Editor web para crear letras sobre grillas modulares. Hay dos tipos de grilla:

• Puntos (cuadrados), con la que empieza cada tipografía nueva: una grilla de puntos, como la de un cuaderno punteado, donde cada celda es un cuadrado. Las esquinas se pueden redondear —todas a la vez o una por una, con radios de varias celdas para hacer arcos, panzas y contraformas redondas, al estilo de los alfabetos geométricos modulares— y la letra puede ser rellena o solo un contorno que recorre el borde de los cuadrados.
• Círculos (estrellas): cada celda rellena dibuja la estrella cóncava que queda entre cuatro círculos vecinos; la curvatura de esos círculos define el carácter de la letra.

Abrir el editor: https://danielasalamanca.github.io/experimental-letters/

Cómo está organizada

• Arriba: tu tipografía (elige otra en la lista), deshacer y rehacer, Nueva, Guardar y Exportar fuente. El botón ? abre una guía rápida con los atajos.
• Izquierda: las letras de la fuente; clic en una para editarla.
• Centro: las herramientas (Dibujar, Seleccionar, Nodos, Esquinas, Piezas) en una barra; las opciones de la herramienta activa aparecen debajo, en una franja clara. Más abajo, el lienzo.
• Derecha: dos pestañas. Esta letra: ancho, márgenes, alternativas, nodos, piezas, la forma y grilla propias de la letra, componentes y copiar desde otra letra. Toda la fuente: forma global, grilla, métricas, tipografía, pesos y exportar. Así un ajuste global nunca se cambia por error al editar una letra.
• Abajo: la barra Probar para escribir con tu fuente y ajustar el kerning.

Qué se puede hacer

Mapa de caracteres y glifos

• ¿Por dónde empiezo? (arriba de las letras): un torpedo con el orden habitual para diseñar. Primero las letras de control, n o y H O, que fijan el grosor, las curvas y el espaciado; luego las que reutilizan sus partes (h m u r; b d p q; I L F E T…), las redondas, las diagonales, los números y la puntuación. Marca las letras ya dibujadas y Siguiente sugerida abre la primera que falta.
• A la izquierda está el set completo: A–Z, a–z, 0–9, puntuación (. , ; : ! ¡ ? ¿ - – — ' " ‘ ’ “ ” « » ( ) /), símbolos (& @ # % $ €), ñ, Ñ, las vocales acentuadas (á é í ó ú ü y Á É Í Ó Ú Ü), los acentos usados como componentes (´ ˜ ¨ y sus versiones para mayúsculas) y el espacio.
• Cada celda muestra la miniatura del glifo, o el carácter en gris si está vacío. Clic para abrirlo en el editor.
• Marcas en las celdas: punto azul = curvatura propia; cuadrado verde = glifo compuesto.
• Panel Glifo: carácter y código Unicode, columnas, márgenes laterales izquierdo y derecho (también se arrastran en el lienzo desde sus etiquetas verdes, en pasos de una décima de celda) y el ancho de avance resultante.
• Componentes: un glifo puede reutilizar otro con un desplazamiento en columnas (x) y filas (y). Las vocales acentuadas (minúsculas y mayúsculas) y la ñ/Ñ ya vienen como letra + acento, así que al editar la "a" o el acento se actualiza la "á". Las mayúsculas usan acentos de mayúsculas propios (´.case, ˜.case, ¨.case, como en Glyphs): empiezan como el acento de minúscula subido a la altura de mayúsculas, y se pueden dibujar más planos o más bajos sin tocar las minúsculas. El botón ↔ centra un acento sobre la tinta de la letra. "¡" y "¿" son componentes girados 180° de "!" y "?": siguen sus dibujos, su grilla, sus columnas y sus márgenes, y cuelgan de la altura de x bajando de la línea base, como se usa en español (se pueden subir o bajar con la y del componente). En el lienzo, lo que viene de componentes se ve en gris. Descomponer copia todo al dibujo propio del glifo.

Dibujo y herramientas

• Nodos (A), como la selección directa de Illustrator: muestra los puntos del contorno real de la letra (con sus piezas y esquinas).
  • Arrastra un punto para moverlo; se ajusta a los puntos y medios puntos de la grilla al acercarse (Alt: sin ajuste; Shift: horizontal, vertical o a 45°).
  • Clic elige un punto, Shift + clic suma o quita, y arrastrar en un lugar vacío elige varios con un rectángulo. Cmd/Ctrl + A los elige todos; las flechas los mueven ¼ de celda (Shift: 1 celda); Supr los borra; Esc quita la selección.
  • Un punto elegido muestra sus manijas (curvas Bézier) para arrastrarlas; en un punto suave las dos se mueven juntas (Alt las separa).
  • ＋ Agregar nodo (aparece al elegir Nodos): con el botón activo, un punto sigue al puntero por el borde de la letra y un clic agrega ahí un nodo, que puedes arrastrar sin soltar. Esc sale del modo. También sirve el doble clic en un tramo.
  • − Quitar nodo borra los puntos elegidos (igual que Supr) y Esquina ↔ Curva los cambia entre esquina y curva (igual que el doble clic en un punto).
  • Con el espejo activado, el punto simétrico se mueve igual.
  • ▭ Rectángulo y ◯ Elipse: arrastra para dibujar una forma nueva encima (se ajusta a puntos y medios puntos de la grilla; Shift: cuadrado o círculo; Alt: libre).
  • Buscatrazos, como el de Illustrator, sobre las formas elegidas (las que tienen algún punto elegido; sin selección, todas). Con una sola forma elegida —por ejemplo, la que acabas de dibujar— la combina con todas las demás, como la de más arriba:
    • Unir: junta las formas en una.
    • Restar frente: la forma de arriba recorta a las de abajo (por ejemplo, una elipse que se vuelve contraforma).
    • Intersecar: deja solo lo que tienen en común.
    • Excluir: quita las partes donde se superponen. Las curvas se conservan como curvas.
  • La herramienta Esquinas también funciona en letras editadas con nodos: el redondeo queda "vivo" (el nodo sigue en la esquina y el arco se aplica encima), así que se puede cambiar o quitar cuando quieras, y si mueves el nodo, su redondeo lo acompaña.
  • Enderezar (en Nodos): si una curva ya son puntos (por ejemplo, una letra redondeada en la grilla y pasada a nodos), elige sus dos extremos y vuelve a ser la esquina en punta original, donde se cruzan sus dos tramos. Después se puede redondear de nuevo, en vivo, con Esquinas.

Grilla y unidades

• Tipo de grilla (panel Grilla): círculos o puntos, para toda la fuente. Cada glifo puede usar otra en Grilla de este glifo (panel Glifo); en el mapa de caracteres se marca con un cuadradito naranja. El dibujo (las celdas) es el mismo en ambas grillas, así que puedes cambiar de una a otra cuando quieras.
• La fuente usa un sistema de UPM (por defecto 1000 unidades por em).
• Cada celda mide un número fijo de unidades (por defecto 50), así que la grilla queda mapeada a las unidades de la fuente.
• Opacidad de la grilla: atenúa los círculos de fondo para ver mejor la letra.

Probar y espaciar

• La barra inferior Probar compone en tiempo real lo que escribas con tu fuente, usando los anchos de avance, márgenes y kerning reales. Admite varias líneas; los caracteres que no están en el set aparecen como una caja punteada.
• Textos de prueba predefinidos (hamburgefonstiv, HOHOHOH nonono, alfabetos, números, pares típicos de kerning y frases en español).
• Tamaños: pequeño, mediano y display. Invertir cambia tinta y fondo.
• Kerning: haz clic entre dos letras del texto (en la mitad derecha de la primera o la izquierda de la segunda) para elegir el par; ajústalo con − y +, con las flechas ← → (Shift: de a 50 u) o escribiendo el valor. Los pares ajustados aparecen como etiquetas debajo; clic para volver a uno.
• Grupos de kerning (como en Glyphs): en Esta letra › Grupos de kerning cada letra puede tener un grupo por lado. Si V y W tienen el grupo izquierdo «V» y A el derecho «A», un solo valor de AV vale para AV, AW, ÁV, ÁW… Las acentuadas y las alternativas heredan los grupos de su letra. Como en Glyphs, la barra de kerning muestra cada letra del par con el grupo del lado que kernea (A @A | @V V; clic en el grupo, o en «sin grupo», para asignarlo) y qué se está ajustando: Grupos @A @V (vale para todo el grupo), Excepción AW (solo ese par, por encima de los grupos) o Solo el par (letras sin grupo). Clic en «Grupos» convierte el par en excepción y Quitar lo devuelve al valor de los grupos. Sobre el texto de prueba se ve el valor de cada par kerneado: en negro los de grupo, en rosado las excepciones y más claros los pares sueltos. Al exportar, los valores de grupo se escriben como pares de todas sus letras.
• Doble clic en una letra del texto la abre en el editor.

Métricas verticales

• Líneas guía con nombre y color: ascendente, altura de mayúsculas, altura de x, línea base y descendente, más franjas suaves de overshoot sobre la línea base, la altura de x y la de mayúsculas.
• Se editan arrastrando sus etiquetas de color en el lienzo o escribiendo el valor en el panel "Métricas". Siempre quedan ancladas a filas enteras.
• Son globales para toda la fuente. Mover una guía no cambia los dibujos: solo la referencia.
• Filas de la grilla: en el panel "Grilla" se elige cuántas filas tiene cada zona (sobre las mayúsculas, de la x a las mayúsculas, altura de x y bajo la línea base) con − y +, y se ve el total. Agregar o quitar filas en una zona mueve las líneas que están encima. Si quedan letras dibujadas con las filas anteriores, aparece Ajustar letras a las filas, que hace lo mismo que el botón de abajo.
• Ajustar glifos a métricas: adapta los dibujos a las métricas nuevas sin escalarlos. En cada zona que cambió inserta o quita filas enteras (como en una planilla), duplicando o quitando primero las filas que repiten a su vecina, como los tramos rectos de un fuste. Antes de aplicar muestra cuántos glifos cambiarán, y se puede deshacer.

Forma

• Curvatura global (grilla de círculos) o redondeo global de las esquinas (grilla de puntos), en Toda la fuente › Forma. En Esta letra › Forma de esta letra se le da a un glifo un valor propio (marcado con un punto azul en el mapa), se vuelve al global o se elige su grilla.
• Grilla de puntos: las esquinas quedan en punta hasta que actives Redondear todas las esquinas; recién entonces se aplica el redondeo global, así puedes dejarlo para el final. Las esquinas redondeadas con la herramienta Esquinas y el redondeo propio de un glifo se aplican siempre.
• Grilla de puntos: Estilo relleno o contorno, y grosor del contorno en unidades (hasta casi media celda). El contorno se exporta como tal a la fuente.
• Unión mínima (grilla de círculos; activada por defecto, 15 u): engrosa las puntas donde dos estrellas solo se tocan, para que queden unidas con al menos ese grosor. El lienzo la muestra mientras dibujas, así lo que ves es lo que se exporta.
• Colores de tinta y fondo.

Pesos y fuente variable

Como en Glyphs, una tipografía tiene dos másteres: el Regular, que es el dibujo, y uno grueso (ExtraBold por defecto). Los pesos intermedios (Medium, SemiBold, Bold…) se calculan entre los dos, punto por punto.

• Máster (junto a las herramientas, o tecla M): cambia entre el Regular y el grueso. El máster grueso se edita con las mismas herramientas, mientras el Regular se ve detrás como referencia; su ancho en columnas y sus márgenes se cambian en el panel Letra.
• Dibujar en la grilla: copia el dibujo del Regular (celdas, esquinas y piezas) al máster grueso para redibujarlo con su propia grilla: por ejemplo, una "n" de 9 columnas en Regular y de 13 en ExtraBold, con trazos más gruesos. Las esquinas redondeadas se copian en su lugar original: si ensanchas la letra, redondea de nuevo las que se movieron.
• Automático: cada letra empieza con un máster grueso hecho engrosando su Regular (Engrosar, en unidades por lado de los trazos verticales; los horizontales engrosan el Contraste de eso, 60 % por defecto, como en un negrito dibujado). Mantiene las alturas: lo que toca la línea base, la altura de x, la de mayúsculas, la ascendente o la descendente (con su overshoot) no se mueve, y las barras engrosan hacia adentro. Mientras no lo toques, sigue al Regular: si cambias el dibujo, Engrosar o Contraste, se vuelve a hacer solo. Cuando mueves un punto pasa a ser tuyo; Engrosar automático vuelve a él.
• Compatibles: para interpolar, los dos másteres deben tener la misma cantidad de contornos y de puntos, con las curvas en los mismos tramos (las mismas esquinas redondeadas). El orden de los contornos y dónde empieza cada uno se emparejan solos. Si no coinciden, la barra lo avisa con el motivo, la letra lleva un punto rojo y el panel Pesos la lista; esas letras quedan iguales en todos los pesos hasta que las arregles o las regeneres.
• Las letras con tilde (á, ñ…) arman su máster grueso con los de sus partes.
• Panel Pesos (fuente variable): el peso del Regular (400), cuál es el máster grueso (de Medium a Black) y cuánto engrosa el automático, con su contraste.
• Probar: el control Peso muestra el texto en cualquier peso.
• Exportar: en el panel Exportar eliges qué fuente descarga Exportar fuente: un peso (Regular, Medium, SemiBold, Bold, ExtraBold…) como .otf estática, o la fuente variable (.ttf) con todos los pesos en un solo archivo, con sus nombres (eje de peso wght).

Mis tipografías, proyecto y exportación

• Tipografía (arriba del panel Fuente): lista de tus tipografías guardadas en este navegador; elige una para abrirla.
  • Nueva: empieza una tipografía en blanco con el nombre y la grilla que elijas. La actual queda guardada en la lista.
  • Guardar: guarda la tipografía abierta (además, cada cambio se guarda solo; el panel muestra la hora del último guardado).
  • Duplicar: crea una copia y sigues trabajando en ella; el original queda intacto.
  • Eliminar: la quita del navegador, después de confirmar.
  • Cada tipografía tiene su propio historial de deshacer.
• Panel Fuente: nombre de la familia, estilo (Regular, Bold…), diseñador/a y versión.
• Descargar .json guarda un archivo con todo (glifos, métricas, kerning, metadatos y preferencias), para respaldar o llevar la tipografía a otro computador o navegador. Abrir .json la agrega como una tipografía nueva de la lista, sin reemplazar la que tenías abierta.
• Exportar fuente (.otf): genera una fuente OpenType instalable (doble clic en el archivo) para usar en Illustrator, InDesign, etc.
  • Cada glifo se convierte en contornos cerrados, sin superposiciones y con la dirección correcta (exteriores en sentido antihorario y contraformas en sentido horario), con la curvatura de cada glifo. Los arcos son curvas Bézier, no polígonos.
  • Con unión mínima (por defecto): las puntas que solo se tocan quedan unidas con el grosor elegido, igual que en el lienzo.
  • Exportar tal cual: sin unión; las estrellas que se tocan en un punto quedan unidas solo por ese punto.
  • Incluye el kerning (tabla GPOS), los anchos de avance y las métricas.
  • Formato › Para la web (.woff): la misma fuente (un peso o la variable) comprimida para usarla en un sitio con @font-face. Es WOFF 1.0: WOFF2 necesita compresión Brotli, que los navegadores no traen para comprimir.
• Exportar SVG / PNG del glifo o del texto de prueba, opcionalmente con las líneas de métricas (y la grilla, en el glifo) para presentaciones.

Si usaste la primera versión, tu letra pasa a la "a" y tus letras guardadas aparecen en "Borradores".

Glosario

• UPM (unidades por em): la cuadrícula invisible de la fuente. Todas las medidas (alturas, anchos, espacios) se expresan en estas unidades; lo habitual es 1000.
• Línea base: la línea sobre la que se apoyan las letras. Es el 0 de las medidas verticales.
• Altura de x: la altura de las minúsculas sin ascendentes, como x, a, n, o.
• Altura de mayúsculas: la altura de las letras como H, E o T.
• Ascendente / descendente: cuánto suben los trazos de b, d, h, l y cuánto bajan los de g, p, q, y respecto de la línea base.
• Overshoot (sobrepaso): las formas redondas (o, s, c) se dibujan un poco más allá de la línea base y de la altura de x para que ópticamente parezcan del mismo tamaño que las rectas.
• Sidebearing (margen lateral): el espacio vacío a la izquierda y a la derecha de un glifo, dentro de su ancho de avance.
• Ancho de avance: cuánto avanza el cursor después de un glifo: margen izquierdo + dibujo + margen derecho.
• Componente: un glifo reutilizado dentro de otro (la "a" dentro de la "á"), de modo que los cambios se propagan.
• Kerning: ajuste del espacio entre un par concreto de letras, por ejemplo "AV" o "To".
• Máster: una versión completa de la tipografía en un extremo de un eje, como el Regular y el ExtraBold. Los pesos intermedios se interpolan.
• Fuente variable: un solo archivo que contiene todos los pesos entre los másteres; los programas muestran un deslizador de peso.
• Compatibles: dos másteres de una letra con los mismos contornos y puntos, en el mismo orden; es lo que permite interpolarlos.

Desarrollo

Es un sitio estático sin paso de compilación: HTML, CSS y módulos de JavaScript nativos en js/. En cada publicación hay que subir el número ?v= de index.html (import map, script y hoja de estilos) para que los navegadores no mezclen archivos nuevos con otros guardados en caché.

python3 -m http.server 8123

npm test

Las piezas se combinan con Clipper (6.4.2, licencia Boost, en js/vendor/clipper.js) sobre contornos aplanados finamente; después js/pieces.js vuelve a convertir cada tramo que venía de una curva en esa misma curva Bézier, así la fuente conserva curvas reales. (En estilo contorno, la curva interior del trazo de un glifo con piezas queda como muchos tramos rectos muy cortos.)

La exportación usa opentype.js 2.0.0 (licencia MIT), incluido en js/vendor/; la tabla de kerning GPOS la escribe js/otf.js, porque opentype.js no la genera.

Los tests (node --test, sin dependencias) cubren la geometría, la migración de datos, la biblioteca de tipografías, la edición con nodos, el ajuste de glifos a métricas, el set de caracteres, los componentes, las herramientas de dibujo (espejo, selección y trazos) y la composición de texto con kerning, y la exportación: comparan los contornos con la forma dibujada en miles de puntos (sin superposiciones ni dirección invertida) y leen la fuente generada para comprobar glifos, nombres, anchos, kerning y sumas de verificación.