Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use JetBrains Mono as the editor's default code font #36198

Merged
merged 1 commit into from
Jan 20, 2022

Conversation

Calinou
Copy link
Member

@Calinou Calinou commented Feb 13, 2020

This recently released font has been gaining popularity thanks to its readability and aesthetics. It also features font ligatures
(enabled by default, but can be disabled in the Editor Settings).

Its character set isn't as extensive as Hack's, but it should be sufficient for most uses.

More information at https://www.jetbrains.com/lp/mono/.

This also reorders the third-party font notices to be in alphabetical order.

Testing project (for taking screenshots): test_jetbrains_mono.zip

Preview

ImgSli: https://imgsli.com/ODg4Mjg

Before

Code ligatures are not available in Hack, so they are disabled.

2022-01-05_01 49 50

After

Code ligatures are enabled.

2022-01-05_01 48 49

@dreamsComeTrue
Copy link
Contributor

dreamsComeTrue commented Feb 13, 2020

Yes! No longer need to set it up myself. Very good change, sir! ;)
Although - it's pretty strange - for text editor is perfect, but for the Godot's UI itself - doesn't fit at all.

@aaronfranke
Copy link
Member

aaronfranke commented Feb 14, 2020

I edited the post so that the images are lined up and you can open each image in a new tab and flip between them.

Just flipping between the preview images:

  • The biggest difference seems to be that Godot's existing font is more vertically spread out, while JetBrains Mono is more vertically condensed (see f, g, and underscores).

  • JetBrains Mono has more serifs (see i) and heavier curves (see c, r, and parenthesis)

I prefer Godot's existing font, it feels really easy to read. But take my opinion with a grain of salt, since I usually prefer larger fonts and sans-serif fonts and I know many people don't.

@realkotob
Copy link
Contributor

realkotob commented Feb 18, 2020

I've been using Jetbrains Mono in Godot since the day they released it, so I can confirm it works very well 👍

Godot's code editor window is pretty small because of all the extra UI clutter at the top and bottom, so a more vertically condensed font is a lifesaver.

@Calinou Calinou added this to the 4.0 milestone Mar 12, 2020
@realkotob
Copy link
Contributor

Would be nice to have this, it's an objectively positive improvement, especially since the code editor has a narrower text editor than most IDEs, so the narrower characters have been a great improvement for the past few months.

@Calinou
Copy link
Member Author

Calinou commented Nov 12, 2020

Rebased with JetBrains Mono 2.210.

@Calinou Calinou force-pushed the code-font-jetbrains-mono branch 2 times, most recently from 72281ec to 9c54ec8 Compare December 28, 2020 20:30
Comment: Hack font
Copyright: 2018, Source Foundry Authors
2003, Bitstream Inc.
License: Expat and Bitstream Vera Fonts Copyright
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should also remove the now unused blurb for Bitstream Vera Fonts Copyright.

@akien-mga
Copy link
Member

I have no strong opinion either way, but it seems all reactions are positive / nobody is against it, so I guess we can give this font a try for 4.0.

@aaronfranke
Copy link
Member

all reactions are positive / nobody is against it

For the record, I am somewhat against it (reasons here), but it's fine either way.

@akien-mga
Copy link
Member

akien-mga commented Dec 29, 2020

Let's make a twitter poll :)

https://twitter.com/Akien/status/1343847947914645504

@YuriSizov
Copy link
Contributor

I'd say that while Twitter is probably your largest community to probe, it's far from ideal for this particular comparison. You need to flip between different tabs to really compare the difference like Aaron himself suggested for this PR. Twitter makes it much harder to do, as it stretches pictures, adds compression, introduces animation when flipping between them, doesn't make it immediately obvious which one is left and which one is right, etc.

@realkotob
Copy link
Contributor

realkotob commented Dec 29, 2020

Jetbrains Mono is objectively easier to parse for code, I've been using it since January in godot/vscode/terminal and the difference has been literally palpable. I've also recommended it to a half dozen others who have also praised it.

Aaron complained that JM is more condensed, which is actually a good thing, since godot's vertical space is very limited on laptop screens, between the top bars and the bottom panels (which re-open themselves all the time).

There is a reason that JM is more condensed, a very good reason.

@DarkMessiah

This comment has been minimized.

@Zireael07

This comment has been minimized.

@akien-mga

This comment has been minimized.

@Zireael07

This comment has been minimized.

@Cykyrios
Copy link
Contributor

I am not personally convinced about the vertically-condensed argument, at the very least in the provided screenshots, with fixed line spacing. It might help if line spacing is decreased, though.
My main gripe with the JetBrains font is related to that, however: I find p, b, d and q are more difficult to read as the are very condensed vertically.
Other than that, I do like its lowercase i as it's clearly different from lowercase l. I like JetBrains's parentheses as well for their horizontal spacing, as has been mentioned already.

It would be nice to have a comparison for numbers, capital O vs zero 0, and some other similar-looking characters (I, l, 1, i...).

@Calinou
Copy link
Member Author

Calinou commented Dec 31, 2020

It might help if line spacing is decreased, though.

Unfortunately, if you decrease line spacing (even by 1 pixel), it starts looking really cramped.

At this point, it seems there's no clear support in favor of JetBrains Mono. Looks like people stop liking it so much as soon as you don't mention its name in a poll? 👀

image

I think it's better to close this now rather than drag this discussion forever.

@akien-mga
Copy link
Member

Its character set isn't as extensive as Hack's, but it should be sufficient for most uses.

It would be good to know what JetBrains Mono doesn't support compared to Hack.
If Hack has better support for non-latin scripts then it does seem like a better default to me, so that all users have maximum support for their languages out of the box.

Aside from that, I'd be fine giving JetBrains Mono a try. I'm not sure however that having ligatures enabled by default is good for people who are learning programming and need to understand the syntax in detail. Is it possible to have an editor setting to toggle ligatures, so that users who want it can enable it themselves?

@Calinou
Copy link
Member Author

Calinou commented Jan 18, 2022

Is it possible to have an editor setting to toggle ligatures, so that users who want it can enable it themselves?

Yes, ligatures can be disabled in the Editor Settings:

image

Most editors have ligatures enabled by default, but typically ship with a font that does not contain coding ligatures.

@mhilbrunner
Copy link
Member

mhilbrunner commented Jan 20, 2022

So from a technical PoV, Jetbrains Mono Regular is 1/3 smaller at 200kb compared to Hack Regular's 303kb.
According to Python's fonttools, Hack supports 3096 chars, whereas Jetbrains has 4724. (~50% increase)

The only notable ones I found that Hack has and Jetbrains doesn't are some cases for Cyrillic ("special" small and capital letters with symbols/graves? I.e. the range from CYRILLIC CAPITAL LETTER IE WITH GRAVE to CYRILLIC SMALL LETTER WE), some Armenian ones (range ARMENIAN CAPITAL LETTER AYB to ARMENIAN SMALL LIGATURE ECH YIWN and armenian hypen/full stop.) and georgian (GEORGIAN LETTER AN to GEORGIAN LETTER AIN).

Even with these, Jetbrains having +50% more chars at -30% size seems a lot, if this is accurate.

According to fontconfig's font-query, these are the languages Hack supports:
aa|af|av|ay|be|bg|bi|br|bs|bua|ca|ce|ch|chm|co|cs|cv|cy|da|de|el|en|eo|es|et|eu|fi|fj|fo|fr|fur|fy|gd|gl|gn|gv|ho|hr|hu|hy|ia|id|ie|ik|io|is|it|ka|kaa|ki|kk|kl|ku-am|kum|kv|ky|la|lb|lez|lt|lv|mg|mh|mk|mo|mt|nb|nds|nl|nn|no|nr|nso|ny|oc|om|os|pl|pt|rm|ro|ru|sah|se|sel|sk|sl|sma|smj|smn|so|sq|sr|ss|st|sv|sw|tk|tl|tn|tr|ts|tt|tyv|uk|uz|vo|vot|wa|wen|wo|xh|yap|zu|an|crh|csb|fil|hsb|ht|jv|kj|ku-tr|kwm|lg|li|mn-mn|ms|na|ng|pap-an|pap-aw|rn|rw|sc|sg|sn|su|za(s)

This is for Jetbrains:
aa|af|av|ay|az-az|be|bg|bi|bin|br|bs|bua|ca|ce|ch|co|cs|cy|da|de|el|en|eo|es|et|eu|fi|fj|fo|fr|fur|fy|gd|gl|gn|gv|ho|hr|hu|ia|ig|id|ie|ik|io|is|it|ki|kk|kl|kum|kw|ky|la|lb|lez|lt|lv|mg|mh|mo|mt|nb|nds|nl|nn|no|nr|nso|ny|oc|om|os|pl|pt|rm|ro|ru|se|sel|sk|sl|sma|smj|smn|so|sq|sr|ss|st|sv|sw|tk|tl|tn|tr|ts|tyv|uk|uz|vi|vo|vot|wa|wen|wo|xh|yap|zu|an|crh|csb|fil|hsb|ht|jv|kj|ku-tr|kwm|lg|li|mn-mn|ms|na|ng|nv|pap-an|pap-aw|rn|rw|sc|sg|sn|su|ty|za(s)

Diffing that, both seem to support a few languages the other doesn't, I spotted nothing that heavily weighs this in one font's favor though if I haven't missed anything.

Jetbrains seems more maintained:
https://github.com/JetBrains/JetBrainsMono/commits/master vs https://github.com/source-foundry/Hack/commits/master
Multiple commits this year and many last year, vs. Hack which has the latest commits being in 2020, with 8 changes total in 2020. Hack has more stars though :P

Overall both seem like good fonts. Hard for me to gauge whether Jetbrain's +50% more chars are accurate and matter enough, if they do, I think this is the largest point in its favor.

@akien-mga
Copy link
Member

Thanks for checking! Following our discussion in PR review and on chat, let's merge this for alpha 1 (with ligatures enabled) and see what feedback we get from users.

@akien-mga akien-mga merged commit 04d283d into godotengine:master Jan 20, 2022
@akien-mga
Copy link
Member

Thanks!

@Calinou Calinou deleted the code-font-jetbrains-mono branch January 20, 2022 20:46
@dalexeev
Copy link
Member

I'm very skeptical about this, especially in the last two cases, since the characters are visually replaced with dissimilar ones. I know that I can change the font back in the Editor Settings, but such a default font is not the best idea IMO. I don't mind pretty fonts, as long as it doesn't harm clarity and unambiguity.

@akien-mga
Copy link
Member

As pointed out in #36198 (comment), you can disable code ligatures with an editor settings, you don't have to change the font.

@Cykyrios
Copy link
Contributor

My biggest gripe with ligatures is the way they interact with the caret, as it will somewhat awkwardly display somewhere across the ligature; I feel like it defeats the purpose of mono fonts. I don't know how many people use ligatures vs those who don't, but I would personally prefer they be disabled by default.
Now of course this is just personal preference, just like the font itself, which I decided to switch to another one (thank you @Calinou for that link to Recursive).

@wyrmling
Copy link

wyrmling commented Jan 24, 2022

I'm very skeptical about this, especially in the last two cases, since the characters are visually replaced with dissimilar ones.

I must say - I had similar opinion when it was first time introduced for JetBrains products. But I gave it a try. In result - I tried to revert to Consolas after some time (as I was quite lazy to change it back) or at least to remove ligatures :) And... it doesn't work, I've got used too much to jetbrains mono already and ligatures. It's really removing noize from the code, making it easier to read and etc. At least it's my case.

I don't know how many people use ligatures vs those who don't, but I would personally prefer they be disabled by default.

Just give it a try )

@wwderw
Copy link

wwderw commented Jan 24, 2022

I would say give the font a shot with ligatures. It really does make the code easier to read, at least in my opinion. For some, it may be that it's just so new that it doesn't seem right, I dunno (at least not messing with ===, that one did take me some time to get used to for me).

It just appeared to be easy on my aging eyes and I do like the ligatures as well, but it is personal preference.

@Leroy-X
Copy link

Leroy-X commented Jul 29, 2022

Prefer the Hack font more, just a personal opinion.
The " i " in JetBrains Mono looks like the design style is inconsistent with the rest of the characters, with more serifs. looks odd.
Overall, the Hack looks a little more relaxed and free.

@YuriSizov
Copy link
Contributor

The " i " in JetBrains Mono looks like the design style is inconsistent with the rest of the characters, with more serifs. looks odd.

It's probably to distinguish it from the lower case L better. In Hack they are very very close, which is a problem for people with poor eyesight, like myself.

@Leroy-X
Copy link

Leroy-X commented Jul 30, 2022

Thank you, I think I'll keep using the Hack font, even if it needs to be downloaded separately.
When I first touched Godot, part of the reason I liked it was because its font, like Godot's logo with a little fun and cute, made me feel relaxed. : P

@RolandMarchand
Copy link

JetBrains Mono is not a dyslexic-friendly font.
Most of the letters are of the same height and of similar shapes, even more so than Godot's previous font.
Godot aims (and mostly succeeds) at being accessible, but this font conflicts with this noble goal.

An example of an accessible font would be Comic Code, which I use daily.
This monospace font is designed to be easy on the eyes, and every single character has a unique shape.
There are almost no mirrored characters. Even the parentheses are asymmetric, which surprisingly increases readability.

On a less important note, I don't feel like JetBrains Mono fits Godot's image.
Godot is a friendly editor, anyone can make a game with it, and the engine and its community are going to welcome you with opened arms.
This font feels cold, sharp and professional with its verticality, thin lines and uniformity.
Comic Code, on the other hand, is the total opposite. The font is more horizontal, it is round and curvy, and every letter is unique. Some are even slightly quirky.

To be clear, I am not suggesting that we use Comic Code. Even though I like it, I am not convinced it suits Godot's image.
What I am suggesting is that that we choose a font that everybody can easily read, first and foremost. And perhaps a font that better fits Godot's image.

Preview

https://imgsli.com/MTMxNTQz

Before

image

After

image

@realkotob
Copy link
Contributor

realkotob commented Dec 24, 2022

@RolandMarchand I think that is valuable input, however I think JetBrains Mono is a good default for most users since it is just objectively better for reading code for most people.

I do agree that we can ship with an alternative font for cases like the one you mentioned, and we can have it be enabled under some Accessibility settings.

If you would like to open a proposal for that then I can look into it if the proposal gets positive sentiment.

@Calinou
Copy link
Member Author

Calinou commented Dec 24, 2022

We should be wary about shipping more optional fonts with the editor, as this will increase binary size. This is especially relevant for the mobile/web editors, where keeping this size low is critical for fast download and loading speeds.

In general, if you want to use a specific font for accessibility reasons, there's a fair chance you've installed it user-wide or system-wide already (so you can use it in other programs). This font may also receive regular updates; using a system font allows updates to apply throughout all programs you're using – assuming they're not bundling the font.

What we can do is allow the editor to use a system font (Comic Code) as an alternative to specifying a path to a custom font file (/path/to/ComicCode.ttf). This could be done for both the main font and code fonts, as a fallback if you enter a font name instead of a path. This way, you only have to write the font name instead of the full font path.

cc @bruvzg

@bruvzg
Copy link
Member

bruvzg commented Dec 24, 2022

An example of an accessible font would be Comic Code, which I use daily.

Comic Code is a commercial font, we definitely can't include it in any form.

This is especially relevant for the mobile/web editors

We can add some system font names as an alternative, but it will make sense only on desktop. Web do not have system font support, mobile do, but installing system-wide fonts usually is not as straightforward as it is on desktop.

But I guess adding an option to select system font in the editor setting should be added.

@realkotob
Copy link
Contributor

What we can do is allow the editor to use a system font (Comic Code) as an alternative to specifying a path to a custom font file (/path/to/ComicCode.ttf). This could be done for both the main font and code fonts, as a fallback if you enter a font name instead of a path. This way, you only have to write the font name instead of the full font path.

@Calinou This sounds good, and is in line with how other IDEs do it, e.g. VSCode. You usually have to type just the font name and it will detect it if it's installed system-wide.

I think this would be a great solution.

@Leroy-X
Copy link

Leroy-X commented Feb 7, 2023

So when the official version is released, will it return to the previous hack font? I'm not sure the Code ligatures are right because there are symbols like , . Will it be confusing?

@YuriSizov
Copy link
Contributor

YuriSizov commented Feb 7, 2023

So when the official version is released, will it return to the previous hack font?

No, there are no plans to revert the current code font. And you can disable ligatures in the settings, it's not related to the font.

@Calinou
Copy link
Member Author

Calinou commented Feb 7, 2023

So when the official version is released, will it return to the previous hack font? I'm not sure the Code ligatures are right because there are symbols like , . Will it be confusing?

JetBrains Mono is here to stay as the default code editor font, but font ligatures are disabled by default now. If you want to use Hack again, you can download it here and specify it as a custom code font in the Editor Settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.