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
1pxdoesn't necessarily equal one physical device pixel. On HD displays, it may span multiple physical pixels. Similarly,1cmin 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:16pxlooks 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.
10 thoughts on “Death to px, long live ch!”
in my experience, relative CSS measures are pretty much always more useful than absolute measures like px. nice piece.
@Edent Just don’t be like me and continually confuse yourself and wonder why your `padding: 0.75en` has no effect…
| Reply to original comment on mastodon.social
Rather than ex for height, consider the line height unit: lh. Probably superior in most cases.
| Reply to original comment on bsky.app
Death to px, long live ch | Hacker News
| Reply to original comment
@Edent I love the `ch` unit, but a while back @paulhebert shared some side effects to be aware of when combining it with web fonts: https://cloudfour.com/thinks/watch-out-for-layout-shifts-with-ch-units/
(Not an issue if you’re using system fonts!)
Watch Out for Layout Shifts with ‘ch’ Units
| Reply to original comment on social.lol
I find the lh unit - equal to the computed value of line-height - to be very useful for padding and margins. In combination with ch, lh is my go to method for making things look “right”.
@Edent
I've been working with vh lately instead of px, so the webpage and fonts scale based on the screen size.
| Reply to original comment on mastodon.social
Be careful when using
vhorvw. Make sure to test the page on different aspect ratios. Some (bad) pages end up optimized for landscape and look terriblenin portrait, and vice-versa.@Edent
TIL pixels are a social construct
| Reply to original comment on mastodon.acm.org
Falafel
They are part of the class struggle
More comments on Mastodon.