Show HN: One clean, developer-focused page for every Unicode symbol (fontgenerator.design)

198 points by yarlinghe ↗ HN
I’m building a Unicode reference where each symbol has its own dev-friendly page with all relevant encodings.

Example: [https://fontgenerator.design/symbol/almost-equal-to](https://fontgenerator.design/symbol/almost-equal-to)

Includes Unicode, HTML, CSS, JS, UTF-8/16 bytes, URL encoding, and usage examples.

The same structure is used across thousands of symbols (math, arrows, currency, tech/UI, punctuation).

Built because existing references are fragmented. Feedback welcome.

49 comments

[ 25.6 ms ] story [ 3083 ms ] thread
Planning to add more symbol-specific notes (confusables, common pitfalls, rendering quirks). Curious what details people usually look for but can’t find.
The useful info that doesn’t already exist a dozen times on the web is the info you can’t auto-generate.
I really like this. I appreciate the many "copy" buttons that make it easy to grab various font values once I find a character. Good job!
> We use cookies and similar technologies for analytics (Google Analytics) and session recording (Microsoft Clarity). Ads may be enabled in the future (Google AdSense). By continuing to use this site, you acknowledge this notice. You can manage cookies in your browser settings. EU/UK users: this serves as our cookie notice.

No. Please just give me an option to reject all tracking cookies instead of just kicking me in the face with a done deal.

Whoever wrote this 'EU/UK users: this serves as our cookie notice' is ignorant of the actual law. Have a look at:

https://gdpr.eu/cookies/

I’m looking at the currency block. Each box has a colored “drop shadow”. I spent a minute or so trying to figure out what the significance of the color is. Finally, I noticed that the color appears to cycle between cyan, magenta, and yellow. Is this a design element only, or do the colors actually have some meaning with respect to the symbol?
Ohh, this is great! I actually was looking for something like this the other day. Thanks for sharing and nice work!
I'd like the hint to display the hidden parts of each box when hovered.

I don't need to be told on each one to "Click to Copy".

But nice concept.

On mobile, the expand icon covers 1/4 of each character so it is hard to see what they are
Very nice.

I found it odd, that tapping on a square “highlights” it, by making it “pop,” but nothing else really happens.

It took me a bit to figure out that I need to actually select the arrow in the upper right corner, to get the page.

Agreed — the small expand target was a mistake, especially on mobile. I switched to “tap card = open details” and moved copy into a dedicated, larger button. Much clearer now.
This is beautiful. Love the design. When I read the title I thought it was "one page per Unicode" so I click on the codes and hope a page will open with a giant Unicode where I can see about it in details.

Oh well! Still good.

When I click the "Click to copy" my UI reflex tells me to look for a "Copied!" or similar acknowledgement. But I don't see one, so there's uncertainty if it was copied safely to my invisible clipboard or not.

Please keep making this, it's good! What inspired you for the design? I like this style, and notice it around, but can't pinpoint.

Some constructive criticism:

Please don't display text directly on the grid background image. It makes it impossible to read the text easily. Currently, this is the case when you open the page for a specific symbol in the 'Usage & Context' section.

(comment deleted)
Nice, but way too many abbreviated descriptions and no way to see the full name of a symbol without clicking on it. Needs a tooltip / title.

Or better, if 90% of all symbol names are abbreviated, your design simply doesn't work. This is especially apparent in the "arrows" section.

> Use an HTML entity, a decimal code, or a hex code.

Please no: just write the character. <, & and (in quoted attributes) " or ' are the only characters that need to be encoded; a few others have arguable benefit to being encoded (most notably NO-BREAK SPACE), but most Unicode characters should just be put in literally. The days when you couldn’t be confident of the file encoding are past: your HTML is being served as UTF-8 (or in the rare case it isn’t, you should fix that instead of avoiding non-ASCII in the source).

Same deal with CSS (" and \ are the only ones you need to escape) and JavaScript (" or ' or `, as appropriate).

URLs? Occasionally you may encounter a legacy system where you need to percent-encode it yourself (similarly around punycoding internationalised domain names), but you can almost always (and thus, in my opinion, should) just write it and leave anything that wants it to be ASCII to perform the percent-encoding itself.

Excel I can’t comment on, but I presume you can just write "≈" and UNICHAR should almost never be used.

No disrespect but I would not call this "clean". The design is overwhelmingly cluttered and distracting. Especially given that each symbol is obscured by a black square with an arrow covering it. The symbols are themselves very small.

Maybe get rid of all the noise and just display the symbols in a nice grid without all the fluff or layers.

(comment deleted)
My go-to site for Unicode symbols is graphemica.com. I like that you show very directly the different use cases, but miss different encodings and the ability to browse unicode sequentially.
I run a couple similar sites:

FileFormat.Info[1] has a page per codepoint. It has been around awhile, so the UI isn't as whizzy, but it has all the data and works w/o JavaScript

UnicodeSearch[2] is an updated search UI that uses JavaScript and the excellent Tabulator grid widget.

There are actually a ton of similar sites with a page-per-codepoint. It is all fun to make one, until the bots come along and hammer every page.

[1] https://www.fileformat.info/info/unicode/char/2248/index.htm

[2] https://www.unicodesearch.org/

(comment deleted)
Could use a list of (free) fonts that support the corresponding glyph.
Added a small “Font tips (if you see □)” section with system font notes and Noto suggestions. Also added a codepoint fallback page so you can still inspect encodings even when the glyph doesn’t render locally.
How do I search for egyptian hieroglyphs? searching for "egyptian" neither for "hieroglyph" works

searching directly for 𓁤 also doesn't work

(comment deleted)
It's odd that searching for "section" finds U+2E39 (Top Half Section Sign) but not U+00A7 (Section Sign).

The directions for input on on each operating system are all the same, use an app? On Windows there's a key sequence based on the codepoint integer. It should tell you exactly what to type. The Linux one is especially odd "Use the Character Map app or a Compose key sequence, then paste into your app" because if there's a compose key sequence you don't need to paste it.