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.