# Make JuliaMono a bit smaller in discourse

**URL:** <https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343>\
**Category:** Meta Discussion\
**Created:** [July 27, 2021, 3:41am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343 "2021-07-27T03:41:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Seif\_Shebl](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Seif\_Shebl](https://discourse.julialang.org/u/Seif_Shebl)\
**Post date:** [July 27, 2021, 3:41am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/1 "2021-07-27T03:41:05Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/3/1/313c4804181dc60c34e125b7e814113823d3c921.png)

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

---

<div class="post-metadata">

**Author:** ![liuyxpp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/liuyxpp/32/9870_2.png) [@liuyxpp](https://discourse.julialang.org/u/liuyxpp)\
**Post date:** [July 27, 2021, 3:51am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/2 "2021-07-27T03:51:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Seif\_Shebl](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Seif\_Shebl](https://discourse.julialang.org/u/Seif_Shebl)\
**Post date:** [July 27, 2021, 3:53am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/3 "2021-07-27T03:53:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![baggepinnen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/baggepinnen/32/693_2.png) [@baggepinnen](https://discourse.julialang.org/u/baggepinnen)\
**Post date:** [July 27, 2021, 6:38am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/4 "2021-07-27T06:38:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)\
**Post date:** [July 27, 2021, 7:19am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/5 "2021-07-27T07:19:13Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/4/d/4db1dd6d1e48da24317612fd69413aee8d7cdc27.png)

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](https://global.discourse-cdn.com/julialang/original/3X/b/0/b0ef12c43ba4de8653da3ecaf659b096d3ed18ba.png)

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

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [July 27, 2021, 8:10am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/6 "2021-07-27T08:10:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sukera](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@Sukera](https://discourse.julialang.org/u/Sukera)\
**Post date:** [July 27, 2021, 8:28am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/7 "2021-07-27T08:28:47Z")

</div>

This change came about because I asked about whether or not the [misaligned benchmark histograms could be fixed somehow](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054). 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!

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [July 27, 2021, 8:33am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/8 "2021-07-27T08:33:47Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/3/4/340726dc17b05b96c96f3f1677b5df32476ee141.png)

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?).

---

<div class="post-metadata">

**Author:** ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)\
**Post date:** [July 27, 2021, 9:41am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/9 "2021-07-27T09:41:48Z")

</div>

`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.

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [July 27, 2021, 10:09am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/10 "2021-07-27T10:09:39Z")

</div>

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

 ![image](https://global.discourse-cdn.com/julialang/original/3X/4/d/4d4c372a4e51b01def484558e6d0abf05d8d9ac8.png)

---

<div class="post-metadata">

**Author:** ![Sukera](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@Sukera](https://discourse.julialang.org/u/Sukera)\
**Post date:** [July 27, 2021, 10:16am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/11 "2021-07-27T10:16:00Z")

</div>

Have you checked the [other thread I linked above](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/15)? 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.

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [July 27, 2021, 10:30am UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/12 "2021-07-27T10:30:53Z")

</div>

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

 ![image](https://global.discourse-cdn.com/julialang/original/3X/e/2/e2657d7667039ff2d2142dca2b8704dbe8546bed.png)

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 27, 2021, 12:46pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/13 "2021-07-27T12:46:20Z")

</div>

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

`A`A`B`B`C`C`D`D`E`E  
`a`a`b`b`c`c`d`d`e`e

I didn’t revert anything here.

![image](https://global.discourse-cdn.com/julialang/original/3X/3/0/30ff5400c61f1d5a3cbf7e5864a0ad1f6662114d.png)

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [July 27, 2021, 1:14pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/14 "2021-07-27T13:14:50Z")

</div>

Argh.  
100% zoom:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/7/5/753addc7928fdacc4d316c05adfd703ea2e4ec40.png)

110% zoom:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/9/7/97f7fcf029b88b1b13f5c843026f3be34936691d.png)

Font rendering obviously working as intended here…

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 27, 2021, 1:22pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/15 "2021-07-27T13:22:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nilshg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nilshg/32/2283_2.png) [@nilshg](https://discourse.julialang.org/u/nilshg)\
**Post date:** [July 27, 2021, 1:27pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/16 "2021-07-27T13:27:18Z")

</div>

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

![image](https://global.discourse-cdn.com/julialang/original/3X/0/d/0d211d5e8acb6aabeb834f21e13c8c4367f79de5.png)

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!)

---

<div class="post-metadata">

**Author:** ![Seif\_Shebl](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Seif\_Shebl](https://discourse.julialang.org/u/Seif_Shebl)\
**Post date:** [July 27, 2021, 1:34pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/17 "2021-07-27T13:34:33Z")

</div>

> [@pfitzseb](#):
>
> Argh.  
> 100% zoom

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

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 27, 2021, 1:42pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/18 "2021-07-27T13:42:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [July 27, 2021, 2:37pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/19 "2021-07-27T14:37:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 27, 2021, 2:55pm UTC](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343/20 "2021-07-27T14:55:29Z")

</div>

🤦‍♂️

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.

[Next page](https://discourse.julialang.org/t/make-juliamono-a-bit-smaller-in-discourse/65343.md?page=2)