Use JetBrains Mono font for code

[ahornace]

@codehippo made a suggestion to use https://www.jetbrains.com/lp/mono/ so I gave it a shot. It was specifically designed with code in mind, it's open-source with free license, and is already being used in IDEA and other JetBrains IDEs.

The difference for comparison (old on the left, new on the right):

I've tried to use the recommended size of 13px. I've also disabled ligatures as some seemed weird (e.g. !==) but some seemed really cool (e.g. ->). It seems they are disabled in IDEA by default as well.

I'll have to look into proper line spacing and letter spacing and also change it in print/mandoc css files. However, I wanted to hear opinions first before spending more time on it.

Thanks.

[vladak]

I'd like to try this on our staging server first and see what the user feedback will be.

As for the ligatures, they need to preserve the original characters when copy-pasting the code, say to a terminal window.

[Sashan]

I can live with proposed change. I see it as a trade: code reads easier with new font, however less code lines fit to window. New font reduces the number of lines displayed by ~1/3. With current font I see 48 code lines, with new font I'm getting 37 lines. My window size is ~1000x800, I usually code on laptop these days.

As I've said I don't mind losing code lines. One thing improves, the other get worse 1 - 1 = 0

[vladak]

More feedback from 2 users:

The current font is considerably easier to read than the proposed one.

[vladak]

For myself, it reads a bit worse even though I am used to IDEA a lot. The increased height and subsequent decrease of visible code is definitely a concern, even on 23" screen.

[vladak]

Got feedback from 3 more users that they like the original better.

[ahornace]

I can live with proposed change. I see it as a trade: code reads easier with new font, however less code lines fit to window. New font reduces the number of lines displayed by ~1/3. With current font I see 48 code lines, with new font I'm getting 37 lines. My window size is ~1000x800, I usually code on laptop these days.

Yes, this is mostly due to line spacing. With line-height: 1.2; the number of lines is the same but the code was not that readable in my opinion so I tried to copy the look from IDEA.

Got feedback from 3 more users that they like the original better.

I felt the same way about the font at first but it seems it's a personal thing and we can't fit one for everything. I'll try to come up with some user settings/customization tab that would use maybe local storage - this could then be enhanced for many more customizations.

[codehippo]

The main benefit of this font is the increased x-height of the font, meaning that the minuscules are bigger in height compared to typical monospaced fonts, increasing the legibility. The font is, however, opinionated (influenced by DIN fonts) in nature and as a result might not be everyone's cup of tea.

Therefore, I think, the way to go could be to enable the users to chose their fonts, as @ahornace proposes. The benefits of the Jetbrains Mono font are definitely there, but everyone's got their own preferences and that's alright. :)

EDIT: ad ligatures—if you were to go the route of personalisation, it might not be a bad idea to expose this setting as an option as well.

[vladak]

Another piece of feedback I received internally:

It took me a while to understand what is happening, since the
differences on the screenshots attached to the change request looked
different to what I was seeing on my screen, and I've finally realized
that on my system 'monospace' font is already sans-serif, so the actual
font differences are minimal for me ;)

Having said that - I'm not sure if part of the problem people have with
the 'new' look isn't coming from the 12px -> 13px adjustment, and line
height change to 1.5 in some cases - it makes the display less dense,
hence complaints about less code being visible. I prefer the old
settings due to this difference. Perhaps another test with these
additional changes removed might give different results.

I think having a 'build-in' font might be beneficial, as on some systems
it might not be possible to install additional fonts, and 'monospace'
might select something unreadable, but looking at the feedback - perhaps
it would have to be configurable by the user - use 'system' or
'built-in' font switch. The same would apply to the other differences -
have 'default' and 'compact' layout. The mail web clients have something
along these lines to allow customization, although I have no idea how
much work would it be to implement.

[vladak]

To be fair, one user actually said that the new is easier to read if I understand his feedback correctly.

[ahornace]

This is a nice article promoting JetBrains Mono and Fira Code:
https://zbee.codes/2020/programming-fonts/

I personally think that JetBrains Mono is much better compared to the system-default. However, it's a matter of taste and I don't want to force users so I'll try to work on "settings" which would allow to select:

• font (choose from system-default, JetBrains Mono, Fira Code, ... ?)
• font size
• line spacing
• ligatures