Pixelambacht
pixelambacht.nl · Personal blog · on HN since 2014
Pixelambacht is a Dutch typography blog about web fonts, ligatures, color fonts, and font file sizes.
What HN saysHN links it for Sans Bullshit Sans and its explanation of color font formats, and commenters point to it for details on ligatures and browser support.
35HN people shared it
18linked it in comments
19stories submitted
1.0Kstory points
7 months agolast shared
2014people per year2026
Most-shared posts
- 1Sans Bullshit Sans: leveraging the synergy of ligatures (2015)16 people · 219 points · first shared 2015 · 19 comments on HN
- 2Github became the web's largest font piracy site (2017)3 people · 185 points · first shared 2017 · 138 comments on HN
- 3Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts2 people · 511 points · first shared 2016 · 149 comments on HN
- 4Compyx: creating a multicolor 8‑bit font for browsers2 people · 60 points · first shared 2014 · 12 comments on HN
- 5Multicolor fonts2 people · first shared 2014
- 6Css3 c642 people · first shared 2021
- 7LapisLegit, a font to test the OpenType SVG table1 people · 25 points · first shared 2016 · discussion on HN
- 8How CNN, Yahoo and Fox News are wasting 13 terabytes a month on webfonts1 people · 5 points · first shared 2018 · 2 comments on HN
- 9Blackout: breaking browsers with a font1 people · 3 points · first shared 2016 · discussion on HN
- 10Building Bixa Color, a color font for the web1 people · 3 points · first shared 2016 · discussion on HN
- 11ComicSans.conf, or: fonts have settings too1 people · 3 points · first shared 2016 · discussion on HN
- 12Optical size, the hidden superpower of variable fonts (2021)1 people · 1 points · first shared 2023 · discussion on HN
- 13A New Wakamai Fondue1 people · 1 points · first shared 2026 · discussion on HN
- 14Chromacheck1 people · first shared 2022
- 15Multicolor icons1 people · first shared 2014
What HN people wrote when they linked it
wwalexander · 2024-06-15
The blog post explaining the implementation[0] says the source of the buzzwords was a list “250 Buzzwords We Love To Hate” published on May 13, 2014[1].
[0] https://pixelambacht.nl/2015/sans-bullshit-sans/ [1] https://web.archive.org/web/20140516035753/http://www.ngenworks.com/bl…
lofaszvanitt · 2023-05-13
Suuure!
My fav sites on this topic:
https://pixelambacht.nl/2015/sans-bullshit-sans/
https://www.sansbullshitsans.com/
easrng · 2022-05-25
There are several color font formats. This one can't do gradients. You can check your browser's support at https://pixelambacht.nl/chromacheck/. SBIX is Apple's format and it basically just embeds PNGs in the font which isn't scalable. COLRv0 is Microsoft's format and it basically just stacks single-color glyphs, so it's scalable but doesn't do gradients. COLRv1 is newer (2019) and adds support for gradients. Opentype-SVG is Mozilla and Adobe's format and it embeds SVGs for glyphs. You can do gradients and maybe even animation, and it scales. CBDT/CBLC is Google's format and it also includes bitmap images like SBIX. You can make fonts that support multiple of these with https://github.com/googlefonts/nanoemoji.
Shorel · 2017-10-06
Both of these ligatures (fi and ->) in standard computer fonts like TTF or OTF use exactly the same technology.
The only difference is that one ligature applies to alphabetic characters and the other to non-alphabetic characters.
Ligatures can be used to make some font aesthetically pleasing like this: http://www.impallari.com/lobster/
Or they can be abused like this: https://pixelambacht.nl/2015/sans-bullshit-sans/
It is perfectly possible for a font to have alphabetic and non-alphabetic ligatures.
JoshTriplett · 2017-08-04
See https://pixelambacht.nl/2015/sans-bullshit-sans/ for more information on creating a font with ligatures.
jamessb · 2016-06-17
This is also done by Project Seen [0,1] and sans bullshit sans [2].
[0]: https://news.ycombinator.com/item?id=9783275
[1]: http://projectseen.com/
[2]: https://pixelambacht.nl/2015/sans-bullshit-sans/
strangecasts · 2015-12-13
I assume this is done with OpenType's ligature support, in the style of Bullshit Sans[1]?
[1]: http://pixelambacht.nl/2015/sans-bullshit-sans/
oevi · 2015-06-26
Here is a nice article from a similar project that explains the trick in detail:
http://pixelambacht.nl/2015/sans-bullshit-sans/
centizen · 2015-05-12
The accompanying article by the developers has a really good explanation of how they pulled this off and font hacking in general. And if one was so inclined, it outlines all the steps necessary to add more buzzwords to the font.
http://pixelambacht.nl/2015/sans-bullshit-sans/
Here's the git if you want to play around with it:
https://github.com/RoelN/SansBullshitSans
lordelph · 2015-02-26
The more interesting part for me was how they made it http://pixelambacht.nl/2015/sans-bullshit-sans/
TL;DR version: they made a font with custom ligatures, so that the sequence of glyphs that make 'synergy' are replaced with a single 'bullshit' glyph!
pixelambacht · 2015-02-26
If you like to know about what goes into creating a font like this, check my post about it: http://pixelambacht.nl/2015/sans-bullshit-sans/
It's mostly command line tools, so don't worry about any artistic ability (I didn't).
coderdude · 2015-02-14
Font Awesome allows stacking:
http://blog.fontawesome.io/2014/09/25/custom-file-types-with-stacked-i…
Here's their demo but with some color added:
http://codepen.io/anon/pen/VYQMea
But yeah, you're typically stuck with one color. Here's a demo that shows off multi-color fonts (Firefox only):
http://pixelambacht.nl/2014/compyx-a-multicolor-8bit-font/
That technique could be used to make multi-color font icons if it were cross-browser compatible. Maybe one day. But I think SVG icons are where things are headed.
As for compatibility issues, there's one listed on this page:
https://news.ycombinator.com/item?id=9047846
babuskov · 2014-07-18
There are ways to use multiple colors:
http://www.pixelambacht.nl/2014/multicolor-icons/
tiles · 2014-07-08
I enjoyed this thorough breakdown of the different technologies. "Colorful typography on the web: get ready for multicolor fonts" http://www.pixelambacht.nl/2014/multicolor-fonts/
In particular, it expands on the details behind Adobe/Mozilla's SVG approach, as well as browser support.
sho_hn · 2014-06-17
You should find http://pixelambacht.nl/2014/multicolor-fonts/ an interesting read.
tyingq · 2021-01-31
There's this: http://pixelambacht.nl/2013/css3-c64/
peteretep · 2015-12-04
swyx · 2023-07-10
I collect niche Operating System CSS!
- [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs.
- [Office 97 clipart in svg format](https://archive.org/details/mso97clipart)
- [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
- [7.css](https://khang-nd.github.io/7.css/)
- [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI
- [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)
- [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/)
- DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme
- [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library
more at https://github.com/swyxio/spark-joy/tree/master