Browser Defaults Are Too Big?

Browser text size defaults are "too big". We know this because vitually every web designer asked will tell you so, either by words, or by deeds. We also know because web sites that don't make their text smaller than the browser defaults are so rare. Because this is virtually universal, it must be true.

I'm routinely amazed how many professed accessibility experts fail to understand, and implement on their own web pages, the most elementary component of web site accessibility to sighted visitors: legible text. Most sites I've been to that purport to understand and/or evangelize accessibility themselves make their main content either 80% or less of the visitor's default, or disregard the defaults entirely by sizing in px or pt. You cannot be making people struggle to read reduced size or low contrast text and call it accessible. Quite simply, to be legible, text needs enough contrast, and enough size. With regard to accessibility, everything else is secondary.

That the defaults are too big is an assertion with its genesis in the mid '90's, when the resolution default was 640x480, 800x600 was common, and 1024x768 or more was rare. In those conditions, when the Windows® 96 DPI default was conceived and applied to screens of as low as 50 DPI, making the 12pt default up to nearly 100% bigger than 12pt print, the defaults were indeed usually too big, and quite ugly, due to the pixelation and jaggies of low resolution.

This is no longer the case well over 10 years later. Years ago already 1024x768 became a new standard that still applies to a large proportion of older 13"-14" laptops no larger than the typical CRTs of 640x480 days. 640x480 is now all but history; 800x600 is fast becoming history; 1280x800, used on WXGA laptops as small as 11.1", is on a fast track to overtake 1024x768 as a newer standard base; and "high" resolution of 1440px to 2560px wide and more is now and the future.

Laptops have been outselling desktops for several years now. Most have 1024px or 1280px wide diagonal screen "sizes" of 15.4" or less, while more expensive widescreen high resolution models go up to about 18" and either 1440px, 1680px or 1920px wide. The higher resolution models are typically set by the vendors prior to sale to 120 DPI "large fonts" to bring object sizes back up to a usable level, and keep physical sizes somewhat in line with the most common desktop combinations.

Take a study of this DPI table, focusing on the most common sizes and resolutions, and you should see that the actual size of a nominal 12pt screen font today with the standard 96 DPI setting usually won't be far off from the size of 12pt print any more. Study that table some more and you should realize the myriad possible combinations of resolution and display size mean there's random liklihood that some particular px size or adjustment from the default a designer chooses will wind up the same physical size on any visitor's system as on his own.

Actually, as designers typically use larger displays than average, while sticking with the most popular resolutions to maintain the illusion of seeing what typical users see, more likely than not most are seeing significantly larger px than most of the world. It's small wonder with their detail-oriented look at everything onscreen they think the standard defaults are too big.

Windows® still defaults to 96 DPI, and often that is actually close to accurate now, not infrequently erring in the other direction, making the IE 12pt default pretty much what most users prefer on average. This table shows 96 can now be pretty close, including going undersize. Laptops are now often configured reasonably at 120 DPI by their vendors. This means the IE 12pt default is likely closer to what users want than what any arbitrary CSS adjustment a designer applies can hope to achieve.

No designer can actually know what size any particular visitor's default is, so to make a design accessible he must make sure his design doesn't depend on some particular size default. Instead, it needs to work well whether it happens to be 11px, 3cm, medium, largest, smaller, 24pt or anything else that fits reasonably in the viewport of whatever reasonably sized visual device the user happens to be using.

Design should not and need not trump accessibility or usability. Users on average want 12pt text, but designers on average want 56% size 9pt text. That may OK for print, but not for the web. Most web browser makers give users the means to set a preferred size precisely so that their viewing experience can be made optimal, a feature with no parallel in the world of print.

Designers who want 44% smaller, or 12px, and set that in their site styles instead of their own browsers either don't really know what they're doing, or don't care about accessibility or usability, or think design is more important than accessibility or usability. Whichever designer motive actually applies, the rude and tyrannical impact on visitors is the same. Users shouldn't need to adjust for it on a per page basis. That's what they rightly expect their computers to be doing for them automatically. Sites can and should be designed to accomodate this expectation, automatically. They can be so designed, if only designers would so choose. Truly astute web leaders like Accessify.com, the W3C, and WebAIM already do it.

This is not at all to say no designer should ever size text. As in print, contextual text sizing on the web is a valid means of communicating. But text sizing by the designer should be restrained by the designer himself to applying user default based contextual (relative) sizing only. It means sizing only things that need it, like headings, sidebars, breadcrumbs, footers, etc. It means leaving normal content paragraph text, the basic or dominant size, at the user default, the size predetermined by the user to be best suited to his needs. In the overwhelming majority of cases, if the designer thinks his design requires a smaller base size text, then either his own browser default is wrong, or he's not designing for most of the web's users.

This means designers need to know the consequences of what they're doing, and understand why and for whom they're doing what they're doing. There's no good reason they can't style to suit every personal whim if they're only designing to please themselves and/or other web designers, few of whom are normal web users. Designers certainly have the power to produce pixel perfection for the particular environment they're using to do their designing.

However, the environment of the visitor is an infinitely variable unknown. The web is an inherently fluid and adaptable medium. The designer can't know the display size, resolution, viewport size, visual actuity, viewing distance, or other user local factors that determine what works acceptably for each user. A designer designing for the majority of the planet's users needs to embrace the fluidity that is the essence of the web. This requires building adaptable pages, pages that can and do work for the visitor regardless of his local variables.

Adaptability is accessibility. Small text is for legalese. Big type is good business. Browser makers give users adjustable defaults precisely so users can determine in advance of reaching a page how big is big, how small is small, and what size they prefer.

What the absolute size default is that a user prefers is simply irrelevant in a good accessible web page design. It just happens to be that 12pt is what users most commonly prefer, and on average what they'll get from web pages with no text styles in today's environments. Size, brightness, and contrast are basics. If a designer can't get them right, there's little more he can do for most people, people who have no problem reading as long as text is at least the size they require. Poor legibility is the #1 web user complaint. Fully accessible pages do not produce that complaint.

As pt and px sizing is problematic for screen media, it seems necessary to reconcile the 12pt and 14pt sizes that most readers want into the sizes every competent web design best practices source recommends using. That doesn't actually matter, because by choosing medium as a base, or not explicitly setting any base size, designers are actually giving users 12pt or 14pt or whatever other size it is that users deem appropriate.

Designers claim a majority of the web users have the medium text setting and don't even know they can change it, Whether users know how to adjust their defaults and whether and/or how many do is simply irrelevant. Designers can't know that their style adjustment can improve anything except for their own particular viewing environment. Users are the only ones in a suitable position to make that determination for their own environments.

Here's why this typical 'body {font-size: 76%}' CSS rule makes text too small, even with line-height: 1.5, background-color: white, and color: black P text.

50 year old dad has typical senior eyes. He can read, though not as well as he used to. As much as possible he reads books in large print editions. He struggles to read the typically small 10pt or less print in most newspapers and magazines. He buys an honest 17" flat panel display to replace his purported 15" CRT, thinking that 3" actual difference is going to make everything bigger and easier on the eyes. He gets it home, and finds its instructions recommend using its native resolution for best results. That's 1280x1024, and he's astonished to find unstyled web page text is actually smaller than before.

What happened? It turns out that he needs at least 14pt type to read web pages comfortably. Due to the error of applying 96 DPI on a 14" CRT screen, which in fact is only 91 DPI on the median 1024x768 resolution he was using, his IE 12pt default was actually only slightly less than 14pt. Now with a smaller error applying 96 DPI to a larger but higher resolution screen that is in fact 94 DPI, the default 12pt is smaller instead of larger. The quality is better, but that doesn't make up the difference, so he manages to find the IE text resizer, and finds that the larger setting gives him the approximately 14pt size that works best for him, and many other senior adults.

screenshot Now he comes to a font-size: 75% page and finds his 14pt text turned into 10.5pt text. So, he goes and finds that IE text resizer widget again, and changes it to the largest available choice, and guess what, he gets approximately 12pt, and that's too small for him to read comfortably on his fancy new larger display. In the top window of this screenshot is what IE shows him. He doesn't know every browser he's never heard of can give him what the page should have given him in the first place, his approximately 14pt default, shown in the firefox window underneath.

So, it doesn't matter that a web author sizes in ems or keywords or % if he's usurping his visitor's decision what size works best for him with an arbitrary reduction from whatever that choice happens to be. It's rude and unwarranted. If the author thinks the text is too big on his page, then he needs to change his own browser default, and not mess with dad's. He's probably where the author will be in 20-30 years, and he won't like that tyranny any more than dad does.

A user's actual default size shouldn't matter to anyone except the user. So, a designer arbitrarily setting a size for normal paragraph content at 76% of whatever it happens to be serves no purposes other than completely barring some users, impeding other users, including people who have sampled the web and found it too difficult to continue with, and pleasing designers too daft to understand they can have their preferred size just as easily by suitably setting their own defaults, thus giving everyone a win.

Font Size Recommendation Sources
SourceAuthorRecommendation
Care With Font SizeW3CAvoid sizes less than 1em for text body
The Wrong Size FontsPoleyCSS medium (inferred)
In Search of the Perfect FontKulla-Mader11pt-14pt
How Should Text Be Presented Within a Website?BernardPreferred 12pt
So, What Size and Type of Font Should I Use on My Website?Bernard, MillsPreferred 12pt
Let Users Control Font SizeNeilsenMinimum 10pt
AccessibilityBunkerMinimum 10pt
Special Cases
Which Fonts Do Children Prefer to Read Online?Bernard, et alPreferred 14pt
Determining the Best Online Font for Older AdultsBernard, et alPreferred 14pt
Making Your Web Site Senior FriendlyNIA/NLM12pt-14pt
Designing for People with Partial SightArditi16pt-18pt

Linkback


Parent page
Valid HTML5!
Last Modified
2015/05/15
© Felix Miata
Felix's Home