Skip to content

Commit 4e665f9

Browse files
matkladmatklad
committed
px vs rem
1 parent 6d308df commit 4e665f9

File tree

1 file changed

+137
-0
lines changed

1 file changed

+137
-0
lines changed

‎_posts/2022-11-05-accessibility-px-or-rem.adoc

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
= Accessibility: px or rem?
2+
3+
The genre of this post is: "`I am having opinions on something I am not an expert at, so hopefully the Internet would correct me`".
4+
5+
The specific question in question is:
6+
7+
> Should you use `px` or `rem` units in your CSS?
8+
9+
I am not a web developer, but I do have a blog where I write CSS myself, and I very much want to do the right thing.
10+
I was researching and agonizing over this question for years, as I wasn't able to find a conclusive argument one way or another.
11+
So I am writing one.
12+
13+
This isn't ideal, but I am lazy, so this post assumes that you already did the research and understand the mechanics of and the difference between `px`, `em`, and `rem`.
14+
And so, you position is probably:
15+
16+
> Of course `rem`, because that honors user's setting for the font-size, and so is more accessible, although ...
17+
18+
Although there are buts:
19+
20+
_But_ the default font-size is `16px`, and that's just too small.
21+
If you just roll with intended defaults, than the text will be painful to read even for folks with great vision!
22+
23+
_But_ default font-size of `x` pixels just doesn't make sense: the actual perceived font size very much depends on the font itself.
24+
At `16px`, some fonts will be small, some tiny, and some maybe even just about right.
25+
26+
_But_ the recommended way to _actually_ use rem boils down to setting a percentage font-size for the root element, such that `1rem` is not the intended "`font size of the root element`", but is equal to 1px (under default settings).
27+
Which, at this point, sounds like using pixels, just with more steps?
28+
After all, the modern browsers can zoom the pixels just fine?
29+
30+
So, yeah, lingering doubts...
31+
If you are like me, you painstakingly used ``rem``'s everywhere, and then ``html { font-size: 22px }`` because default is unusable, and percentage of default is stupidly ugly :-)
32+
33+
---
34+
35+
So lets settle the question then.
36+
37+
The practical data we want is what do the users actually do in practice?
38+
Do they zoom or do they change default font size?
39+
I have spent 10 minutes googling that, didn't find the answer.
40+
41+
After that, I decided to just check how it actually works.
42+
So, I opened browser's settings, cranked the font size to the max, and opened Google.
43+
44+
To be honest, that was the moment where the question was mentally settled for me.
45+
If Google's search page doesn't respect user-agent's default font-size, it's an indirect, but also very strong, evidence that that's not a meaningful thing to do.
46+
47+
The result of my ad-hoc survey:
48+
49+
++++
50+
<style>
51+
.two-col > .content { display: flex; flex-direction: row; }
52+
.two-col > .content > *:first-child { flex: 30%; }
53+
.two-col > .content > *:last-child { flex: 30%; }
54+
</style>
55+
++++
56+
57+
[.two-col]
58+
--
59+
.Don't care
60+
- Google
61+
- Lobsters
62+
- Hackernews
63+
- Substack
64+
- antirez.com
65+
- tonsky.me
66+
- New Reddit
67+
68+
.Embiggen
69+
- Wikipedia
70+
- Discourse
71+
- Old Reddit
72+
--
73+
74+
Google versus Wikipedia it is, eh?
75+
But this is actually quite informative: if you adjust your browser's default font-size, you are in an "`Alice in the Wonderland`" version of the web which alternates between too large and too small.
76+
77+
The next useful question is: what about mobile?
78+
After some testing and googling, it seems that changing browser's default font-size is just not possible on the iPhone?
79+
That the only option is page zoom?
80+
81+
Again, I don't actually have the data on whether users rely on zoom or on font size.
82+
But so far it looks like the user doesn't really have a choice?
83+
Only zoom seems to actually work in practice?
84+
85+
The final bit of evidence which completely settled the question in my mind comes from this post:
86+
87+
https://www.craigabbott.co.uk/blog/accessibility-and-font-sizes
88+
89+
It tells us that
90+
91+
> Using the wrong units of measurement in your Cascading Style Sheets (CSS) is a
92+
big barrier for many visually impaired users, and it can cause your website fail
93+
the Web Content Accessibility Guidelines (WCAG) 2.1 on
94+
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html[1.4.4 Resize text].
95+
96+
That WCAG document is really worth the read:
97+
98+
> The scaling of content is primarily a user agent responsibility. User agents
99+
that satisfy UAAG 1.0 Checkpoint 4.1 allow users to configure text scale. The
100+
author's responsibility is to create Web content that does not prevent the
101+
user agent from scaling the content effectively. Authors may satisfy this
102+
Success Criterion by verifying that content does not interfere with user agent
103+
support for resizing text, including text-based controls, or by providing direct
104+
support for resizing text or changing the layout. An example of direct support
105+
might be via server-side script that can be used to assign different style
106+
sheets.
107+
>
108+
> **The author cannot rely on the user agent to satisfy this Success Criterion
109+
for HTML content if users do not have access to a user agent with zoom support.
110+
For example, if they work in an environment that requires them to use IE 6.**
111+
>
112+
> If the author is using a technology whose user agents do not provide zoom
113+
support, the author is responsible to provide this type of functionality
114+
directly or to provide content that works with the type of functionality
115+
provided by the user agent. If the user agent doesn't provide zoom functionality
116+
but does let the user change the text size, the author is responsible for
117+
ensuring that the content remains usable when the text is resized.
118+
119+
My reading of the above text: it's on me, as an author, to ensure that my readers can scale the content using whatever method their user agent employs.
120+
If the UA can zoom, that's prefect, we are done.
121+
122+
If the reader's actual UA can't zoom, but it can change default font size (eg, IE 6), then I need to support that.
123+
124+
That's ... most reasonable I guess?
125+
Just make sure that the you actual users, in their actual use, can read stuff.
126+
And I am pretty sure my target audience doesn't use IE 6, which I don't support anyway.
127+
128+
**TL;DR** for the whole post:
129+
130+
Use pixels.
131+
The goal is not to check the "`I suffered pain to make my website accessible`" checkbox, the goal is to make the site accessible to real users.
132+
There's an explicit guideline about that.
133+
There's a strong evidence that, barring highly unusual circumstances, real users zoom, and pixels zoom just fine.
134+
135+
---
136+
137+
As a nice bonus, if you __don't__ use rem, you make browser's font size setting more useful, because it can control the scale of the browser's own chrome (which is fixed) independently from the scale of websites (which vary).

0 commit comments

Comments
 (0)