SN Pro Typeface | Hacker News Reader

SN Pro Typeface

supernotes.app

150 pointsdavidbarker54 comments

The font this is based is based on Nunito, by Vernon Adams (as the article states). He's responsible for many google fonts and other open source fonts which rack up billions of views every year. I just wanted to share his story:

https://chrisgliddon.com/the-tragic-story-of-vernon-and-oswa...

I was wondering why it looked so... corpo-humanist.

OT but I love the background blur circle on the burger menu on this site. Very tasty solution to a perennial design problem on mobile.

Thank you! Took a few iterations but got there in the end ~ Tobias, Supernotes

Just a small and polite heads up - that mobile menu isn't keyboard accessible. Regardless, it's a lovely design.

Nit: once the menu is opened the close button is very very slightly smaller than the original hamburger button, so clicking twice without moving the mouse can result in pressing the Home menu item rather than closing the menu.

The whole website is just beautifully done. I found myself mousing over the "What’s New/Features/Pricing/etc." headers repeatedly just because it feels fun! In a world of endless Bootstrap and rampant Corporate Memphis, seeing a lovingly designed bespoke site is so refreshing. Their ad copy is delightful too: “Tired of long waiting times and spinning astrolabes?”

> We've carefully re-designed each character, improving support for Markdown and ligatures.

What does it mean for a font to “improve support for markdown”? Later on:

> we included […] improved symbols for use within Markdown

Again, what does this mean specifically? Never have I had an issue with a font’s brackets or asterisks while writing markdown. Considering the page’s length, it would be useful if you’d taken a section to show what makes SN Pro better than other fonts for this use case.

It does explain it though?

> To wrap up, we included arrows, circular numbers, and improved symbols for use within Markdown – the commonly used text markup language that Supernotes is built around.

and then it has an image of the 'Markdown' marks and Symbol additions

And yet those symbols aren’t relevant for markdown. The octothorp and asterisk, sure, and maybe the checkmark if we stretch its use to checklists (which may make them less clear), but they’re not different enough from other fonts to be worthy of note.

You’ve pointed out a couple times that checkmarks are not clear for checkboxes. This statement feels a bit off in the sense that it’s like saying you shouldn’t put “cookies” in a “cookie jar” or any other item inside of a container named for item - could you elaborate on why checkmarks are not intuitive when placed inside of checkboxes?

> “ To wrap up, we included arrows, circular numbers, and improved symbols for use within Markdown – the commonly used text markup language that Supernotes is built around.”

—-

It’s the ligatures they created.

  (1) through (9)

  Checkmark 

  —->

Etc

How are arrows and circular numbers markdown features? They’re not part of the language. Maybe the checkmark would be justified, for checklists, but even then an x is clearer and it’s not like you can’t do proper checkmarks with other fonts. Or arrows, for that matter.

Markdown has numbered lists, checkboxes, and bullet points - having ligatures that look better w/ those are not crazy.

> numbered lists

Do we know that that’s how the circular numbers are used? They don’t say. Personally I’d dislike that in my numbered lists, but I’m sure others would like it.

> checkboxes

Again, I doubt those checkmarks are clearer than an x. But again, I can see how some people would prefer those. That’s not nothing new to this font, though.

> and bullet points

Where are the bullet points in that example? I don’t see a bullet symbol.

> having ligatures

Ligatures are useful for none of those examples. And it’s not even clear if that’s how they work, since they specifically and exclusively mention ligatures for arrows, not the other symbols. Furthermore, they specifically mention (emphasis mine) “improving support for Markdown and ligatures” meaning those are separate features.

> that look better w/ those are not crazy.

Who called it crazy? Please don’t straw man, I’m not arguing there’s something wrong with adding those features, I’m asking how they relate to writing markdown. Which they mention but haven’t explained. How, specifically, is writing markdown improved by using this font?

Tobias, creator of SN Pro here. Most sans-serif fonts are not designed with Markdown in mind. The asterisks are too small and high, backticks are not noticeable, and combining different symbols such as for footnotes looks off. Here's a comparison for you between Nunito and SN Pro: https://my.supernotes.app/share/iron+junior+degree+doctor

Extending this with additional ligatures and arrows makes this typeface more ideal for reading and editing quickly.

Thank you. This is the specific answer I was looking for.

Small note: on that link the footnote syntax is wrong (unless Supernotes uses their own specific syntax) in that it should be [^Footnote] (caret inside the brackets).

Aha that's just an inline footnote, we support both in Supernotes. So you can quickly write ^[Name of Reference] (that will auto assign it the number 1 once rendered) rather than [^1] ... [1]: Name of Reference.

Footnotes aren't part of the original Markdown specification (https://daringfireball.net/projects/markdown/)

Nice work. Hope it will soon come in variable versions, one for regular and one for italic/oblique. Wish they had used curly quotes on their various samples, also; it’s always nice to check how a typeface handles those.

Thanks. We've been dabbling with a variable version for regular and italic but it requires a bit more work. Feel free to open an issue on the Github and we'll see what we can do. Curly quotes are handled as you would expect :) ~ Tobias, Supernotes

@tobeagram Have now filed Issue #1. :-) Thanks for the suggestion and additional info.

Maybe I'm cantankerous by nature and suffering from decline bias, but I do feel that modern fonts are not "as good" as some older ones, e.g. Helvetica, Avenir, Futura, Akzidenz-Grotesk, Century typeface, etc.

I get that they have different priorities because old fonts were print-oriented and modern ones are designed for screen readability but at a pure aesthetic level I feel that the older ones win out.

A really nice font I've gotten that fits the more "older" style is Berkeley Mono from United States Graphics. Maybe was not the greatest purchase, it is expensive for a font lol, but I really really enjoy how it looks. Not associated w/ them at all but just thought that you might appreciate the suggestion

It is not that expensive for a font (Hi, PragmataPro). The real problem is that it is has a quite limited amount of symbols.

I've found I like SF Pro from Apple, and Iosevka from Belleve Invis. SF Pro especially is really nice for UI elements, and Iosevka is great for coding and terminal work.

https://developer.apple.com/fonts/

https://typeof.net/Iosevka/

I'm curious as to how you perceive those 2 font families?

Also, SF Mono is beautiful font as well, IMHO.

SF Pro works well as a body text font, too. Very legible and easy on the eyes. It’s not unusual for me to set text-heavy sites (like HN) to use it via userstyles.

That's a really good idea, I should try that via uBlock Origin.

Edited to add: in uBlock Origin, go to the dashboard, then the "My Filters" tab/section. Enter this into the filter list box:

  news.ycombinator.com##*:style(font-family: SF Pro !important;)

You can also just clear out the fonts if you want to use the defaults set in your browser:

  news.ycombinator.com##*:style(font-family: unset !important;)

I like the e, it’s cute. The only real issue I have with this font is that the weight of each digit feels uneven. I can’t put my finger on it but looking at the comparison chart with the version numbers, even though the stroke width is the same, they visually feel different whereas the others are more uniform.

It's reminiscent of the e in the Heineken logo, which was carefully designed to invoke the image of a smile.

Anyone have experience using Supernotes? How does it compare to other note taking apps? Any killer features?

I had a hard time getting used to it. I preferred craft instead. Maybe since then there is new features ?

Tobias from Supernotes here. Thought I'd give a brief overview.

In general, people switch to us for speed and simplicity. Supernotes is the only note-taking app out there that is based on collaborative short-form notecards rather than long-form files and folders. Notecards are themselves taggable, linkable, nestable, and shareable.

This modular approach to your knowledge is more organic, allowing you to quickly build out your thoughts and connect them together. We've got all the killer features you expect from a note-taking app, including real-time collab, offline mode, cross-platform (iOS, Android, Mac, Windows, Linux, Web), etc. So give it a try if you have a moment :)

Thanks for this! I'm keen to try it out. Don't have much use for the collaboration but the interface and the other features look nice!

I know I'll probably get some hate for this but I'm getting comic sans vibes from this which gives me an icky feeling

This looks soooo good. Already on the list to try it out on one of my products

Why does SN request my first name, last name, email address and username, and optional photo, and then have a 6+-step tutorial that you can’t escape early? Seems a bit much just for some notecards.

Unlike many other note apps that are meant to be single-player only, Supernotes was designed with piecemeal collaboration in mind, so we want to ensure that you can find your friends/family/co-workers etc easily by username and such.

But we agree that the entire onboarding flow could be a bit slicker, it is high on our list of many, many things to do!

Would be great to have a Homebrew formula for the font distribution. I know for a team of two it’s perhaps a bit beyond the scope, any plans on it by a chance?

Tobias here. Seems like `homebrew/cask-fonts` is the best way to go for Homebrew, but even the repo maintainers suggest that submission to Google Fonts is their desired method to be included [1]. Once / if SN Pro garners more mainstream popularity we will start supporting more methods of distribution.

[1]: https://github.com/Homebrew/homebrew-cask-fonts/blob/master/...

Wow, rare I find a sans serif font that feels so good at first impression. Might give this a shot on my desktop where I normally use OpenSans. Lovely.

Will there be a monospaced variant?

How much would it cost to commission like a really well-done, great typeface?

It's pretty, but small serifs on the uppercase I are a must for me.

That's often done to prevent confusion between a lowercase l and a uppercase I, and granted having both is sometimes preferable (especially with monospaced fonts). But in this case SN Pro's lowercase l has a tail to be clearly differentiable.

Being able to tell the difference between I and l is the first thing I look for when I see a new font. I was happy to see that this does make it easy to distinguish between them.

I'd love to see Linux distros package more open source fonts, like this one. Many distros ship with only a handful of fonts, and I think there are plenty of open source fonts out there that could be included but aren't.

You could just install them yourself? Distro ISOs are already large enough as they are.

Love the arrow ligatures!

Nope. No crossbars on the capital "i." I don't know why anyone opts for a font with this flaw. If you can't tell a capital "i" from a lower-case "L," the font is no good.

You can tell apart a capital "I" from a lowercase "L". The lowercase "L" has a tail on the end. Granted the capital "I" doesn't have a crossbars, but that's usually reserved for serif fonts, not san-serif.

The crossbars on the capital "i" are not serifs. Serif fonts have serifs on the crossbar.

Only sometimes does the lower-case L have a tail. And even if it does, there's no way to know that unless it happens to appear in the same text as a capital "i."

The vast majority of Sans Serif fonts do not use crossbars in the I[1]. But yes, we agree with you that it is important to distinguish the two characters, which is why we have, as Tobias noted.

But in what textual situations do you think it is important to have that clarity when the text does not have both characters? That's the situation where I think it is actually useful. If it is only one or the other, context should be sufficient.

I've attached a paragraph of text using SN Pro[2] that has copious Ls and Is of both cases. Please give it a read, I would genuinely like to know if you feel that our tails are not sufficient (not necessarily perfect, but sufficient).

[1] https://fonts.google.com/?preview.text=I%20love&stroke=Sans+...

[2] https://my.supernotes.app/share/imitate+gain+unlock+execute

Thanks for your reply. I’m on a phone at the moment but will check it out later.

In the meantime I’ll say that the ambiguous capital I is indeed rampant in sans fonts, but that’s not a reason to perpetuate it. Why have any ambiguity ever, when every schoolchild knows how to make a capital I? There is no benefit in doing so, and there are drawbacks.

Reply on news.ycombinator.com