Las 3 mejores fuentes para programar y cómo configurarlas en VsCode

Durante mi tiempo en la programación, he tenido la oportunidad de explorar diferentes tipos de letras para mi editor de código. De todas ellas, las mejores fuentes que he encontrado y que están en mi top 3 son: JetBrains Mono, Fira Code y Cascadia Code. A continuación, comparto los pasos que he seguido para instalarlas en mi sistema Ubuntu 22.04 y cómo activarlas en Visual Studio Code.

En internet existen diversas formas de poder activar estas fuentes, pero mi método preferido es a través del gestor de paquetes apt. Primero, actualizamos los paquetes de nuestro sistema local con la información más reciente de los repositorios de Ubuntu.

				
					sudo apt update
				
			

JetBrains Mono

Detallaré el paso a paso de activación de la fuente JetBrains Mono. El procedimiento para las demás tipografías es similar.

Ejecutamos el siguiente comado para instalar el paquete de fuentes llamado fonts-jetbrains-mono en nuestro sistema Ubuntu con privilegio de root.

				
					sudo apt -y install fonts-jetbrains-mono
				
			

Ahora abrimos VSCode, y entramos a las preferencias: File / Preferences / Settings

Vscode settings

Después seleccionamos Text Editor / Font / Font Family

Vscode Font Family

Dentro del campo de texto de «Font Family», añadimos al principio el nombre de la fuente ‘JetBrains Mono’, incluyendo las comillas simples. Es importante separarlo con comas de cualquier otro nombre de fuente que esté presente.

Pot ejemplo, si antes de añadir la fuente 'JetBrains Mono' nos encontramos con estas fuentes ya establecidas, tendríamos que ubicarnos al inicio de la línea antes de 'Droi...'
				
					'Droid Sans Mono', 'monospace', monospace


				
			

Y allí colocar la fuente que queremos activar como principal  más una coma para separar de las demás: 'JetBrains Mono', 

				
					'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace
				
			

Al final debe quedar así:

Font Familiy asignado en vscode

Ligaduras

Las ligaduras son una característica que traen algunas fuentes y que permite mejorar la visibilidad y la estética del código. Personalmente me han traido ventajas como: mejora de la legibilidad y estética, distinción rápida de ciertas combinaciones de caracteres, refuerzo en la comprensión semántica del código y flexibilidad de uso (puedo activarlas y desactivarlas cuando lo necesite).

En la siguiente imagen se puede ver la diferencia en la visualización de los operadores relacionales ==, >=, != y => con y sin ligaduras (fila superior sin ligaduras, fila inferior con ligaduras):

Diferencia entre fuentes con ligadura y sin ligadura

Aunque no todas las fuentes incluyen ligaduras, JetBrains Mono sí lo hace.

Las siguientes imágenes, tomadas de la página oficial de JetBrains Mono, muestras otros operadores con y sin ligaduras:

Fuentes sin ligadura
Sin ligaduras
Fuentes con ligadura
Con ligaduras

Para activar las ligaduras en VSCode, es necesario acceder a la opción Edit in settings.json en la sección Font Ligatures, la cual se encuentra ubicada debajo de Font Family

Activación de las ligaduras en las configuraciones de vscode

Se abrirá un archivo settings.json en el que debemos asignar el valor de true a la propiedad editor.fontLigatures

Activar ligaduras en vscode desde el archivo de configuración

Adicionalmente, se puede configurar el grosor de la fuente con la propiedad editor.fontWeight asignándole algún valor como:

				
					"editor.fontWeight": "300" // Light
"editor.fontWeight": "400" // Regular
"editor.fontWeight": "450" // Retina
"editor.fontWeight": "500" // Medium
"editor.fontWeight": "600" // Bold
				
			

Si los cambios de fuente no se reflejan de inmediado, es posible que sea necesario reiniciar VSCode. Esto se puede hacer rápidamente utilizando el atajo CTRL+SHIFT+P y escribiendo Reload. Luego, elige la opción Developer: Reload Window y pulsa ENTER.

Recargar vscode

Fira Code

Fira Code es otra de mis fuentes favoritas. El proceso de instalación y configuración en VSCode es idéntico al que mostré para JetBrains Mono. Simplemente hay que instalar la fuente y luego ir a la configuración de Font Family para establecer el nuevo tipo de letra:

				
					sudo apt install fonts-firacode
				
			

Agregar el nombre de la fuente  en la configuración delante de las demás fuentes existentes: 'Fira Code',

				
					'Fira Code', 'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace
				
			

Al final debe quedar así:

Vscode fuente FiraCode agregada
También se pueden activar las ligaduras con Fira Code utilizando el mismo procedimiento que se ha presentado anteriormente.

Cascadia Code

Esta es una de las últimas fuentes que he podido probar y que recomiendo mucho: Cascadia Code

Para poder usarlo primero debemos instalarlo mediante el gestor de paquete apt ejecutando el siguiente comando:

				
					sudo apt -y install fonts-cascadia-code
				
			
El procedimiento es igual que para las fuentes anteriores: Debemos agregar el nombre de esta fuente en la configuración de Font Family delante de las demás fuentes separándolas con una coma: 'Fira Code', quedando de esta forma:
Mejores fuentes para programar: Fuente CascadiaCode establecida en las configuraciones de vscode

He probado otras fuentes, pero ninguna me ha terminado de convencer. Como un plus, les comparto un enlace a una web en donde podrán encontrar una amplia variedad de fuentes, tanto con ligaduras como sin ellas. Quién sabe, quizás encuentren tipografías aún mejores: https://www.programmingfonts.org/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio