Monaspace

 (monaspace.githubnext.com)
1 puntos por GN⁺ 2023-11-10 | 1 comentarios | Compartir por WhatsApp
  • Monaspace es un nuevo sistema tipográfico diseñado para incorporar una expresión tipográfica más rica en pantallas de código manteniendo una cuadrícula monoespaciada
  • Su función principal, Texture Healing, corrige con glifos alternativos los desequilibrios de espacio entre pares de caracteres adyacentes para reducir las diferencias de densidad en el texto monoespaciado
  • Este enfoque aplica los contextual alternates de OpenType a una tipografía para código, por lo que puede usarse en la mayoría de los editores sin plugins adicionales, y también incluye configuración para Visual Studio Code
  • Monaspace ofrece ejes de peso de 200 a 800, inclinación de 0 a -11° y ancho de 100 a 125, y permite activar o desactivar ligaduras de código por idioma mediante conjuntos de estilo
  • GitHub Next desarrolló esta tipografía junto con Lettermatic desde 2022, con la intención de ampliar la visualización de código hacia un medio de expresión más amplio que las herramientas de desarrollo puedan aprovechar

Un sistema tipográfico que amplía las pantallas de código monoespaciadas

  • Monaspace es una “superfamilia” tipográfica para código, enfocada en evolucionar la forma en que el código se muestra en pantalla
  • El código se ha mostrado con fuentes monoespaciadas desde los primeros teletipos, y Monaspace busca mantener esa cuadrícula mientras transmite más significado
  • Los editores actuales suelen comunicar información más allá del resaltado de sintaxis basado en color mediante elementos de interfaz como hover, subrayados y adornos gráficos
  • Monaspace ofrece, a nivel de fuente, una paleta más expresiva que el código y las herramientas de desarrollo pueden aprovechar

Copilot y la tipografía

  • Las sugerencias de código como las de Copilot pueden tener una voz tipográfica propia con Monaspace
  • El texto fantasma puede dificultar analizar y evaluar el código sugerido
  • Si la propia expresión tipográfica muestra qué partes son código sugerido, resulta más fácil distinguir esos fragmentos incluso después

El límite de las fuentes monoespaciadas al que apunta Texture Healing

  • Las fuentes monoespaciadas colocan todos los caracteres dentro de cajas del mismo ancho, lo que hace que la densidad del texto sea irregular
  • Caracteres angostos como l e i necesitan serifas exageradas para llenar la caja y aun así dejan más espacio del necesario
  • Caracteres anchos como m y w quedan comprimidos dentro de la caja, su forma se distorsiona, sus trazos se adelgazan y su espacio interior también se limita
  • Estas restricciones son un problema estructural de las fuentes monoespaciadas que existe desde la era de los teletipos en los años 60

Cómo funciona Texture Healing

  • Texture Healing identifica pares de caracteres adyacentes donde uno tiene poco espacio y el otro tiene espacio de sobra, y reemplaza sus glifos
  • Los caracteres angostos cambian a glifos alternativos que ceden parte de su espacio al vecino, y los caracteres anchos cambian a glifos alternativos que se expanden hasta el borde de la caja
  • Esta función está implementada con contextual alternates de OpenType
    • Los contextual alternates se usan normalmente en escritura árabe o en tipografías cursivas, donde la forma del glifo cambia según los caracteres que lo rodean
    • Monaspace aplica esta técnica a una fuente monoespaciada para código
  • El texto resultante sigue respetando una cuadrícula monoespaciada
  • Puedes ver cómo activar Texture Healing en Visual Studio Code en la documentación de Monaspace

Ejes y estilos tipográficos

  • El eje de peso de Monaspace va de 200 a 800
    • 200: Extra Light
    • 300: Light
    • 400: Regular
    • 500: Medium
    • 600: Semibold
    • 700: Bold
    • 800: ExtraBold
  • El eje de inclinación va de 0 a -11°
    • 0: Normal
    • -5.5°: punto intermedio donde algunos caracteres cambian de oblique a italic
    • -11°: Italic
  • El eje de ancho va de 100 a 125
    • 100: Normal
    • 112.5: Semiwide
    • 125: Wide
  • Monaspace incluye familias con nombres como Neon, Argon, Xenon, Radon y Krypton

Ligaduras de código y configuración de OpenType

  • Monaspace incluye ligaduras de código para varios lenguajes de programación
  • Las ligaduras están organizadas como conjuntos de estilo, de modo que el usuario puede activar o desactivar solo los conjuntos que quiera
  • Cada conjunto de estilo está diseñado aproximadamente según las necesidades de un lenguaje específico
    • ss01: incluye ligaduras para secuencias de caracteres comunes en JavaScript
    • ss05: ofrece ligaduras para operadores de F#
  • También ofrece funciones adicionales de OpenType
    • calt: activa Texture Healing
    • liga: ajusta el espaciado de caracteres repetidos como /// y ||, y está diseñado para no activarse dentro de secuencias más largas como ////
  • En Visual Studio Code, estas funciones y conjuntos de estilo se activan especificándolos en editor.fontLigatures dentro de settings.json

Desarrollo y distribución

  • Monaspace fue creada con el objetivo de mejorar la visualización de código para todos los desarrolladores
  • GitHub Next comenzó este trabajo en 2022 y desarrolló la tipografía junto con Lettermatic
  • La lista de contribuidores, la documentación y los archivos de la fuente están disponibles en el repo de Monaspace
  • La descarga está disponible en el repositorio de GitHub

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-11-10
Opiniones de Hacker News

  • La función Texture Healing usa las funciones de OpenType de forma muy ingeniosa para hacer que las combinaciones problemáticas de fuentes monoespaciadas se vean mucho mejor sin romper en absoluto la cuadrícula.
    Un enfoque simple sería crear ligaduras para pares de letras complicados como mi o lm, pero aquí parece que se eligen glifos alternativos que rellenan el ancho fijo de manera diferente según las letras que los rodean.

    • Commit Mono hace algo similar y lo llama Smart kerning. Para más detalles, hay que ver la pestaña “04 Intelligent” en https://commitmono.com/
      En la práctica es difícil de usar. Como el ancho de las letras cambia según la letra que sigue, el texto salta mientras escribes. Se ve genial al leer, pero es horrible al escribir.
    • Es una técnica realmente ingeniosa. Lo más sorprendente es que esto era posible desde hace muchísimo tiempo y aun así a nadie se le había ocurrido.
      Son increíbles Riley Cran, que ideó esta técnica como parte de este proyecto, y todo el equipo de https://lettermatic.com.
    • No me convence demasiado. Si activas y desactivas algunas veces las casillas, empiezas a notar inconsistencias.
      Por ejemplo, en time_limit, el ejemplo básico, la segunda m tiene una i a ambos lados, así que dispone de más espacio para “crecer” y se ve claramente más ancha que la primera m. No estoy muy seguro de que eso sea bueno.
    • Mucha gente aquí elogia texture healing, pero a mí me parece una solución a medias. ¿Por qué, como comunidad, somos tan reacios a adoptar fuentes de ancho variable?
      Este texture healing también rompe una cuadrícula de celdas de caracteres que ya era perfecta, así que en cierto modo se siente como si tuviera las desventajas de ambos lados.
      Veo las ligaduras vistosas de una forma más o menos parecida. Se podrían usar los caracteres reales en el código fuente, y Unicode tiene amplio soporte. Raku lo hace así, pero para brillar de verdad necesita una mejor composición tipográfica, incluidas fuentes de ancho variable.

  • Al principio pensé algo como “otra familia de fuentes monoespaciadas, se ve bien”, pero después de ver texture healing me dieron muchas ganas de probarla.
    Me gusta mucho la idea de usar estilos de fuente distintos para cada caso de uso. Pero como uso principalmente la terminal, no sé qué terminales soportan esto, y supongo que los editores de texto de línea de comandos también tendrían que soportarlo. Aun así, me parece una gran idea.

    • En teoría, si está basado en xterm debería ser posible. ESC[<10-19>m es la secuencia de escape que elige las fuentes 0 a 9.
      Que funcione en la práctica es otra cuestión. Uso Alacritty y no encontré si lo soporta; probé hacerlo directamente y no obtuve ningún resultado.

  • Me da curiosidad cómo ven los ejemplos de Mix & Match.
    Radon, el estilo manuscrito, de hecho se ve como una cursiva, así que combina bien con las otras fuentes. Pero las demás tienen métricas y demás demasiado parecidas, por lo que los ejemplos de “cadena de documentación autoritativa” o “voz de Copilot” son bastante difíciles de distinguir.

    • Por Mix & Match decidí darle una oportunidad a esta fuente. Llevo años usando Operator Mono justamente por su cursiva real.
      Desde hace mucho buscaba una alternativa abierta a Operator Mono, y gracias a Mix & Match por fin creo que esta podría ser esa alternativa.
    • Fue lo primero que se me vino a la cabeza incluso antes de bajar por la página. Los comentarios manuscritos se ven geniales y aportan otro elemento diferenciador que reduce la carga al revisar código rápidamente.
      Habrá gente a la que no le guste, pero personalmente quiero probarlo.
    • Al pasar por las muestras, no me di cuenta de qué cambiaba en la caja de ejemplo de código hasta llegar a la variante Radon.
      Las otras variantes no son lo suficientemente distintas como para comunicar información.
    • No sé cómo configurar fuentes diferentes. Era lo primero que quería probar, pero no encuentro cómo hacerlo. ¿Me estaré perdiendo algo obvio?
    • Me gusta mucho esta idea. ¿Ya está soportada en algún lado o es algo pensado para el futuro?

  • Incluye bastantes ligaduras, pero para mí todavía no son suficientes. Hoy != y <= ya son lo básico, y cada vez noto más lo agradable que es que Fira Code ajuste la altura de * en *ptr, centre : en X:Y o eleve la x en 0xFF.
    Casi me gustó la apariencia de la variante Krypton, pero el trazo horizontal de la t minúscula está demasiado bajo respecto de la altura de letras como la c minúscula. Así que por ahora creo que seguiré usando Fira Code, y volveré a revisar dentro de aproximadamente un año para ver qué cambió después del feedback de los usuarios.

    • Para ser una página de ejemplos, se ve raro que en los ejemplos del sitio enlazado los dos * de /** queden desalineados.
      Se nota especialmente en ejemplos como // What if tentative ideas looked handwritten? y /** * What if docstrings looked authoritative? */.

  • La idea es buena, pero me pregunto por qué no vemos más fuentes estrechas como PragmataPro
    La uso desde hace casi 10 años y me gustaría que hubiera más opciones en este espacio, pero parece que nadie quiere llegar a ser tan estrecho. Berkeley Graphics lleva casi un año anticipando una versión estrecha de Berkeley Mono, pero todavía no pasa nada
    Aquí Monaspace también tiene un deslizador de ancho, pero se siente como si el punto de partida fuera “más ancho que PragmataPro” y el final fuera “absurdamente ancho”. Me pregunto por qué no hicieron que también pudiera bajar hacia una versión estrecha

    • Totalmente de acuerdo. Uso PragmataPro todos los días, y todo lo demás se siente demasiado ancho
      Iosevka por defecto se acerca, pero el interlineado es mucho mayor. Por suerte, se puede personalizar hasta quedar casi igual configurando leading = 1110. Encontré ese valor a prueba y error
    • ¿Probaste Quinze? https://www.programmingfonts.org/#quinze
      Buscando la fuente más estrecha, descubrí que Quinze era la respuesta. Es aproximadamente 20% más estrecha que Iosevka o M+. No encontré material para compararla fácilmente con PragmataPro, pero si Iosevka es una interpretación gratuita de PragmataPro, entonces Quinze también debería ser más estrecha
      De hecho, Quinze es tan estrecha que, cuando la forcé para todo el texto monoespaciado del navegador, en vez de mejorar la legibilidad la empeoró. Es porque, a la misma altura, se ve mucho más pequeña que una fuente “normal”. En el entorno de programación la uso con un tamaño de fuente grande, y combina bien con el ancho estrecho
      La desventaja es que Quinze es muy minimalista. Tiene casi solo ASCII, no tiene ligaduras ni personalización. A mí esas cosas no me molestan
    • Iosevka también es bastante estrecha y popular. No sé si se ajustará a lo que buscas, pero vale la pena verla
    • Acabo de conocer M+, y me gusta bastante la variante “60”. El ancho por defecto, 50, me resultó demasiado estrecho, y para mi gusto la legibilidad baja en la variante 50
      Aun así, puede ser tan estrecha como quieras
      https://mplusfonts.github.io/
    • Ya que hablamos de fuentes estrechas, ¿alguien recomienda una buena fuente serif estrecha? Puede ser de pago o gratuita
      En el navegador uso “Bell MT” en lugar de Times, y también como fuente de ancho variable en el modo Org de emacs; me gusta, pero sería bueno que existiera una versión más grande y estrecha
      Otra buena fuente monoespaciada estrecha es “The Sans Mono Condensed”, que se hizo conocida gracias a los primeros libros de O’Reilly. Después O’Reilly cambió a otra fuente monoespaciada. La desventaja es que solo tiene el conjunto de caracteres occidental, pero a mí me gustaba mucho

  • Me molesta que en la página el símbolo de Radon aparezca como Rd. Si es Radon, debería ser Rn
    Radium es Ra y Radon es Rn, así que terminé revisando de nuevo si había algún otro elemento que empezara con R y tuviera una d en el nombre

    • Yo también lo vi, y después lo corrigieron
    • Existe Rhodium, pero su símbolo es Rh

  • Como no está activada la mono flag, tuve que intentar con GTK2 gvim para cargar la fuente
    El resultado de % ttfmono MonaspaceArgon-Regular.otf es monospaced flag = 0, y muestra 0 = variable-width, otherwise = monospaced
    Lamentablemente, por esta bandera parece que no se activan las ligaduras
    Aun así, en vim ejecutado sobre un st parcheado pude ver las ligaduras y el texture healing, y me encantó. Al escribir, las líneas apenas se mueven de forma muy sutil, y al pasar el cursor no queda una estela, por ejemplo por una m ensanchada. Está muy bien diseñada para código
    Si pudiera pedir una función, me gustaría poder elegir algunas variantes, como poner una barra invertida en el 0 angular, o dejar el ! en la ligadura de !=. Lo que quiero decir se ve aquí: https://github.com/be5invis/Iosevka/blob/main/doc/stylistic-...
    https://st.suckless.org/patches/ligatures/

    • ¿Seguro? En macOS aparece bajo las fuentes “Fixed Width” en Font Book
      Estoy usando la versión publicada hoy, así que puede que lo hayan corregido hace poco
    • En KDE Konsole pasa lo mismo: https://imgur.com/a/Dj1HZiu
      Hay que activar explícitamente la casilla “Show all fonts” para que también se vean las fuentes “no monoespaciadas”

  • En los sistemas modernos, creo que las fuentes para código ya pueden ir más allá de las fuentes monoespaciadas
    La he recomendado varias veces aquí, pero yo uso Input Sans, una fuente proporcional para programar
    https://input.djr.com

    • Me da curiosidad saber por qué la recomiendas
      Parece que con esta fuente podría ser más difícil encontrar errores tipográficos
    • Me gustaría usar una fuente proporcional para programar, pero no conozco bien ningún frontend de Vim que lo soporte de forma prolija
      Cuando uso Vim por SSH está bien seguir usando monoespaciada, pero aunque con Neovim han aparecido muchos frontends, casi ninguno parece soportar fuentes proporcionales. Los que sí lo soportan suelen ser tan lentos que es doloroso usarlos
    • ¿Soporta ligaduras que cambien >= por ≥? Intenté probar la vista previa web desde el celular, pero quizás sea una limitación de Firefox en Android
      Como referencia, las ligaduras son esto: https://fonts.google.com/knowledge/glossary/ligature

  • Siempre me confunde cómo en este tipo de tipografías el 0 con punto se volvió casi un estándar. Yo siempre lo confundo con el 8, así que prefiero mucho más el 0 con barra
    Si existiera esa variante, definitivamente querría probar esta tipografía

    • Hay idiomas en los que un círculo con barra es una letra, así que el 0 con barra puede generar confusión. El 0 con punto tiene mucha menos posibilidad de confusión en ese sentido
      Un diseñador de tipografías también podría enfatizar el lado convexo del 0 con punto y el lado cóncavo del 8 para diferenciarlos visualmente, pero no sé si esta tipografía lo hace
    • Propuse en un issue usar el 0 con barra, y alguien respondió que el 0 con punto cumple el mismo propósito. Qué fastidio

  • Texture healing es una idea realmente ingeniosa y hermosa
    También me gustaría probarla en la escritura manuscrita china, que a menudo se usa con ancho fijo. Los caracteres comunes pero muy densos, especialmente los tradicionales como 邊鐵餐廳臺藥機麵顧露樓幫讓, se beneficiarían mucho si pudieran recibir espacio extra y desplegarse más ampliamente