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:
Of course you can, just download it from https://github.com/cormullion/juliamono 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.
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:
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:
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:
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.
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.
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!)
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.
