"A failure to really dig in to the buttcrack creates a bold spot, but even worse, it de-emphasizes the B-ness."
Sites like this are fun. I don't have the actual knowledge to tell if the commentary is insightful or informative but it's usually a good time when you get to look closely at something you take for granted.Oh No created the official typeface for one of my favorite bands, Vulfpeck
https://ohnotype.co/fonts/vulf
There's some great lyrics animations in a lot of their music videos[1] done by Rob Stenson using an open-source library he authored called Coldtype[2]. I played around with it a few years ago, it's quite neat. You can animate variable fonts with python, and even hook it into midi tracks and a lot more.
[1] https://www.youtube.com/watch?v=b2_CJ_nx-l4
[2] https://github.com/coldtype/coldtype
Bonus link, Rob also did the visual for this video, hooking into midi tracks to visualize a synth cover of a Bach fugue
(note: root site not actually ready for publish. don't click too many things or you could ruin my life (mostly a joke about the ruination))
Where I ran into trouble was the readability of the annotations on the visuals. The tiny font combined with the low contrast was too much for me. I found myself squinting and trying to get close to my monitor. Eventually I had to move on, even though I was enjoying the content.
One thing I never understand is why they say "negative spaces" instead of just "spaces".
So if you hang a massive painting, that painting takes up positive space. The parts of the wall that are not covered by that painting make up the negative space.
Think of it like a foreach loop. Sure, it's equivalent to the corresponding for(;;)-style loop but it's also a convenient mental shortcut.
If you are producing a letterform, all the parts of the object you are producing which is not filled by letter is the 'negative space'. The "space" is the whole area, including the letter.
People intentionally play with the distinction in optical illusions:
https://inthewhitespace.com/2021/11/17/what-it-means-to-be-i...
https://www.tate.org.uk/art/research-publications/henry-moor...
If you are a programmer, terms like "imperative" or "declarative" are extremely opaque to outsiders, but convey a lot of information efficiently if you know what they mean.
All: please note this from https://news.ycombinator.com/newsguidelines.html:
"Please don't complain about tangential annoyances—e.g. article or website formats, name collisions, or back-button breakage. They're too common to be interesting."
Yes, sites that don't work on your device are annoying—but uninteresting, offtopic, irritable threads are the closer-to-home annoyance here.
1. objections
2. objection to the objections (<-- you were here)
3. objections to the objection to the objections
...so it veered further off topic. (and yes I suppose my comment here is a 4-th order objection)"Custom navigation" means I as a reader need to split my focus between learning how this thing works, and consuming the information presented, which is presumably the goal of this page. I can't say for sure because the instant my screen started scrolling the opposite axis I smashed the back button.
Pick a lane: this kind of stuff is fine as a "design" showpiece, but if the goal of a page is to convey information, why introduce distractions over sticking with familiar patterns?
> I ask genuinely: what is the value -- in what way does it "fit" so well?
This is a you problem. Its self-evident to anyone willing to explore their world in an incredibly low-stakes manner, and its pretty much pointless to describe or debate the merits to someone able but unwilling to experience it themselves.
We're all talking about our preferences here. Do you mean to come off so aggressive and dismissive?
I firmly disagree the discussion is meritless; I'm autistic, and it's much more taxing for me to navigate the page in a completely non-standard way. Avoiding overstimulation is not "low stakes" for me.
Surely I'm not the only one who feels this way, and surely there's someone who could commiserate or at least willing to have a dialogue or otherwise value my experience. If you don't value it -- well that's a "you" problem.
in other words, it's not that deep. The site is fun and you can figure it out.
Sure, I am perfectly capable of figuring out the site. But I won't trouble myself with it. My loss it seems!
And lastly, the person I was replying to claimed the design "fit the content so well" or something to that effect, which communicates a certain depth, contrary to your claim. I was genuinely trying to understand what I'm missing out on.
and this is different from your point which maybe is "how does this help me understand fonts better?" which is fair.
I can understand the perspective that something whimsical might appeal to a certain group and even enhance the experience; in fact I usually enjoy non-standard game designs, and in general I really appreciate subversion in most media I consume. I think however when it comes to educational or info-dense resources, I prefer the UX to be minimally distracting.
So, the key here is simply the horizontal layout: roman-alphabet letters naturally sit as "siblings" on a horizontal line, and — at least on desktops/laptops [which is pre-assumed here, since the site is just broken on mobile] — people's screens will almost always be much wider than they are tall.
Giving the type examples (a bad "A" glyph, vs a different bad "A" glyph, vs a good "A" glyph) all baseline-aligned on a horizontal line — packed together just closely enough to see multiple of them at a time (to visually contrast them) while also having room for notes in between — allows the eye of an English (or other LTR alphabetic-language) reader to intuitively pick up the same point that's being made explicitly in the notes, implicitly, just by looking at the successive examples next to each-other.
This wouldn't work with a vertical layout. Not just because on desktop there wouldn't be enough room (multiple example glyphs and their notes wouldn't fit together within the viewport), but more fundamentally because said English reader's eye isn't trained to compare things that are juxtaposed vertically nearly as well as it is trained to compare things that are juxtaposed horizontally. (Heck, part of that is inate in our biology: people with regular binocular vision can cross their eyes to superimpose things that are juxtaposed horizontally!)
---
The arbitrary viewport navigation on vertical scroll, is a technique commonly employed by a modern "web experience designer" when what they want to show you is some kind of animated presentation, but one that is so information-dense that there is no "correct speed" for that presentation to automatically play at. Instead, they put the control of the animation into your hands, having you manually scrub through it, by giving the document a large height, and having your Y scroll offset translate to the animation's timeline position.
In other words: this webpage could have (and with a lazier team, would have) been a video presentation. But instead, they went to the extra effort to give you a "video" that plays as you scroll it in a way that feels intuitively similar to scrolling through a webpage; where that interaction "affords" scrolling in fits and starts, to give yourself time to read the content. And where, when you're not scrolling, it is just a webpage, where you can highlight and copy the text, click citation links, hover over things, etc.
---
And sure, in this case, all the "animation" is doing here is moving you horizontally when you scroll vertically, and fading things in and out a bit. And you could accomplish that without hijacking the semantics of scrolling, by just making the page very, very wide.
But even today, it's still a bad idea, accessibility-wise, to ship a "very very wide webpage", because even in 2025, the OEM mice that come with Windows desktop PCs still don't give you any way to scroll horizontally. Which means that any "wide webpage that you are actually expected to navigate by scrolling horizontally" would effectively lock out the average office worker from consuming the content on their work computer (unless they realize that the browser gives them a horizontal scrollbar — which is unlikely, due to the non-discoverability of modern scrollbars.)
(And this first-order effect creates a second-order chicken-and-egg problem: nobody ships very wide webpages [or any other kind of UX views, other than maybe spreadsheets]; so few people even realize it's possible to scroll horizontally, even when they have a mouse or touch surface capable of emitting horizontal-scroll gestures. [Or they know that it does something, but only seemingly bad things — pulling at the edge of the view rather than actually scrolling — so they train themselves out of ever giving any diagonality to their scroll gestures and never intentionally try it.] ...and so we all avoid shipping wide webpages, because it would confuse those people.)
In other words, "hijacking the semantics of scrolling" in this way is an accessibility aid: both for the desktop users with one-scroll-axis mice, and for the people who just plain don't realize they can or should ever scroll/swipe horizontally.
---
Though, I should note that even on this page, which is nearly a perfect case for "just let the user scroll horizontally", there's still the potential for users "getting lost" in a contentless void if you remove the "guardrails" imposed by the single-axis timeline-scrolling mechanism.
There's a bit of this page where you scroll vertically "normally" before and after the scroll-offset animation-timeline sync happens. If the page was literally translated into a wide canvas, there'd still be a bit at the top and bottom that'd just be empty on the right. A user could wind up scrolling down, then right, then up (or more likely, up-right or down-right, which new touchpad-users often do by accident)... and wind up in a blank nothing space.
There's no settled solution for this "getting lost in the empty-space parts of a large canvas" problem on the current web.
That's not to say that it couldn't be solved. Video games have had "camera-lock bounding boxes" for forever. Browsers could allow you to specify a "valid scroll boundary" [probably as a CSS shape, ala clip-path] for a given scrollable container, where the viewport of that container would "run into a wall" if any part of it would collide/intersect/exit the inner boundary of the shape. Then the "wide part" of the document would have a "low ceiling" and "high floor" compared to the beginning and end of the document. (Also, to replicate the current experience, the footer would exist only on the far right of the canvas; and the with-header zone on the far-left would probably also have a "high floor", while the with-footer zone on the far-right would have a "low ceiling.")
But there's no real demand for this kind of fine-grained viewport control... because of the second-order chicken-and-egg problem. Even though it'd be hella neat and many designers [who almost all have two-axis-scroll-capable devices] would love to play with it.
https://files.catbox.moe/kzqxcw.png
How am I meant to use this? None of the sidebar text is clickable.
Fancy navigation isn't worth a damn to me without graceful degradation.
Websites are supposed to have basic functionality without JS.
They are supposed to earn my trust before I grant them the right to run JS locally.
https://news.ycombinator.com/item?id=45530593
https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
But as with quite a few of other such websites, disabling CSS actually renders it easily legible and navigable, even without JS.
It works fine on some mobiles.
Turns out scrolling down is translated to scrolling left.
On one hand, videos are terrible for accessibility. On the other hand, by being a website, in theory this stands a better shot. And yet, someone on a mobile phone probably has a much worse experience trying to consume this content than the equivalent as a series of shorts, one for each letter.
I don't know what conclusions we are meant to draw. I just found it an interesting realisation.