Iosevka: la fuente monoespaciada open source para programar

Abres dos archivos lado a lado en el editor y uno de ellos se corta a mitad de línea. Entonces bajas el tamaño de la fuente, fuerzas la vista y pasas toda la tarde con la cara pegada al monitor. Iosevka nació para resolver eso. Es una fuente monoespaciada open source, estrecha a propósito, que mete más código en el mismo ancho de pantalla sin volverse diminuta.

No es una novedad. El proyecto existe desde 2015 y lo mantiene Belleve Invis en GitHub. Pero sigue recibiendo releases con frecuencia y se ha convertido en una de las fuentes favoritas de quienes pasan el día en la terminal. La página oficial está en typeof.net/Iosevka y vale la visita, aunque sea solo para jugar con la vista previa.

¿Qué es Iosevka, en realidad?

Iosevka es una familia de fuentes para código, con versiones sin serifa y con serifa (Iosevka Slab). La licencia es la SIL Open Font License 1.1. En la práctica, eso significa que puedes usarla en el editor, en la terminal, en tu sitio web e incluso empaquetarla con un producto, sin pagar nada.

El detalle que lo cambia todo es el ancho. Cada carácter de Iosevka ocupa medio em. La mayoría de las monoespaciadas populares rondan los 0,6 em. Parece poco, pero la cuenta es simple: en el mismo ancho, ves un 20% más de columnas.

En un monitor de 1920 píxeles con el editor dividido en dos paneles, esa es la diferencia entre leer una línea de 100 caracteres completa o tener que hacer scroll hacia el lado. Quien usa Prettier con printWidth: 100 lo nota el primer día.

La familia tiene varias variantes:

• Iosevka: la estándar, con ligaduras.
• Iosevka Term: ajustada para terminales, con flechas y símbolos que respetan la cuadrícula de celdas.
• Iosevka Fixed: sin ligaduras, estrictamente monoespaciada, para terminales que se confunden con ellas.
• Iosevka Slab: la versión con serifa, para quien prefiere letras con remate.
• Iosevka Aile y Etoile: casi proporcionales, pensadas para texto corrido y documentación.

Son nueve pesos, de Thin a Heavy, además de itálica y oblicua. Puedes usar la misma familia en el código, en la terminal y en tus notas.

¿Por qué una fuente estrecha ayuda a programar?

El código es un texto raro. Lo leemos más en vertical que en horizontal, saltamos de bloque en bloque y comparamos líneas parecidas. Una fuente ancha desperdicia espacio justo donde la pantalla está más disputada: panel lateral, terminal integrada, diff, minimap.

Con Iosevka, el layout que uso a diario queda así: explorador de archivos, dos editores lado a lado y una terminal abajo. Todo cabe en la pantalla de un portátil sin tener que bajar la fuente a 11.

Tiene un costo, claro. Una letra estrecha pide un poco más de altura de línea para respirar. Yo subo el lineHeight y el resultado queda cómodo. Si la usas con la configuración por defecto de una fuente ancha, te va a parecer apretada y la vas a abandonar en cinco minutos. Ajusta antes de juzgar.

Una fuente de código es una herramienta de trabajo. Pasas más horas mirándola a ella que a cualquier IDE.

Lo que nadie más tiene: armas tu propia fuente

Aquí está el motivo por el que Iosevka tiene fans tan fieles. Casi todos los glifos tienen variantes. El cero puede ir tachado, con punto o liso. La l minúscula puede llevar cola o no. La g puede tener uno o dos pisos. El asterisco puede ir alto o centrado.

Puedes elegir esto de tres formas.

1. Stylistic sets listos. La fuente trae conjuntos que imitan el diseño de otras monoespaciadas famosas. El ss14 recuerda a JetBrains Mono, el ss05 a Fira Mono y el ss08 a PragmataPro (que, por cierto, es cara). En VS Code, basta con activar la feature:

{
  "editor.fontFamily": "'Iosevka Term', monospace",
  "editor.fontSize": 15,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": "'ss14', 'calt'"
}

2. Character variants puntuales. Si solo quieres cambiar un glifo, usas las features cvXX de OpenType. Funciona en el editor y también en el CSS de tu sitio.

3. Build personalizado. Este es el modo nerd de verdad. Describes la fuente en un archivo TOML y generas los archivos tú mismo:

[buildPlans.IosevkaDiego]
family = "Iosevka Diego"
spacing = "term"
serifs = "sans"
noCvSs = true
exportGlyphNames = false

[buildPlans.IosevkaDiego.variants]
inherits = "ss14"

Después solo hay que clonar el repositorio y ejecutar el build:

git clone --depth 1 https://github.com/be5invis/Iosevka
cd Iosevka
npm install
npm run build -- ttf::IosevkaDiego

Un aviso honesto: este build es pesado. Genera decenas de archivos y consume CPU durante un buen rato. Si tu portátil se calienta fácil, como el mío, usa el personalizador web del propio sitio para generar el TOML y ejecuta el build en GitHub Actions. Tu máquina te lo agradecerá.

Cómo instalar Iosevka sin complicaciones

Para la mayoría de la gente, nada de build. Descarga la versión lista y sigue adelante.

• macOS: brew install --cask font-iosevka
• Linux y Windows: descarga el zip en la página de releases de GitHub e instala los .ttf.
• Terminal con íconos: el proyecto Nerd Fonts tiene Iosevka e IosevkaTerm con los íconos ya incluidos. Ideal si usas Starship, lazygit o un prompt lleno de símbolos.

Mi sugerencia: Iosevka Term en la terminal e Iosevka normal en el editor. Si tu terminal muestra las ligaduras de forma extraña, cambia a la Fixed y el problema desaparece.

¿Y vale la pena usarla en tu sitio web?

Sí, pero con cuidado. El paquete completo es grande, porque Iosevka cubre latín, griego, cirílico, dibujo de cajas y un montón de símbolos. Si lo envías todo al navegador, la carga se va a resentir solo por unos bloques de código.

El camino correcto es usar solo los pesos que necesitas, en woff2, y hacer un subset de los caracteres. Los releases ya traen paquetes de webfont. Una configuración ligera queda así:

@font-face {
  font-family: 'Iosevka Web';
  src: url('/fonts/iosevka-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

pre, code {
  font-family: 'Iosevka Web', ui-monospace, monospace;
  font-feature-settings: 'ss14';
}

Con un peso regular y un subset de latín básico, el archivo baja a unas decenas de KB. Para un blog técnico, es aceptable. Más de dos pesos ya empieza a no compensar.

Dónde Iosevka no es la mejor opción

No todo es perfecto, y decir lo contrario sería publicidad.

En pantallas de baja densidad y con fuente pequeña, la letra estrecha pierde legibilidad. Si programas en un monitor 1080p de 27 pulgadas con fuente 12, quizá JetBrains Mono o Fira Code te resulten más cómodas. Iosevka brilla en pantallas de alta densidad y con quienes quieren ver mucho código a la vez.

También está el tema de elegir. Tantas variantes pueden convertirse en un pozo sin fondo. He visto gente pasar una tarde decidiendo entre dos diseños de asterisco. Discutir de fuentes es el nuevo tabs contra espacios, solo que con más capturas en Twitter.

Y si programas en pareja con alguien, prepárate: esa persona va a mirar tu pantalla y preguntar si el editor está aplastado. Es parte del paquete.

¿Vale la pena cambiar de fuente?

Mi opinión: vale la pena probarla una semana, con la altura de línea ajustada. Cambiar de fuente tiene un período de extrañeza de dos o tres días. Después de eso, o no vuelves nunca, o vuelves sabiendo exactamente por qué.

Lo que más me gusta de Iosevka es el modelo del proyecto. Una fuente libre, mantenida desde hace más de diez años, que trata al dev como alguien capaz de decidir cómo quiere su propio cero. Pocas herramientas de pago ofrecen ese nivel de control.

Si te gusta este tipo de ajuste fino en tu entorno de trabajo, echa un vistazo a los proyectos que he estado construyendo. Casi todos nacieron de una pequeña molestia del día a día, como la línea cortada a la mitad en el editor.

¿Tu editor corta la línea a la mitad y bajas el tamaño de la fuente hasta forzar la vista? Hay una forma mejor.

Iosevka es una fuente monoespaciada open source y estrecha a propósito: cada carácter ocupa medio em, frente a unos 0,6 de la mayoría de las fuentes para código.

En la práctica, caben un 20% más de columnas. Explorador, dos editores lado a lado y terminal en la pantalla de un portátil, sin bajar la fuente a 11.

Y puedes armar la tuya: cero tachado o con punto, `g` de uno o dos pisos, stylistic sets que imitan JetBrains Mono y PragmataPro.

El consejo que marca la diferencia: sube el lineHeight antes de juzgar. Una letra estrecha necesita espacio para respirar.

Pruébala una semana y cuéntame si vuelves a la anterior. Escribí la guía completa en el blog.

#Programación #DevTools #OpenSource #VSCode #Productividad