Mona Sans and Hubot Sans | Hacker News Reader

Mona Sans and Hubot Sans

github.blog

180 pointswaldekm70 comments

It's too grotesk. I think Apple accidentally set everyone off on the "search for the perfect sans font" but neither this nor the new Discord font is anywhere near as nice as San Francisco.

If you want a clean sans font, I'd highly recommend Plex sans: https://fonts.google.com/specimen/IBM+Plex+Sans

Very straightforward, highly legible at all weights, normal-human-being-style kerning and nicely tucked edges. If you're looking for something more flavorful than Roboto, use this or Inter. Please don't design your own eye-melting garbage, for my sake.

Nice call on the Plex Sans, for at least one major reason: The capital "i" has a crossbar.

Any font that doesn't have a proper capital "i" (meaning one WITH CROSSBARS) should be rejected, especially for any kind of technical use. If you can't tell the difference between a lower-case L and a 1, the font is useless. And really the same goes for a capital O or zero.

Plex's capital "O" and it's 0 (zero) is pretty much indistinguishable.

That's unfortunate.

One thing I don't like about Plex aesthetically is that the italic faces have right-facing serifs on the bottom of most letters for some reason. It's needlessly inconsistent.

Here's a list of sans-serif fonts I've found that have proper capital "i":

Chivo (O and zero different width): https://fonts.google.com/specimen/Chivo

Clear Sans (O and zero indistinguishable): https://www.fontsquirrel.com/fonts/clear-sans

Comme (O and zero different width): https://www.fontsquirrel.com/fonts/comme

Darker-grotesque (O and zero different width): https://fonts.google.com/specimen/Darker+Grotesque

Dejavu-sans-mono (zero clearly different): https://www.fontsquirrel.com/fonts/dejavu-sans-mono

Didact-gothic (O and zero different width): https://fonts.google.com/specimen/Didact+Gothic

Droid-sans (O and zero different width): https://fonts.adobe.com/fonts/droid-sans

Droid-sans-mono (O and zero different width): https://fonts.adobe.com/fonts/droid-sans-mono

Luciole (O and zero slightly different width): https://www.luciole-vision.com/luciole-en.html

Metrophobic (O and zero different width): https://fonts.google.com/specimen/Metrophobic

Monda (O and zero different width): https://fonts.google.com/specimen/Monda

Nobile (O and zero different height): https://fonts.google.com/specimen/Monda

Noto-mono (zero clearly different): https://fonts.google.com/noto/specimen/Noto+Sans+Mono

Noto-sans (O and zero different width): https://fonts.google.com/noto/specimen/Noto+Sans

Sen (O and zero different width): https://fonts.google.com/specimen/Sen

Tiresias-infofont (O and zero indistinguishable): https://www.fontsquirrel.com/fonts/tiresias-infofont

Victor-mono (zero clearly different): https://rubjo.github.io/victor-mono/

Thanks for compiling this list, and for what it's worth, I don't think this comment was shadow-banned despite what you mentioned in your other reply.

Jet Brains Mono https://www.jetbrains.com/lp/mono/ is another contender. It has a crossbar I, a dotted 0, and easily distinguishable i, 1, l.

You can add my favourite font to that list:

Fantasque Sans Mono (zero clearly different): https://github.com/belluzj/fantasque-sans

That's unfortunate.

Here's a list of sans-serif fonts I've found that have proper capital "i":

Dejavu-sans-mono (zero clearly different)

Victor-mono (zero clearly different)

Noto-mono (zero clearly different)

Chivo (O and zero different width)

Comme (O and zero different width)

Darker-grotesque (O and zero different width)

Didact-gothic (O and zero different width)

Droid-sans (O and zero different width)

Droid-sans-mono (O and zero different width)

Metrophobic (O and zero different width)

Monda (O and zero different width)

Nobile (O and zero different height)

Noto-sans (O and zero different width)

Sen (O and zero different width)

Luciole (O and zero slightly different width)

IBM Plex (O and zero slightly different width)

Tiresias-infofont (O and zero indistinguishable)

Clear Sans (O and zero indistinguishable)

When I originally posted this list, I provided a link to every one of these fonts. Hacker News "shadow-banned" it without simply telling me that it was flagged, so I spent the time rounding up all the links and creating the list for nothing.

Why do more people not call out Hacker News for its disgraceful treatment of users and deliberate wasting their time? There's no excuse for it. Look at the way they allow you to type out a lengthy question or comment and THEN say, "OH NO, you're posting too fast. Piss off." Instead of simply DISABLING THE REPLY BUTTON.

It's probably because your account is still green. Some of us can see dead comments, so your work isn't gone forever.

However, this seems worthwhile just writing a blog about this.

Also Iosevka (which is configurable in fact).

They don’t have to be. The entire Plex family has plain, slashed and dotted zero glyph variants.

The requirements for programming fonts are a high bar. A few things to ponder:

O0D

L1l|

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5614409/

Inter has this as an alternate.

> If you're looking for something more flavorful than Roboto, use this or Inter.

Speaking of which, Inter 4.0 is in beta and looking really good. Now's a great time for type aficionados to try it out and offer feedback! https://github.com/rsms/inter/releases

Are there any differences between 3 and 4? I didn't see any screenshots anywhere.

Highlights from 4.0b7 release notes:

• Six new "Display" designs which used to be a separate font, Inter Display. Now integrated into the variable font as an optical-size axis (opsz)

• Coordinate system changed to 2048. This addresses some issues with older (10+ years) postscript printer drivers and some software

• slnt (italic) variable-font axis has been removed and there are now two variable fonts, one roman and one italic, both with wght and opsz axes. This addresses issues with web browsers unable to reliably apply italic styles. Also makes it possible for the Italic designs to diverge from the upright "roman" design, which is not possible when italic is an axis of one variable font.

• Lots of improvements to glyph design of all styles, kerning and metadata

Thanks!

> Please don't design your own eye-melting garbage, for my sake.

I think there is still so much room to experiment with Grotesk typefaces. Perhaps the frustration is caused by everygoing going Druk in Magazine design and custom Corporate typography that's just incredibly...corporate. Every other grotesk fork of Akzidenz tends to follow Helvetica's path and the New York aesthetic. Public apathy is understandable.

The other fork of Akzidenz is Univers and its derivates; they are wonderful, especially for technical communication. I can't pinpoint why, perhaps it is nostalgia, but perhaps it is its formality and the way it is kerned by Adrian. Genius. I wrote about it on HN a few years ago: https://news.ycombinator.com/item?id=19621544

There are only a couple of decent typefaces that are alternatives to Univers. Unica77 and Swiss 721, both again trying to bring Helvetica into the Univers business.

So, I've taken up the task of propelling Univers forward. I hope it won't melt your eyes.

Looking forward to the end result!

Plex Sans is too angular for me, the "f", "g" and "t" for example. I like Grotesk style sans serif fonts personally, there still isn't an amazing one out there.

I hate to admit it since IBM are like the OG "big bad company" but their Open Source programming fonts are the ones I like the best out of those that came out recently (Source Code Pro, Cascadia, JetBrains Mono, Mononoki, Go Mono, etc - see https://www.programmingfonts.org)

Not as nice as Route 159: https://dotcolon.net/font/route159/

No crossbars on the capital "i", so no dice.

...I can't deal with that f

Huh? It's not hardly grotesk at all. It's doric revival with a dash of fringe bauhaus.

Grotesk! smh

Absolutely agree, and Plex Mono for monospace!

This was discussed 22 days ago(119pts, 48 comments)[0], slightly different content[1] but not by much. It seems a shame this blog post didn't address samueloph's point[2] (lower L and upper i are ambiguous)

[0]: https://news.ycombinator.com/item?id=33553659 [1]: https://github.com/mona-sans [2]: https://news.ycombinator.com/item?id=33554633

For a body text font, there's no problem with lower L and upper i being ambiguous. When you're reading paragraphs of text, there's virtually always enough context that it's a non-issue.

Now, if you're displaying code or a password or similar that needs to be retyped, then yes they need to be differentiated, but that's not what a font like this is meant for -- that's what monospaced code fonts are for.

But no differentiation is needed for a proportional sans-serif font intended for regular written language. An uppercase i with crossbars above and below would be jarringly ugly for many sans-serif fonts, and similarly a hook at the top of a lowercase L may not fit the font's personality at all, depending on how other letterforms are designed. (And trying to differentiate the lowercase L with something more subtle, by making it a smidgen taller or angling the top, usually might as well be invisible at body text size.)

It still comes up occasionally; just yesterday a customer was talking about the clID field of an XML file in an email, and it's kind of hard to see. For years I thought Douglas McIlroy was named "Mcllroy" (with two lower L's) and I wasn't quite sure how you should pronounce that, until I heard his name pronounced somewhere; "ohh, it's a capital i!"

Given how easy it is to prevent this kind of confusion, I don't really understand why you wouldn't want to at least provide a subtle hint and make either the I or l stand about just a little bit.

It's even worse when one assumes "I" are capital-i's to assuming they are lower-case ells and back.

"Ill-advised llama farm was Ian's folly."

There is no reason to omit the crossbars. Capital "i" has crossbars; every elementary-schooler knows this.

Why select a font with an ambiguous character in hopes that you'll never encounter a situation where it's unclear... and then face a dilemma when it is? Simply select a properly-designed font in the first place, and all use-cases will be served.

Elementary-schoolers write their lowercase a's as single-storey while typography nearly universally uses double-story. They write their lowercase g's as single-storey while fonts often use double-story. And they write their uppercase Q's using a tail that crosses the bowl, rather than one carefully underneath, as if often used in typography.

So I wouldn't rely on how elementary-schoolers write as a guide for typographic design.

In any case, there is a perfectly good reason to omit the crossbars, which is consistency. They are essentially serifs, and it's totally inconsistent to use serifs for just one out of 52 letterforms and not on the remaining 51.

Putting crossbars on an I is like a bar through a 7, a slash through a zero, or a bar through a Z. It's a hack for enhanced legibility but it's ugly. It's noisy. It's distracting. We do it in handwriting or in monospaced code fonts when required, but not for professional-looking body text. Sometimes the more aesthetically pleasing choice is the best one, which is something "proper design" takes into account.

Consistency is great, but why exactly is consistency helpful in this case?

Seems surprisingly defensive to not be in favor of a small change that eliminates an entire category of confusion and improves accessibility.

Fonts are for reading. Consistency in some formal aspect doesn't help that goal per se, because all letters are different and have to recognized as such quickly. Relying on context to disambiguate is a serious short-coming: it slows down reading, and causes possible errors. There's really no way to defend two letters being virtually identical.

Are they serifs? On serif fonts the bars themselves get serifs. They are more like the bar on capital G or the cross bar on capital A.

Yes, they are functionally serifs.

If they were "proper" bars that were an integral part of the letterform, then in a serif font there would be crossbars on the uppercase i that would then have ending serifs themselves, such as you find at the top of a T. But obviously those aren't there.

So yes, they function entirely as serifs, not like bars in other letters.

Those other examples are invalid because they do not distinguish between letters.

And no, the crossbars are not serifs, any more than the horizontal line of a capital G is a serif.

I wish they introduced GitHub Sans Downtime instead of this. There's already plenty of high quality free fonts to choose from.

Hah, good one! I personally use Ubuntu Mono as my programming font, I've yet to find any font I prefer to spend hours a day staring at.

Yeah that one mono font quiz[0] always ends up recommending it to me

[0] https://www.codingfont.com/

Very handy utility! My foray steers me to Source Code Pro.

Cool tool, didn't know about this. Thank you!

I recommend to hide the font names to prevent any bias.

It's missing Iosevka which I use daily since its first release. Maybe it's because it has so many variations.

I used Ubuntu Mono for awhile, but I'm now a fan of both Cascadia Code/Mono (depending on if you want ligatures) and SF Mono, although the latter is a pain to install on non-macOS systems because you have to unpack the .dmg file and the underlying .pkg files.

+1 for Cascadia Code, and especially for the ligatures.

May I recommend Berkeley Mono (https://berkeleygraphics.com/typefaces/berkeley-mono/). It's a paid font but well worth it, given you're spending hours every day looking at it. I have found it to be excellent for the shell and editors.

I really like that font, but that price ($75) is really untenable for me. Is there any alternative?

Input Mono [1] is beautiful, and kinda looks like Berkeley Mono. It too is paid for commercial use, but it's free for personal.

I used Input for a very long time until I made my own blend of Iosevka [2] that looks very similar—just with more exotic symbols.

[1]: https://input.djr.com/ [2]: https://sr.ht/~ashton314/iosevka-output/

Why is everyone talking about these as /coding/ fonts? They clearly don't have that positioning or intent:

> Mona Sans ... work as our primary font across mediums ... You can see it in use on our more marketing-oriented pages on GitHub.

> Hubot Sans ... is our secondary brand font at GitHub ... you can see it in use in the ReadME Project, and on the GitHub Universe site.

Maybe I'm weird, but I loathe body text in sans-serif fonts. They aren't all equally bad, but ilI are often confusing. Just the other day I was reading something somewhere with a name that ended in "ill" and I had to copy-paste somewhere else to tell it wasn't just a roman-numeral 3 smushed on the end.

And of course sentences that start with "Ill" just break my flow of reading.

For those that really care about the 0Ol1I situation, I would suggest Atkinson Hyperlegible [1].

Previously discussed on HN here [2].

[1]: https://brailleinstitute.org/freefont

[2]: https://news.ycombinator.com/item?id=32799872

Everyone and their dog are making fonts these days. Not complaining about high quality free fonts, just find it a bit strange...

Variable fonts, color fonts, etc. There's a lot happening

https://v-fonts.com/

I'll still only stick to websafe fonts for actual websites but I'm excited to see what the future holds. Also because I hate Arial

There's a lot you can do with variable fonts. I remember stumbling upon https://variicon.netlify.app/index.html a year or two ago, although there's disdain for using icons as a font it was eye opening for me with what you could do.

My favorite is fonts with a "serif-ness" slider. You can dynamically switch between a serif and sans serif version of the same font. Imagine doing it all with a single font!

And none of them seem to have good hinting for low-DPI use.

I suspect that’s because a fairly recent operating system version is required to support variable fonts and almost all of those devices are high resolution where hinting is unnecessary.

The iPhone 13 mini I’m using to type this has a pixel density of 476 ppi.

It’s relevant for Full-HD desktops and laptops, both of which remain widespread. I don’t see them going away anytime soon, because of lower cost, and also because a lot of Windows applications are not (or not adequately) hi-DPI-capable. Even 1440p monitor benefit from hinting.

Yes, mobile devices are an entirely different environment. Personally I’m still waiting for 200+ DPI desktop monitors with high contrast (VA or preferably OLED).

Of different categories of device:

• Most mobile devices are high-DPI. (In more affluent countries it’s “almost all”, but in others it’s only “many”.)

• Many tablets are high-DPI.

• Some laptops are high-DPI.

• Very few desktops are high-DPI.

There’s an earlier font named Mona: https://en.wikipedia.org/wiki/Mona_(font)

Yep, with multiple fonts derived from it: https://fonts.aahub.org/

Indeed, I have opened a new ticket to report this issue: https://github.com/github/mona-sans/issues/24

I’m still very happy to see more high quality and free variable fonts. They save a few lines of code and a bit of network egress when self hosting fonts (for better privacy).

I thought variable width fonts were pretty heavy? I don’t think you actually save data over loading two separate weights. The savings come in later (3+ weights)

It’s pretty easy to get to 3 weights, just by having normal, big and small in a page and/or site.

Also when trying to differentiate between the entire range of h1 to h6 type of headlines within the same font.

At least my own tendency is to use at least 3 different weights for most text and heading fonts.

But that may be just me…

Of all the fonts I've used throughout my career, the one I love the most is JetBrains Mono. It's just perfect. I even use it in my terminal.

In my opinion, any font that makes it hard to distinguish between I and l is a failure.

Seems that many big techs are adopting similar style/variant of sans-serif as Mona Sans for branding.

Google's Google Sans: https://imgur.com/N0ePA5O

Microsoft's Segoe UI Variable: https://imgur.com/Rq8RKNQ

Netflix's Netflix Sans: https://imgur.com/Rax5DNF

Is Hubot-Sans.ttf working in XWindows for anyone? Mona-Sans.ttf is fine for me, but not Hubot.

Never mind. It's that hyphen in its name. Mona Sans is called "Mona Sans", but Hubot Sans is called "Hubot-Sans". And FontConfig requires that the hyphen be quoted, eg.: "Hubot\-Sans-16.5:weight=60".

Reply on news.ycombinator.com