Fuentes

Configurar fuentes y ligaduras de código

La configuración de fuentes en Visual Studio Code va más allá de la simple estética; impacta directamente en la productividad y comodidad durante las sesiones de programación. Una fuente bien elegida reduce la fatiga visual y mejora la legibilidad del código, especialmente durante largas jornadas de desarrollo.

Configuración de la familia de fuentes

La font family determina qué tipografía utiliza el editor para mostrar el código. Para acceder a esta configuración, navega a Settings y busca "font family" o localiza la opción Editor: Font Family en la sección Editor.

El campo acepta una lista de fuentes separadas por comas, donde Visual Studio Code intentará usar la primera fuente disponible y, si no la encuentra, pasará a la siguiente:

'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace

Las fuentes monoespaciadas son esenciales para programación porque cada carácter ocupa el mismo ancho, manteniendo la alineación del código. Algunas opciones populares y gratuitas incluyen:

• Fira Code: Desarrollada por Mozilla, destaca por sus ligaduras elegantes y excelente legibilidad
• Cascadia Code: Fuente oficial de Microsoft, optimizada para terminales y editores de código
• JetBrains Mono: Creada específicamente para desarrollo, con caracteres distintivos que evitan confusiones

Ajuste del tamaño de fuente

El tamaño de fuente se configura mediante la opción Editor: Font Size, que acepta valores numéricos en píxeles. El valor predeterminado es 14, pero puedes ajustarlo según tus preferencias:

12  // Tamaño pequeño para pantallas de alta resolución
14  // Tamaño estándar recomendado
16  // Tamaño más grande para mejor legibilidad

Para el terminal integrado, existe una configuración separada llamada Terminal › Integrated: Font Size que permite establecer un tamaño independiente del editor principal.

Habilitación de ligaduras de fuente

Las font ligatures son combinaciones de caracteres que se renderizan como símbolos únicos, mejorando la legibilidad de operadores comunes en programación. Por ejemplo, >= se muestra como ≥ y != como ≠.

Para habilitar las ligaduras, localiza la opción Editor: Font Ligatures en Settings y actívala marcando la casilla correspondiente. Esta función requiere una fuente compatible como Fira Code o Cascadia Code.

// Sin ligaduras
if (valor >= limite && estado != null) {
    return valor => valor * 2;
}

// Con ligaduras (representación visual mejorada)
if (valor ≥ limite && estado ≠ null) {
    return valor ⇒ valor × 2;
}

Configuración del peso de fuente

El font weight controla el grosor de los caracteres mediante la opción Editor: Font Weight. Los valores disponibles incluyen:

• normal: Peso estándar (400)
• bold: Texto en negrita (700)
• light: Peso ligero (300)
• 100-900: Valores numéricos específicos

La mayoría de desarrolladores prefieren el peso normal para el código regular, reservando bold para resaltado de sintaxis específico.

Diferenciación entre fuentes de editor y terminal

Visual Studio Code mantiene configuraciones separadas para el editor principal y el terminal integrado:

Editor principal:

• Editor: Font Family
• Editor: Font Size
• Editor: Font Weight

Terminal integrado:

• Terminal › Integrated: Font Family
• Terminal › Integrated: Font Size
• Terminal › Integrated: Font Weight

Esta separación permite optimizar cada entorno según sus necesidades específicas. Por ejemplo, puedes usar una fuente más pequeña en el terminal para mostrar más información.

Ajuste de altura de línea

La line height mejora la legibilidad espaciando verticalmente las líneas de código. La configuración Editor: Line Height acepta valores numéricos donde:

0    // Altura automática basada en la fuente
1.2  // 20% más espacio que el tamaño de fuente
1.5  // 50% más espacio (recomendado para legibilidad)
20   // Valor absoluto en píxeles

Un valor entre 1.2 y 1.5 proporciona un equilibrio óptimo entre densidad de información y comodidad visual.

Instalación de fuentes en el sistema

Para utilizar fuentes personalizadas, primero debes instalarlas en tu sistema operativo:

Windows:

1. Descarga el archivo de fuente (.ttf o .otf)
2. Haz clic derecho y selecciona "Instalar"
3. Reinicia Visual Studio Code

macOS:

1. Abre Font Book
2. Arrastra el archivo de fuente a la aplicación
3. Confirma la instalación

Linux (Ubuntu/Debian):

# Crear directorio de fuentes si no existe
mkdir -p ~/.local/share/fonts

# Copiar fuente al directorio
cp fuente.ttf ~/.local/share/fonts/

# Actualizar caché de fuentes
fc-cache -fv

Una vez instalada la fuente en el sistema, aparecerá disponible en la configuración de Visual Studio Code tras reiniciar el editor.

Contexto histórico de las fuentes para programación

Durante décadas, la mayoría de entornos de desarrollo utilizaban fuentes monoespaciadas clásicas como Courier New o Consolas, diseñadas antes de la era de las pantallas de alta resolución. Con la llegada de los monitores Retina y 4K, surgió una nueva generación de tipografías optimizadas para el renderizado moderno: Adobe lanzó Source Code Pro en 2012, JetBrains creó JetBrains Mono en 2020 con glifos específicos para código, y Microsoft publicó Cascadia Code como parte de su esfuerzo por modernizar Windows Terminal y Visual Studio Code. Conocer este recorrido ayuda a elegir la fuente que mejor se adapte a tu monitor y a tu estilo de trabajo.

Tabla comparativa de fuentes populares

La siguiente tabla resume las características principales de las fuentes más utilizadas en la comunidad de desarrollo:

| Fuente | Ligaduras | Licencia | Peso ideal | Característica destacada | |--------|-----------|----------|------------|---------------------------| | Fira Code | Sí | SIL Open Font | 400-500 | Ligaduras completas y elegantes | | Cascadia Code | Sí | SIL Open Font | 400 | Optimizada para Windows Terminal | | JetBrains Mono | Sí | Apache 2.0 | 400 | Mayor altura x (letras minúsculas) | | Source Code Pro | No | SIL Open Font | 400 | Diseño sobrio y clásico | | IBM Plex Mono | No | SIL Open Font | 400 | Identidad corporativa IBM | | Hack | No | MIT + Bitstream | 400 | Máxima diferenciación de caracteres | | Victor Mono | Sí | SIL Open Font | 400 | Cursivas estilizadas para comentarios |

Atajos de teclado útiles para ajustar la fuente al vuelo

Visual Studio Code permite modificar el tamaño del editor sin abrir Settings. Estos atajos son especialmente útiles durante sesiones de pair programming, presentaciones o streaming en directo:

• Ctrl + + o Ctrl + =: aumenta el zoom general de la interfaz (incluye la fuente del editor).
• Ctrl + -: disminuye el zoom general.
• Ctrl + 0: restablece el zoom al valor predeterminado.
• Ctrl + Rueda del ratón: al activar editor.mouseWheelZoom: true, cambia el tamaño solo del editor sin afectar al resto de paneles.

En macOS estos atajos se activan con Cmd en lugar de Ctrl. Recuerda que el zoom general de la ventana y el tamaño específico del editor son ajustes independientes, por lo que conviene familiarizarse con ambos.

Ejemplo paso a paso: migrar a JetBrains Mono con ligaduras

Para ilustrar el proceso completo de cambio de fuente, imagina que quieres adoptar JetBrains Mono con ligaduras activas. Los pasos son los siguientes:

1. Visita el sitio oficial de JetBrains Mono y descarga el archivo comprimido con todos los pesos disponibles.
2. Extrae el contenido y selecciona todos los archivos .ttf de la carpeta fonts/ttf/.
3. En Windows, haz clic derecho sobre la selección y elige Instalar para todos los usuarios para que esté disponible en cualquier perfil.
4. Abre Visual Studio Code y pulsa Ctrl + , para entrar en Settings.
5. Busca font family y sustituye el valor actual por 'JetBrains Mono', 'Cascadia Code', Consolas, monospace.
6. Activa la casilla Editor: Font Ligatures para habilitar las ligaduras.
7. Ajusta Editor: Font Size a 14 y Editor: Line Height a 1.5 para una lectura cómoda.
8. Abre un archivo con operadores (==, !=, =>, ->) para comprobar visualmente que las ligaduras se aplican correctamente.

En menos de cinco minutos tendrás un entorno mucho más agradable, sin necesidad de reiniciar el equipo.

Errores comunes al cambiar de fuente

A pesar de lo sencillo del proceso, existen varios tropiezos habituales que conviene anticipar:

• No reiniciar Visual Studio Code tras instalar una fuente nueva: el editor cachea la lista de fuentes disponibles al arrancar y puede no detectarla hasta la siguiente apertura.
• Olvidar las comillas simples alrededor de nombres con espacios, como 'Fira Code': sin ellas, Visual Studio Code interpreta los términos como fuentes separadas.
• Activar ligaduras con una fuente no compatible: la opción permanecerá activada pero sin efecto visible, lo que suele confundir a usuarios principiantes.
• Instalar la fuente solo para el usuario actual en Windows cuando se trabaja con varias cuentas del sistema, provocando que los perfiles de servicio (por ejemplo, al lanzar Visual Studio Code como administrador) no la encuentren.
• Configurar el peso como bold globalmente: algunas fuentes carecen de variante negrita y el editor mostrará una versión sintética poco legible.

Mejores prácticas en equipos

Cuando varias personas trabajan en un mismo repositorio, conviene acordar un mínimo común denominador de fuentes para que las capturas de pantalla, los vídeos tutoriales y la documentación interna mantengan coherencia visual. Una práctica recomendada es documentar la fuente elegida en el README.md del proyecto y proporcionar enlaces a su descarga oficial. Además, el uso de settings.json versionado por perfil permite que cada miembro conserve sus preferencias personales sin afectar a la base compartida.

Por último, al preparar presentaciones o talleres, aumenta temporalmente el tamaño de fuente a 18 o 20 para que el público lo vea sin esfuerzo; puedes crear un perfil Presentación que almacene esta configuración y alternarlo con un solo clic.