Nabla – Isometric Color Font | Hacker News Reader

Nabla – Isometric Color Font

nabla.typearture.com

120 pointsChrisArchitect48 comments

I know this isn't the most constructive comment, but as a South Park fan, I will never not call this font NAMBLA[0]. I know what the nabla symbol is, I know it's completely unrelated. But it's just too damn close.

[0]: https://en.wikipedia.org/wiki/North_American_Man/Boy_Love_As...

Sadly I did a double take when reading the font name as well.

> Engineering > Just van Rossum

Guido van Rossum's brother. He also designed the "Python powered" logo (and in his main career, had a hand in widely popular fonts like ITC Officina).

I love the python logo. It is not generic and stands out really well, especially in an era where logo design has regressed so much.

That's a wonderful logo.

Only programming language I can think of with an instantly recognizable logo, other than Java

i'm disagreeing ruby, go, rust, this last two have both mascot and logo that are easy recognized

Yeah I feel like "recall" is being confused with "recognize" here. I'm sure any programming who's been at it for more than a year would also recognize the Rust, Swift, Kotlin, and probably even Elixir logos. But I agree that Python and Java are some of the easiest I can recall despite not having worked regularly with either of those languages in the past year

> other than Java

I never understood what that triangular clown was meant to be. Can't deny it's recognizable.

An even more recognizable logo would be the coffee cup.

In my headcanon Duke is a personified Ouija board planche. Just like the planche is the go-between for the user and the Ouija board, Duke is the go-between for the user and the tablet computer for which Java was originally designed.

It might be a bit of a stretch, but he was originally more than a mascot but a "software agent" through which the user's actions were carried out, a sort of more active version of Clippy.

Swift.

I believe they are talking about this logo: https://i.imgur.com/2HaRHM7.png

Not exactly iconic or wonderful.

There is this logo as well: https://www.python.org/static/community_logos/python-powered...

Source: https://www.python.org/community/logos/

That one wasn’t designed by Just van Rossum.

ah, I was thinking of the blue and yellow double snake logo

Yeah, the double snake logo was made by Tim Parkin.

Ah, Officina, one of my first humanist font loves.

"Nabla is currently only supported in Chrome."

Oh yay, another Google invention for the web that others now have to support or be accused of holding the web back. Is it Thursday already?

Firefox 106 seems to handle the font just fine. I also see the gradients, they claim to not work on Firefox yet. But yeah, that line at the bottom is a bit weird...

[1] https://fonts.google.com/specimen/Nabla

The font also contains SVG glyphs, in addition to the COLRv1 versions, and that's what you're currently seeing in Firefox.

Firefox 107 will introduce COLRv1 support, though at least as things stand now the SVG glyphs still take precedence (unless you disable that feature).

Not really? COLRv1 only officially landed in OpenType 1.9 with some changes slated for 1.9.1 - OpenType is a consortium consisting of many players, none of them implementing things until the spec is actually official.

Except, of course, when it's some company's own suggestion: MS will early-implement support for new features they themselves propose, Adobe will early-implement support for new features they themselves propose, and in this case Google's engineers had it implemented before it was officially accepted because they proposed it.

Mozilla (and everyone else) waited until the draft become part of the spec, then had to spend the time implement a (non-trivially complex) new rendering pipeline, and make sure that works properly. COLRv1 fonts should work perfectly fine as of Firefox 107.

can confirm, this site works fine in Firefox. I can copy the colorful text and paste it as text

I'm running a build of 106 and it already appears to support much of COLRv1, the gradients in this font show up. Most of the website's sliders are disabled, though.

Seems like opera also has support Firefox has support starting with v107

https://caniuse.com/colr-v1

To be fair, opera is "yet another chromium", like edge and brave, so whenever Chrome adds support for something and upstreams it, all of those get it "for free".

Yes, unfortunately. WebKit’s position on this font format: https://lists.webkit.org/pipermail/webkit-dev/2021-March/031...

Myles @ WebKit seems to raise some excellent points, but I'm not up on browser internals. The criticism seem very much in line with my understanding of motives and incentives within Google, which leads to much duplication of effort.

The Nabla web page makes it seem like "Finally! Color fonts!" while Myles @ WebKit makes it clear that "Many OT-SVG fonts already exist," which seems true[0].

Sigh. I wish people viewed Google more accurately as breakers of web interoperability instead of praising the relentless Chrome hegemony.

0. https://helpx.adobe.com/fonts/using/ot-svg-color-fonts.html

It's been surprising to see how consistently Chrome has lagged behind Firefox and Safari in interop-2022

https://wpt.fyi/interop-2022?stable

The fact that some of the letters are at different "depths" makes this hard on my eyes, since it gives an "impossible geometry" look. For three different depths, see Y (forward), N (middle), and M (back). Look at the bottom of the character. This seems to come from a requirement that the top and bottom of each letter is on the same horizontal line.

They're not at different depths. Lowercase y and lowercase g reach under the baseline, and so the corners you're looking at appear, in the projection, to be at a lower height than, say, lowercase s. I don't see anything about uppercase m that makes it appear in a different position.

The horizontal line of the T goes down to the bottom left of the O. How can this be, since the bottom of the T would be in the middle of the bottom edge of the O, if they experienced the same transformation?

The Y has a different baseline than the T, which also doesn't make sense. They are both a centered vertical line, so they should be the same.

Maybe I'm just completely wrong. But, my eyes are used to boring perspective projections, rather than whatever this is, which is probably why it looks so wrong to me.

You're assuming that all letters have been rotated along an axis that goes through their leftmost edge. That's not necessarily true. Uppercase T and Y have been rotated along an axis roughly centered on their width.

> along an axis roughly centered on their width.

I'm actually not making that assumption. I think it would be easier for my eyes if they did have the same transformation, but they clearly don't. My problem is that it's an impossible transformation!

If you place a piece of paper on your screen, as a horizontal reference line, you'll see the bottom (vertical) portion of the T is aligned with the left of the I. It extends all the way down. The top left of the T is also aligned with the left of the I. I don't see how this is possible.

Here's an image with T translated over to I, to demonstrate: https://imgur.com/a/aSJeYxT

The only way this is possible is if T has a longer horizontal line, which why it looks odd to me, a sort of "duck or woman" effect alternating between "is it left or center aligned", depending on if you look at the top or bottom, with the usual assumption that the characters would have the same height.

You're right, but I guess it would have looked even weirder to have the bottom of some letters at a very different height on the screen depending on their shape.

Pretty sweet. As I understand it appearance is simply changed by setting the font-variation-settings and font-palette CSS properties. Is that correct?

In principle, although the controls don't seem to be working for me at the moment (in either Firefox or Chrome). I guess it's a work-in-progress... (or maybe it's just me).

It’s only implemented in Chrome for now

COLRv1 is also supported in Firefox 107 (currently in beta).

(Though in this case, the fact that the font also contains SVG glyphs gets in the way. Setting gfx.font_rendering.opentype_svg.enabled to false in about:config lets you see the COLRv1 glyphs.)

My Chrome kept "Aw Snapping" on this page. Is it just me?

Error code: SIGILL

Nope, it's not just you! Happens reliably a little bit after page load for me, using Chrome on Android, too!

Cool font, the topmost two banner examples are a little big for optimal legibility on my monitor though, and zooming in/out doesn't change the size (it does for the lower ones, though). Because it expands past my normal reading FOV I keep seeing it as "I Some Try" instead of "Isometry".

The font displays fine but none of the sliders are working on Firefox mobile (nor the palette picker)

Looks like the controls now work, but the font variability ones don't do anything. I assume this is due to actual lack of support of the features by Firefox.

How is the palette picker coded? Looks like an OS widget, but I assume it is just clever CSS/JavaScript?

It's actually a native color picker

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

Lovely design and nice engineering!

I do worry about how heavy the OpenType spec is getting.

> only solid colors

Okay this is actually pretty impressive. Definitely gives a gradient impression.

Very cool

Reply on news.ycombinator.com