Skip to content

Todo para WordPress, el desarrollo web — y mucho más

🔤 Fira Code: una fuente monoespaciada con ligaduras para programar

🔤 Fira Code: una fuente monoespaciada con ligaduras para programar

Ejemplo de código con ligaduras de Fira Code en un editor

Qué son las ligaduras y por qué importan en el código

Una ligadura es la combinación de dos o tres caracteres en un único glifo visual. En tipografía, esta técnica se conoce desde hace siglos: las letras «f» e «i» se fusionan en fi para evitar chocar entre sí. En programación, el mismo mecanismo funciona con los operadores.

Cuando escribe != seguido de => y >= o ===, su ojo los lee como un único token lógico. Pero en pantalla son dos o tres caracteres separados, y su cerebro realiza microesfuerzos para combinarlos. A lo largo de una jornada laboral, estas microoperaciones suman miles. Las ligaduras resuelven el problema: != se convierte en un signo de igual tachado (≠), => se vuelve una flecha en negrita y >= luce como un símbolo unificado de «mayor o igual que».

El desarrollador Nikita Prokopov (tonsky) construyó una fuente entera alrededor de esta idea. Fira Code es una familia monoespaciada gratuita basada en Fira Mono, ampliada con ligaduras de programación. En esencia, es ASCII puro: el código fuente no cambia, el renderizado ocurre a nivel de fuente. El archivo permanece igual pero se lee de forma distinta.

💡 Resumen rápido:

  • Descargue Fira Code desde la publicación de GitHub: ZIP de ~2.5 MB, versión 6.2, gratuita
  • Instale la fuente en su sistema y configure editor.fontFamily y editor.fontLigatures en su editor
  • Elija conjuntos estilísticos y variantes de caracteres según su gusto: desde ss01 hasta cv31
  • Verifique la compatibilidad de su editor en la tabla oficial en GitHub

Cómo cambia Fira Code la lectura del código

Lo primero que llama la atención tras la instalación: los operadores de comparación. Donde antes había != (signo de exclamación + igual), ahora hay un símbolo tachado unificado. <= y >= lucen como signos matemáticos de un libro de texto, no como dos caracteres ASCII separados.

Las flechas son un tipo de magia aparte. Cualquier cadena de guiones y paréntesis angulares se ensambla en una línea continua. Pruebe -->, <-- y <-->: se fusionan en una flecha sólida. En Fira Code 4, el desarrollador reemplazó 44 ligaduras de flecha individuales por cuatro reglas combinatorias. Ahora las flechas pueden tener cualquier longitud. Incluso ---> y <--- funcionan.

Los operadores de múltiples caracteres también se ensamblan en glifos unificados: === y !==, :: y //, |||. Comentarios como <!-- --> se ven más ordenados. Para los entusiastas de la programación funcional, están |> y >>= con =<<, y docenas más.

A continuación se muestra el mismo código PHP sin Fira Code y con ella. La diferencia no es dramática, pero intente «encontrar las diferencias»: su ojo capta los operadores más rápido.

Sin Fira Code

1/**
2 * Arrows --> and -->> illustrate data flow.
3 */
4$out = array('');
5$pieces = array(
6 '<!-- HTML -->', 'https://www.example.com/#!', 'red', '&#35;&#35;', 0x0, ''
7);
8for ($i = 0; $i <= 5; $i++) {
9 if ($i == '2' || $pieces[$i] === 'red') {
10 $hex__red = 0xca0000;
11 $out[] = $hex__red >> 15; // 404
12 } elseif ($i !== 3 && $pieces[$i] != false) {
13 $out[] = $pieces[$i];
14 }
15}
16echo implode('', $out);

Con Fira Code

1/**
2 * Arrows --> and -->> illustrate data flow.
3 */
4$out = array('');
5$pieces = array(
6 '<!-- HTML -->', 'https://www.example.com/#!', 'red', '&#35;&#35;', 0x0, ''
7);
8for ($i = 0; $i <= 5; $i++) {
9 if ($i == '2' || $pieces[$i] === 'red') {
10 $hex__red = 0xca0000;
11 $out[] = $hex__red >> 15; // 404
12 } elseif ($i !== 3 && $pieces[$i] != false) {
13 $out[] = $pieces[$i];
14 }
15}
16echo implode('', $out);

Ambos bloques son idénticos carácter por carácter. Solo difiere la fuente. En el segundo caso, <= y >= se convirtieron en signos unificados, != y !== lucen tachados, y --> se transformó en una flecha. La lectura se acelera, no de forma radical, pero sí perceptible. Especialmente durante sesiones largas de revisión de código.

Dónde funciona Fira Code

La fuente es compatible con docenas de editores: desde VS Code y Sublime Text hasta Vim y Emacs. La lista completa está disponible en la tabla de compatibilidad en GitHub.

Plataformas clave:

  • VS Code: soporte nativo. En settings.json, añada "editor.fontFamily": "'Fira Code'", "editor.fontLigatures": true. Los conjuntos estilísticos se habilitan mediante "editor.fontLigatures": "'calt', 'ss02', 'ss09'".

  • IDE de JetBrains (IntelliJ, PhpStorm, WebStorm, Rider): desde la versión 2016.2. Configuración: Editor → Fuente → seleccionar Fira Code → activar Habilitar ligaduras.

  • Sublime Text: a partir de la build 3146. En la configuración de usuario: "font_face": "Fira Code".

  • Vim/Neovim: mediante set guiligatures en versiones GUI y parches para versiones de terminal.

  • Terminales: Windows Terminal, iTerm 2, Kitty, Konsole, Tabby, Hyper, WezTerm. No compatibles: Alacritty, GNOME Terminal, xterm, PuTTY.

  • Navegadores: mediante el CDN de jsdelivr. Incluya <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css"> y añada font-feature-settings: "calt"; para IE/Edge heredado.

En la práctica, la instalación es así: descargue el ZIP de la publicación, instale el TTF en su sistema, configure la fuente en su editor, habilite las ligaduras. Eso es todo. Sin plugins, sin magia, solo @font-face puro a nivel de sistema operativo.

Ajuste fino: variantes y conjuntos estilísticos

La principal ventaja de Fira Code frente a sus competidores es la flexibilidad. ¿No le gusta una ligadura concreta? Desactívela. ¿Quiere una forma de letra diferente? Elija una variante de carácter. Todo es personalizable a nivel granular.

Las variantes de carácter (cv01-cv31) cambian la forma de caracteres individuales:

  • cv01-cv10: diseños alternativos para las letras a y g, así como i y l
  • cv11-cv13: variantes del cero (con punto, sin él, barrado)
  • cv14: tres alternativo
  • cv15: asterisco alineado arriba (conveniente para punteros en C/C++)
  • cv31: paréntesis alternativos ()

Los conjuntos estilísticos (ss01-ss10) controlan las ligaduras:

  • ss01: renderizado alternativo de &&
  • ss02: <= sin inclinación, con barra horizontal
  • ss03: & en estilo máquina de escribir
  • ss04: signo de dólar $ sin barra
  • ss05: @ sin cola rizada
  • ss09: restaura los separados >>= / <<= / ||= (eliminados del conjunto predeterminado en v6, detalles en GitHub)

Las barras de progreso merecen una mención especial. Fira Code es la primera fuente de programación donde los caracteres U+EE00-U+EE0B se renderizan como una tira de barra de progreso. El terminal emite una secuencia ``, y el usuario ve un relleno agradable. Para detectar el soporte, se ha propuesto una variable de entorno UNICODE_PROGRESS_BAR=true.

Alternativas: con qué comparar

Fira Code no es la única fuente con ligaduras. El mercado se ha expandido en los últimos años, y cada opción tiene su propio enfoque:

Fuente

Licencia

Característica

JetBrains Mono

SIL OFL

Legibilidad mejorada, altura de minúsculas variada, sin redondeos

Cascadia Code

SIL OFL

Fuente de Microsoft para Terminal, soporte Powerline, dibujo de cajas

Iosevka

SIL OFL

Fuente estrecha, generada por código, máximamente compacta

Victor Mono

MIT

Cursivas verdaderas con serifas, no solo inclinadas

Hasklig

SIL OFL

Derivado de Source Code Pro con ligaduras para Haskell

Monoid

MIT

Soporte Powerline, ancho personalizable

Fira Code gana no por la belleza de las letras individuales (eso es subjetivo), sino por su alcance y madurez. 81.000 estrellas en GitHub, seis lanzamientos mayores, cientos de editores compatibles, 31 variantes de carácter, barras de progreso, símbolos matemáticos, dibujo de cajas y soporte Powerline. Al elegir una fuente para los próximos años, el ecosistema importa tanto como la estética.

⁉️🤔 Preguntas frecuentes

Instalé Fira Code, pero no aparecieron las ligaduras. ¿Qué ocurre?

Lo más probable es que su editor requiera activación por separado. En VS Code, es "editor.fontLigatures": true. En los IDE de JetBrains: marque «Habilitar ligaduras» en los ajustes de fuente. En terminales, verifique si su emulador admite ligaduras: Windows Terminal sí, ConEmu no.

Las ligaduras distraen. ¿Puedo conservar solo algunas?

Sí. Los conjuntos estilísticos ss01-ss10 habilitan y deshabilitan grupos de ligaduras. Por ejemplo, ss09 restaura los separados >>= y <<=. Para una personalización granular, puede reconstruir la fuente localmente con ./script/build.sh --features "ss02,ss08,cv14".

Fira Code va lento en mi editor. ¿Es normal?

La versión 4 incluyó una optimización de renderizado: 44 ligaduras de flecha separadas se reemplazaron por cuatro reglas combinatorias, mejorando el rendimiento entre un 100 y un 150%. Si ahora va lento, compruebe si hay otras características de fuente habilitadas simultáneamente (calt más conjuntos ss no suelen causar retrasos).

¿Cómo es el soporte cirílico en Fira Code?

El conjunto cirílico se hereda de Fira Mono: legible, neutro, sin pretensiones. Es suficiente para código en ruso (comentarios, cadenas). Pero si escribe documentación extensa en ruso, considere JetBrains Mono: su cirílico está mejor desarrollado.

¿Vale la pena pasarse a Fira Code en 2026?

La fuente no se ha actualizado desde diciembre de 2021. Y esto es, curiosamente, una buena señal. Cuando un producto alcanza el estado de «funciona y no se rompe», los commits frecuentes no son necesarios. En cinco años sin lanzamientos, nadie ha escrito «Fira Code está muerta». La gente simplemente la usa.

Si pasa más de 4 horas al día programando, instale Fira Code durante una semana. Sentirá la vuelta atrás a su fuente anterior más rápido de lo que espera: su ojo se acostumbra a leer operadores como tokens unificados, y regresar a caracteres «desmontados» se siente como un paso atrás. Lo peor que puede pasar: que borre la fuente tras siete días. Lo mejor: que encuentre su herramienta para los próximos años.