FONT VS TYPEFACE VS FAMILY CODE

Once you narrowed the field, try them out in your editorĪ nice little trick to compare fonts inside VS Code is to open setting.json in a split pane, add or delete a font from the list of editor.fontFamily, and save. On hover, you can access a direct link to the theme extension in the VS Code Marketplace.īetween these two web apps, you can narrow down the choices considerably, and move on to installing a font and a theme to try it in your editor. You can toggle the tabs to see different code snippets across all instances.

FONT VS TYPEFACE VS FAMILY WINDOWS

The UX is very well done, it gives a collection of interactive minified VS Code Windows showcasing a particular theme, each one has 3 tabs previewing HTML, CSS, and JavaScript code. I found this article insightful comparing some characteristics of monospace fonts with ligatures to help me in my decision.įor a bigger selection of themes, you can go to vscodethemes. I would recommend trialling out a typeface with ligatures, I find them appealing, but they are not to everyone’s taste! They perform some visual voodoo to morph some language-specific character combinations into a single character, without changing the bytes in your file. There are different weights (light, semi-light, regular) available for font families also, you can try these to see if you prefer lighter or stronger characters. Some of the seemingly subtle differences between typefaces can have a big impact. What I found interesting is the impact of the widths of monospace typefaces, a line of code in Jet Brains Mono is shorter than in Fira Code with the same font size. The advantage of monospace is the fixed width of characters makes code blocks align exactly. Most recommended coding fonts are monospace, but there is no obligation to confine yourself to those.

FONT VS TYPEFACE VS FAMILY DOWNLOAD

There is a direct link to the font to download it. You can paste in your own code snippets to give a more accurate representation of how your code will look like with this configuration. You can choose a theme from a list of popular themes, a language for syntax highlighting, and see how a code snippet looks in 30 different fonts. Mostafa Gaafar created a convenient web app called Dev Fonts. It is like going to a supermarket with an empty stomach, you will fill your cart with chocolate and junk food! 🤤🍫 Preview through Web Apps

So, how can you find the winning combination of font and theme? That would be the marketing pitch to sell you on the idea! I’m not sure about the real benefits, but I do think it is worthy of a little bit of your time to make your virtual workspace more pleasant to trigger happy thoughts!

It can make the horror of a messy codebase feels slightly less horrific. It can give you a glow of satisfaction when you open some code you are proud of. Spending some time to personalise the look and feel of your editor can give your digital life a more homely feeling.

Font vs typeface vs family