px vs em vs rem

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

px vs em vs rem

Carney, Amy L (EED)

Hi, all,

 

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!

 

 

Amy Carney

Publications Specialist II

Alaska State Libraries, Archives, and Museums

907.465.1313

[hidden email]

 

Reply | Threaded
Open this post in threaded view
|

Re: px vs em vs rem

Felix Miata-2
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/

Reply | Threaded
Open this post in threaded view
|

Re: px vs em vs rem

Mike Elledge
Hi Amy--

Using relative sizing to style fonts (with em) and layouts (with %) enables users to adjust the size and shape of web pages to their preference, while maintaining the overall look of the page.

WCAG 2.0 Success Criteria 1.4.4 provides a good explanation of why using em for text is important (https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html), techniques for doing it, and descriptions of what isn't effective (Failures).

I hope this and Felix's explanation are helpful.

Mike


On Thursday, August 4, 2016 3:26 PM, Felix Miata <[hidden email]> wrote:


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/




Reply | Threaded
Open this post in threaded view
|

RE: px vs em vs rem

Jonathan Avila-2
In reply to this post by Carney, Amy L (EED)

Amy, to answer your question about percent versus em -- percent based containers will allow for fluid layouts which will assist in making the site responsive.   Ems are good for scaling but they don’t provide fluid layouts.   Many people with low vision find horizontal scrolling problematic.  Fluid layouts solve that issue and allow the text to become larger without requiring horizontal scrolling.

 

Jonathan

 

Jonathan Avila

Chief Accessibility Officer

SSB BART Group 

[hidden email]

703.637.8957 (Office)

 

Visit us online: Website | Twitter | Facebook | Linkedin | Blog

Check out our Digital Accessibility Webinars!

 

From: Carney, Amy L (EED) [mailto:[hidden email]]
Sent: Thursday, August 04, 2016 12:34 PM
To: [hidden email]
Subject: px vs em vs rem

 

Hi, all,

 

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!

 

 

Amy Carney

Publications Specialist II

Alaska State Libraries, Archives, and Museums

907.465.1313

[hidden email]