Death to px, long live ch

Death to px, long live ch! – Terence Eden’s Blog

Theme Switcher:

🌒 Dark

🌞 Light

📰 eInk

💻 xterm

🥴 Drunk

👻 Nude

♻️ Reset

Pixels are a lie. Even if you think you're drawing something with "pixel perfect" accuracy, your monitor is lying to you. There is no grid of platonically perfect squares.

In CSS, pixels are a double lie:

Note that 1px doesn't necessarily equal one physical device pixel. On HD displays, it may span multiple physical pixels. Similarly, 1cm in CSS often doesn't correspond to one hundredth of SI meter. On a large TV screen, it typically is longer than that. The lengths are perceptual: 16px looks roughly the same on a phone, laptop, or TV screen at typical viewing distance.

This blog is primarily text based. I want the width of the text to be readable for the average human. So, rather than setting the main width to be a percentage of the screen, I set it based on character width using the ch unit - which isn't exactly a character but good enough for my purposes:

⧉ CSS--width-content: min(75ch, 100%);

main { max-width: var(--width-content);

When it comes to padding and margins, the same is true. If I want a gap around an element, I want that gap to be in proportion to the text inside it.

For widths, it makes sense to re-use the ch unit. I want the gap to be in proportion to the text.

But for height, perhaps it doesn't make sense to express vertical distance on character width? In which case the ex unit can be used. It is the size of a typical lower-case letter.

Just like my idea to eliminate CSS classes from my HTML, it's possible to go too far with this. I haven't changed every reference from px to ch, I'm just experimenting to see if it works.

There's nothing wrong, immoral, or evil about using px - or any other measure unit. Using ch and ex fit with my particular proclivities.

Share this post on…

try { await navigator.share({url:u}); } catch { // Show an alert if the share failed. Likely means no share support. alert('Copied URl to clipboard'); })()" style=cursor:pointer;>

Voluntary Paywall

Enjoyed this post? Show your support and pay the author.

2 thoughts on “Death to px, long live ch!”

Jeff Sonstein

in my experience, relative CSS measures are pretty much always more useful than absolute measures like px. nice piece.

Reply 2026-08-23 13:01

Shiv J.M.

@Edent Just don’t be like me and continually confuse yourself and wonder why your `padding: 0.75en` has no effect…

Reply | Reply to original comment on mastodon.social 2026-08-23 13:05

More comments on Mastodon.

What are your reckons?

Cancel reply

All comments are moderated and may not be published immediately. Your email address will not be published.

Comment:

See allowed HTML elements:

Your Name (required):

Your Email (required):

Your Website (optional):

To respond on your own website, write a post which contains a link to this post - then enter the URl of your page here. Learn more about WebMentions.

URL/Permalink of your article

🔎 Search

Search for:

🗓️ Explore The Archives

2026

January 27 posts February 28 posts March 23 posts April 24 posts May 19 posts June 17 posts July 17 posts August 38 posts September

October

November

December

2025

January 17 posts February 20 posts March 23 posts April 22 posts May 16 posts June 28 posts July 24 posts August 20 posts September 15 posts October 16 posts November 17 posts December 15 posts

2024

January 31 posts February 29 posts March 31 posts April 30 posts May 31 posts June 30 posts July 19 posts August 18 posts September 18 posts October 29 posts November 31 posts December 30 posts

2023

January 31 posts February 28 posts March 31 posts April 30 posts May 31 posts June 30 posts July 31 posts August 31 posts September 30 posts October 31 posts November 30 posts December 31 posts

2022

January 30 posts February 23 posts March 15 posts April 19 posts May 19 posts June 19 posts July 19 posts August 18 posts September 12 posts October 8 posts November 30 posts December 31 posts

2021

2020

January 31 posts February 29 posts March 31 posts April 30 posts May 31 posts June 30 posts July 31 posts August 31 posts September 30 posts October 31 posts November 30 posts December 31 posts

2019

January 31 posts February 12 posts March 17 posts April 12 posts May 12 posts June 10 posts July 7 posts August 5 posts September 6 posts October 14 posts November 30 posts December 17 posts

2018

January 8 posts February 4 posts March 6 posts April 14 posts May 5 posts June 6 posts July 6 posts August 13 posts September 14 posts October 8 posts November 30 posts December 4 posts

2017

January 12 posts February 9 posts March 9 posts April 4 posts May 10 posts June 5 posts July 5 posts August 6 posts September 3 posts October 4 posts November 30...

Death to px, long live ch

Related Articles

Incident with Github.com

(no title)

Scientists reverse brain aging, with a nasal spray

Malware infects Android-based automotive head unit firmware

NHS apologises and admits Palantir have access to identifiable patient data