Nabla – Isometric Color Font

https://nabla.typearture.com/

120 48 4 years ago

nabla.typearture.com

jansan• 4 years ago

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

jfk133• 4 years ago

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

nrabulinski• 4 years ago

It’s only implemented in Chrome for now

sho_hn• 4 years ago

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

systemvoltage• 4 years ago

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.

spaceman_20202• 4 years ago

That's a wonderful logo.

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

imachine1980_• 4 years ago

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

orthoxerox• 4 years ago

other than Java

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

ChrisMarshallNY• 4 years ago

Swift.

Kwpolska3• 4 years ago

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

Not exactly iconic or wonderful.

aasasd• 4 years ago

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

dwringer• 4 years ago

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

username_exists• 4 years ago

Very cool

glasshug• 4 years ago

Lovely design and nice engineering!

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

nomel3• 4 years ago

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.

fluoridation3• 4 years ago

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.

nomel3• 4 years ago

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.

jensenbox• 4 years ago

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

Error code: SIGILL

wwwigham• 4 years ago

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

pwinnski2• 4 years ago

"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?

red_trumpet• 4 years ago

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

jfk133• 4 years ago

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

TheRealPomax2• 4 years ago

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.

habitue• 4 years ago

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

kevingadd• 4 years ago

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.

culi3• 4 years ago

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

https://caniuse.com/colr-v1

alwillis• 4 years ago

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

pwinnski2• 4 years ago

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

tiagod2• 4 years ago

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

tiagod2• 4 years ago

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.

boomskats• 4 years ago

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

balls187• 4 years ago

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

abrookewood• 4 years ago

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

kotborealis• 4 years ago

It's actually a native color picker

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

kyleyeats• 4 years ago

only solid colors

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

Nabla – Isometric Color Font

Related Stories