The Immortal Jellyfish (2015)
amnh.orgIn response to physical damage or even starvation, they take a leap back in their development process, transforming back into a polyp. In a process that looks remarkably like immortality, the born-again polyp colony eventually buds and releases medusae that are genetically identical to the injured adult. In fact, since this phenomenon was first observed in the 1990s, the species has come to be called “the immortal jellyfish.”
Yes, like many plants and fungi, jellyfish exhibit “alternation of generations” with both an asexual and a sexual reproduction stage. Since the forms are usually far different in size, one biologist remarked it’s as if a woman gives birth to a mouse and then a mouse to a woman.
If anyone is wondering why the body text on this page looks so beautiful, it's this sneaky CSS property:
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
Seems like sites with notoriously nice UI (e.g. Stripe) all like to use it.Three things:
① I believe this only affects macOS, and has no effect on any other platform.
② There’s no such property as font-smoothing. Only -webkit-font-smoothing and -moz-osx-font-smoothing, with their different values.
③ Attempting to control this is highly controversial. You may prefer it one way, but others may prefer it otherwise. See, for example, https://usabilitypost.com/2012/11/05/stop-fixing-font-smooth.... (Note that discussion of these things tends to be from 7–15 years ago. I have no idea what the present situation is; I know macOS largely eschews subpixel antialiasing these days, so maybe the effect of this property has changed now, or maybe it literally does nothing, I don’t use macOS.) As a generalisation, you should not do things like this, but leave it to the platform or the user to decide. Features like this don’t tend to end up part of the standardised web platform, because you normally shouldn’t be able to control them, and when people control them, they’re normally doing so in order to work around platform-specific issues, or just because they’re copying and pasting what someone else did without understanding.
Ha, you're right about `font-smoothing` - it appears in the OP CSS like this but I guess they meant `font-smooth` [1] (which has a giant red warning akin to what you said).
> As a generalisation, you should not do things like this, but leave it to the platform or the user to decide.
Tailwind also does it (e.g. see the CSS behind this page [2]). Those guys wrote probably my all-time favourite resource on UI design [3], so I do put value on little tricks like this that they're using.
1. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
Even font-smooth isn’t a thing, never was. It was part of a very early draft, and dropped, unimplemented, something like twenty years ago because people realised it was a bad idea and had no place in CSS.
As for Tailwind, speaking bluntly: Tailwind includes some terrible ideas. Just because it supports something, or even because they use it on their own page, doesn’t mean it’s good. (I mean really, just look at that “Applying conditionally” subsection! Changing antialiasing technique on hover or by media query? Have they completely taken leave of their senses!?) Some people like the font-smoothing change. Others loathe it. Overall, changing from normal behaviour is hazardous.
Here is a somewhat convincing argument why it can be considered a “fix” for MacOS [1]
I have found this to be true with some fonts - they’re excessively thick on MacOS with the default subpixel antialiasing.
The biggest idiosyncrasy of Apple’s font rendering is what they horribly misname “font smoothing” in their UI, which is actually glyph dilation: by default, they make glyphs a little thicker than they were designed.¹ This is considered a feature of macOS. A frustrating feature that I wish didn’t exist (I strongly suspect it’s a contributing factor to many uses of font-weight 300 or less, which are inappropriately thin for body text on all other platforms), but a feature nonetheless.
If the greyscale antialiasing in a browser doesn’t do that (I don’t know), honestly, that’s a bug, if it leads to it rendering things inconsistently with the rest of the platform.
I also strongly suspect that argument will be at least partially obsolete, as there were major changes the next year. Far too many people talking about these things cite articles from 2010–2017, even though the environmental conditions have changed radically since then, and they don’t tend to reexamine them and clarify if they’re still completely accurate.
—⁂—
¹ 0.3px at typical body text sizes: https://twitter.com/pcwalton/status/918991457532354560, https://twitter.com/pcwalton/status/918593367914803201.
didn't know that trick, do you have some other cool ones?
Only other trick I know is the super white trick which is whiter than the brightest white
> Only other trick I know is the super white trick which is whiter than the brightest white
How do you do that? That sounds cool! Make everything else #eee?