Re: px vs em vs rem

Carney, Amy L (EED) composed on 2016-08-04 16:34 (UTC):

> I recently watched a web accessibility video on Lynda.com that sparked a
> conversation about which units of measurement in CSS create a more
> accessible page for people with disabilities, such as visually impaired
> users.

> What the tutorial taught was that fixed layout is the least accessible
> versus fluid layout which is the most accessible. But it didn't cite any
> sources, nor specify if that pertained to font-size, margin, padding,
> width, etc. And I'm having a hard time finding anything other than
> opinions online that specifically refer to this. Are px, ems, or rems
> really any better than one or the other when it comes to accessibility? Or
> have browser and assistive technology updates changed drastically enough
> that this isn't really an issue?

> I'm still breaking into web development, so any suggestions or references
> for best practice would be much appreciated. Thank you!

Consider these historical facts:

1-Most devices used for Internet access are personal, that is, they can be, 
and are expected to be, adjusted in various ways to suit the personal needs 
and/or preferences of the user. One of the more obvious items to customize is 
font sizes. How this is done, if and when it is done at all, is generally in 
one of two ways:

A-overall: this usually refers to the logical desktop, OS and app menu items, 
captions, titlebars, and so forth, traditionally referred to as "system" fonts.

B-app-specific: some apps incorporate a subset of the overall sizing 
configuration. Some ignore them altogether. Common examples are word 
processing documents and web pages, both of which usually embrace the user's 
overall configuration only for UI elements, while providing separate 
adjustments for content displayed in the their working viewports. Almost 
without exception, defaults for both UI and content differ. Depending on the 
environment, UI text size is typically somewhere between 67% and 83% of the 
nominal viewport default. Nominal (CSS) "size" is merely a height (in CSS, a 
length). Actual physical size is even less, because physical size depends on 
both height and width. Thus, the glyph's available pixel count is roughly 
1.5X the nominal size (1em tall by .5em wide), which turns that 67% into 
about 45%, and 83% into about 69%. See http://fm.no-ip.com/Auth/area76.html 
for a visual explanation.

2-As with Internet access devices, TVs, radios and media players provide 
personal controls intended and expected to be used by their users. Those most 
familiar are probably volume, balance and tone for audio, and brightness, 
contrast and tint for video.

3-Now imagine you're watching TV or listening to music and have adjusted 
volume exactly to your liking. Next, switch to a different TV program or put 
in a different DVD or CD. Immediately and automagically, the volume is 
modified significantly, typically lower than you want, possibly lower than 
you can hear at all, possibly louder enough to wake a napping baby or spouse. 
Consequently, you're forced to either readjust the volume control, put your 
face closer to your device, squint, lean back or employ some other kind of 
volume amplification or attenuation to counteract the spontaneous and 
arbitrary change from your personalized volume setting.

4-#3 describes the impact of stylists using px for sizing web page objects. 
Using px completely disregards user settings, user needs, and the user's 
hardware. You as stylist sizing in px can have absolutely no expectation that 
the physical sizes a user sees in her environment are anything like the 
physical sizes you see in yours. Even if you had that, you still have no 
basis to know that the sizes produced are suited to either the user's 
preferences, or her outright requirements. IOW, sizing in px abuses most 
users who do not share your particular preferences, needs, hardware or intent.

5-Both em and rem (and %, and keyword sizes) take into account user settings. 
That embracing at least in theory makes them all superior to px from a user 
point of view. As a practical matter most web pages that use em, rem, % 
and/or keyword sizes also abuse users, though generally to a lesser degree. 
The abuse occurs because of all or a portion of a bogus but nearly universal 
set of assumptions about users and their web browsers:

A-Users don't know they can personalize font sizes in their browsers.

B-Default font size settings remain as the browser vendor shipped them.

C-Default font size settings shipped by browser vendors are too big.

Consequently, em, rem, % and/or keywords, or even px, are used in site CSS to 
decrement the user's default size (1rem) to some arbitrary fraction as the 
base text size applied to html, body and/or p in the web document's styles. 
Then even when px is applied to html, body and/or p, the relative sizes em, 
rem, % and/or keywords are used for element specific contextual adjustments 
to the altered base size. The results usually remain little or no better than 
if styled entirely in px: much, if not everything, is smaller than the user 
wants, or needs. Not unusually, the bulk of text on a web page turns out to 
be even smaller than the browser's UI text.

Used respectfully, meaning embracing user defaults by applying no CSS size to 
as a minimum html, body and p elements, em, rem, % and keywords can produce 
content that provides 100% of the perspectives and proportions the designer 
desires, while the user enjoys all those same perspectives and proportions in 
conjunction with the physical sizing that the user has preconfigured to be 
optimal. For the non-blind, so styled, better accessibility for the non-blind 
is seriously difficult to imagine.
-- 
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

  Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/

Received on Thursday, 4 August 2016 19:17:45 UTC