Make JuliaMono a bit smaller in discourse

Recently, I noticed that discourse has switched to the JuliaMono typeface. It’s a great typeface with tons of glyphs and a futuristic and fresh design. One thing I noticed though is that its size seems larger than normal text. Look at this excerpt:

Probably, you need something like include("JuliaCourse/Codes/file.jl")
Probably, you need something like include(“JuliaCourse/Codes/file.jl”)

See how different the sizes are and how high the fences are in code mode? Typographically, they should seem optically comparable at least.

Aside from that, experiments say (I don’t have the refs at the moment) that boring and familiar fonts are much better for acquiring information than fancier and nicer fonts. So, I imagine Consolas, Monospace, DejaVu, etc., to be more suitable in this respect. These are of course inferior to JuliaMono in many aspects, they lack the modern look of JuliaMono and they don’t fully support the ligatures and glyphs that it does. In my opinion though, excessive use of ligatures and unicode symbols can hurt the portability and readability of Julia code especially on small and low-pixel-density screens.

I have no complaints at all with JuliaMono other than the current fontsize. Finally, another addition that would greatly improve the users’ experience in discourse is a “Copy” symbol anchor in the upper right corner of code areas for easy copying of code. Something like this:

image

Thank you everybody and many thanks to @cormullion and collaborators for making JuliaMono a thing.

7 Likes

I have a side question: Can I use JuliaMono in VS Code? Where can I get this font?

Of course you can, just download it from GitHub - cormullion/juliamono: repository for JuliaMono, a monospaced font with reasonable Unicode support. and you can install it system-wide based on your system’s instructions. Then, you can specify the font you want in VS Code. Usually, just type JuliaMono in the respective field.

2 Likes

I’ve also noticed that the font has become wider, and the wider font makes the display on mobile require even more side scrolling than before.

I think this is more of a CSS problem rather than a font problem. Fonts are all different sizes. These characters are all shown at exactly the same point size:

Screenshot 2021-07-27 at 08.08.11

so if you want to combine them nicely you’d have to vary their relative sizes using CSS to align what you want aligned.Typically you’d adjust the sizes so that the x-heights are the same:

Screenshot 2021-07-27 at 08.12.15

but CSS is a complex beast and I don’t know how it was done.

FWIW, I find it kind of nice that code is a bit bigger than text. Usually code is the key part of a post, so I don’t mind focusing on it visually.

1 Like

This change came about because I asked about whether or not the misaligned benchmark histograms could be fixed somehow. I think the new font is a smudgeon taller (or at least gives off that effect - we’d have to compare with the old one to know for sure).

Regardless, I think getting font height aligned and consistent across browsers with surrounding font is a much harder task than making it consistently work in a single block of code. Rendering engines are pretty different after all. If you have a specific example in mind, please post a screenshot of what it looks like on your screen!

Yeah, css scales fonts by em-height (ascender to descender), not x-height. On my machine adding a font-size-adjust: 0.55; for code blocks makes the x-height consistent:

image

That’s of course not a solution, because it heavily depends on the sans-serif font used for normal text (although maybe Arial is universal enough for this to work?).

font-size-adjust might be a FireFox-only thing? There’s a website that keeps an updated list of what browsers support, but I can’t find it at the moment on my iPhone.

Ah, right, I didn’t think about checking that. font-size: 0.95em; also seems to work decently well:

Have you checked the other thread I linked above? These points were discussed there and (according to @mbauman) changed to match the surrounding text better. If something is still off, either that setting got overwritten somehow or your browser is doing wonky things.

AFAICT it got reverted; font-size for code blocks is set to 1em atm instead of var(--base-font-size):

Hm. On my screen, this is entirely due to the differing x-heights:

AABBCCDDEE
aabbccddee

I didn’t revert anything here.

image

Argh.
100% zoom:

110% zoom:

Font rendering obviously working as intended here…

4 Likes

Aha, yes, that looks awful indeed. What browser? How can we work around this?

Here’s what I see on FF 91, Win 10, at 100% zoom:

image

On Firefox mobile (Android) it looks fine however (hence my contradictory statements on Slack the other day - when I thought it was fixed I was on mobile!)

1 Like

I can confirm in both chrome and edge, windows 10.

Is this Windows font hinting? That is, is Windows snapping Arial to the nearest pixel… and perhaps JuliaMono doesn’t have the same hinting embedded?

Maybe we just need to choose a slightly different size so that Arial hits the pixel grid better?

I’m not on Windows, but yes, it is a font hinting thing; if I disable that then I get something close to your screenshot. I think I might still prefer font-size: var(--base-font-size); for code blocks anyways.

:man_facepalming:

I had changed the inline font size on the dark theme but not the light one. Try again (with caches cleared, perhaps).

There’s still some font hinting shenanigans going on, too, I think… but this would be a bigger problem.

2 Likes