Issue #8 (Editor Fonts and Ligatures)06/15/22
|
Get a weekly dose of tools, articles, and other resources covering remote work, productivity, career well-being, and lots more.
|
|
|
Every year we get new options for coding fonts to consider in our developer setups. If you're interested in changing the default font and related options in VS Code, you can do so via a number of values in the JSON settings. Some of these are also available in the UI settings view, but the full range of options is only available via the JSON view.
Open your JSON settings in split view and search for "editor.fontFamily". Starting there in your VS Code default settings, you'll see four key/value pairs with descriptions in the comments explaining various ways you can adjust the default font in VS Code.
- fontFamily
- fontLigatures
- fontSize
- fontWeight
You can copy any of these key/value pairs over to your custom settings file and make the adjustments you need. On my system the default value for the font family is Consolas, which I'm generally happy with. You can test drive different fonts on
a website like this one, which includes popular choices like Fira Code, JetBrains Mono, Inconsolata, and lots more.
Once you've selected the font you want, install it on your system then make the necessary adjustments in your custom settings, as shown below:
In my example, I'm trying out Fira Code for the first time. I didn't like the weight of the regular version of the font, nor did I like it when I set
fontWeight to "bold". But it looked much nicer when I used a normal font weight using "Fira Code Medium", which is one of the versions included when you install the font.
The
fontLigature setting, if set to "true" allows the font to use ligatures, which enables common multiple character patterns to be combined into a single symbol. The screenshot below includes some examples that are common in programming:
I don't think the ligatures are for everyone. Personally, I like the natural multi-character version of these symbols. But maybe you'll find these useful.
The four font-related settings I mentioned here are just a few ways you can customize the font in VS Code. I'll discuss further settings you can adjust in future tips.
Now on to this week's hand-picked links!