Pricing
November 7, 2026
Breathing new life into an old design meme
Certain cultural memes cycle and resurface as discovered by new audiences. This particular photo is one such meme. It’s one I’ve always loved, but hated the poor quality with window glare and leaning perspective. It seems like it originated over 20 years ago in Helsinki, Finland, but the exact origin may now be lost. When it popped again recently, I thought it was high time to recreate it in a more fitting manner — HTML!
Design & Development
The design was really about bringing some realism to the HTML. The vintage marquee letter board backing is felt and I did a quick sampling of the two main colors to get things started. The horizontal stripes are a perfect match for a repeating linear gradient via CSS, so that was a good start. In order to give the background a bit more of a fabric feel, I add an empty <div> top layer with a backdrop-filter subtle blur. This eased the hard edges of the stripes.
Next I started on the text. I started looking at the typography, but quickly stopped myself as I recognized a deep rabbit hole of font searching and testing ahead. Rather than let that derail me, I just went with a sans-serif default font which while not exact, is perfectly recognizable. Once again, the key visual treatment was to add a bit of blur via a CSS filter to soften and round out the lettering.
There were a bit of other small adjustments to the text to get them semantically correct. Each price line is set using an unordered list item because…well…it’s a price list after all. I also used the <abbr> element for the “EUR” text which is one of those under-the-hood deep meaning tags I love to use.
There are also some other considerations and decisions for the prices. Each line is roughly aligned with the background grid to approximate the letters being stuck into the felt, but I didn’t get obsessive about the alignment. I did think about using an SVG filter to tweak the rotation and position of certain letters to give them a more hand set feel, but decided against it as overkill. The same is true with enabling extra OpenType features like tabular numerals or slashed zeros. It just didn’t fit the original.
With the addition of some media queries to handle sizing the type across viewport widths, the sign was complete. The text is live, so it can be updated with new prices or different currencies. You can download the HTML as a single file and then host it.