About Accessible font sizes

Browsers provide a way for a user to change the default text size. They almost all default to 16px. This is the default size of a CSS rem unit. So, unless a user has changed it, 1rem = 16px. It is supposed to be a readable size for the user. Because users differ in what they find readable (inc. on different devices), it's configurable as a browser setting.

In an ideal world, the majority of text should therefore be 1rem (or larger), ensuring that the bulk of text is an accessible size for all users to read comfortably.

However this makes things harder for designers: they no longer have full control over the font size. Sadly, many theme designers have decided to throw this accessiblity feature under the bus carrying their pixel perfect designs by setting the rem size (achieved by CSS like html { font-size: 14px; }). This happens in far too many themes, and also in libraries (hello Bootstrap 3). The following excuses are then used:

  • It's ok because I also set body { font-size: 16px; } so the text is back to the original size.

    No, it's not ok because 16px is not accessible for everyone.

  • Yeah, but users can press zoom/Ctrl-Scoll to make the page bigger.

    They can do that and it scales everything; 1px is no longer 1px. A 300px wide element that has a 99.9% chance of fitting on any device, suddenly gets bigger and may not fit on the screen. Just because they need the text bigger doesn't mean they have a bigger screen. Also, why make the user who needs this have to do something special to get your site to be accessible?

Civi, when running as a plugin in a CMS (so, most of the instances), adds CSS to a page that the CMS creates. This means Civi is affected not only by the user's preferences (good) but also by the CMS theme's dictate via an html { font-size } rule. If Civi itself adds such a rule, to try to take control over the sizing, then it may upset the sizing of the CMS theme if Civi's CSS rule takes precidence.

Therefore:

  1. Civi should not set the rem size
  2. Civi should not set a px font-size
  3. Civi should be able to work in the real world where the CMS theme has rudely set the rem size. In this case, Civi should fall back to 16px as a typically accessible font size.

In this situation, with 1rem = 10px, and a font-size rule on body set to 14px, the CMS text sizes are set absolutely (even if they're set by rem, since that is now an absolute value). Text is no longer accessible since it's fixed. Civi's font sizes based off rem sizes now look too small.

Note that Bootstrap 3 does not itself use rems at all, just em.

For Civi to present ok and accessibly we can offer a hack to re-set the html and body font sizes to 100%.

Generally works ok, unless the theme that is based on BS3 itself uses rem sizes - in which case these will be too large now, e.g. ➌. But most BS3 native sizings are in px like ➋ which are unaffected by the hack.

WordPress and Joomla3 admin users may have gotten used to its smaller font, where 1rem = 13px. It's not accessible, but it's so close and perhaps they consider that there's no big paragraphs of text to read so that's ok. It's not though!

For Civi to present ok in this theme's environment we can either just suck it up: if a zillion WordPress users aren't complaining...

Or we could insist that we care and force the whole page to use the browser's set size:

So now Civi is nice and accessible, but WordPress/Joomla's UI (where not based on fixed px sizes) will be enlarged, and users may be enraged.

Fixing font-size to 16px on a .civi container does not help toward the goal of supporting browser default font size, but may be more accessible than the CMS' default.

However it also means we have to fix the px sizes on any other elements, like buttons, which might use the rem unit. This is unsatisfactory.

We have thought of two ways around this connundrum:

  1. Using SASS to make it easy: produce two sets of CSS, a default accessible one, and one where all the lengths are scaled by the rem size of the CMS theme. This keeps the CSS light for browsers/users.
  2. Using CSS custom properties (aka variables): but this means every length becomes an expression, e.g. font-size: calc(var(--oneRem)*1.2)

CMS themes that fix the rem size to 16px don't make for an accessible site, as explained above, but it's more likely to be. In this situation we can either just work with the given size, or use the 100% hack...

...but this messes up the CMS sizes (or at least, the ones that use rems/ems to specify their sizes.)

CMS heading

➊ Normal paragraph in the CMS.

➋ CMS Paragraph with font-size: 12px.

➌ CMS Paragraph with font-size: 1.6rem.

Heading in Civi

Paragraph in Civi goes here.