Jetbrains Mono has just been released in the past few days. With no more words and no more memes, let’s take a quick review. Which one is the most popular among developers: Jetbrains Mono, FiraCode, Source Code Pro, Consolas?

1. Preparation for evaluation

Lu Xun said: to do a good job, you must sharpen your tools first

Font resources download

  1. Jetbrains Mono
    • Official website/Download (by Jetbrains)
  2. FiraCode
    • Official warehouse/download
  3. Source Code Pro
    • Official warehouse/download
  4. Consolas
    • MS introduction/download (with VSCode)

VSCode Settings & plug-ins

Since Jetbrains Mono and FiraCode are all fonts with programming hyphen, VSCode still needs to do some Settings to enable hyphen. Font Switcher is also used for evaluation. Please install this plug-in in advance.

First, we open the setting page through preference/ Settings to perform quick operations, or directly edit setting.json file as follows:

// settings.json
{
    // ...
    "editor.fontLigatures": true.// Whether to enable font hyphen
    "editor.fontSize": 14.// Set the font size
    "editor.fontWeight": "normal".// Set the font size
    "editor.fontFamily": "'Jetbrains Mono'"."font-switcher.enableLivePreview": true."font-switcher.fontFamily": "'Jetbrains Mono','Fira Code', 'Source Code Pro', Consolas, 'Courier New', monospace",}Copy the code

Ctrl+Shift+P open the command panel, type Switch Font, and you can Switch between fonts 🎉!

Second, the evaluation begins

The author believes that “a picture is worth a thousand words”, “there are a thousand Hamlets in a thousand people’s hearts”, we first look at the actual effect of each font!

Ps: As I am a novice in front-end development, I will use Vue’s template code as the benchmark

Jetbrains Mono

FiraCode

Source Code Pro

Consolas

The Code Template used in this evaluation is Code Template

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "home".components: {
    HelloWorld
  },
  methods: {
    /** * ABCDEFG ABCDEFG * 1234567890
    foo: (name, age) = > {
      name = name == "Foo" ? "A real foo" : "Are you ok?";
      return age >= 35 ? "Out" : "996"; }}};</script>
Copy the code

Immature summary of the author

As an immature front-end development, I know that every line IS not code, is a Bug! Bah, art and Zen!

A good font will help us form a clean face, and if a product manager comes looking for a Bug in the future, we will at least get a no for the face

For the author, the first thing to do is to eliminate, because Source Code Pro and Consolas do not have hyphenation, so unfortunately the author was excluded.

Why is a hyphen good? Here’s a quote from the Jetbrains Mono page:

A hyphen is a character made up of two or more hyphens. Traditionally, it was introduced into printed text as a space-saving technology. In code, this technique is used to display operators for two main purposes:

  1. Eye strain is reduced by incorporating symbols and removing details to reduce noise.
  2. In some cases, white space can be more effectively balanced by moving glyphs.

However, Fira Code doesn’t look as sharp as Jetbrains Mono, and it can be confusing to the eye if you look at it for a long time. (This may also be related to the optimized design of Jetbrains Mono, please check out the features on its website.) OK, the winner of this test is Jetbrains Mono! Please send me money 💰, my Alipay account number is 157XXXXXXXX ~

Of course, in addition to the four fonts mentioned in this article, there are many other great fonts that you love, feel free to leave a comment in the comments section

Happy New Year 🎊!