for improved legibility
On many a website the contrast between text and background is reduced, most often for aesthetic reasons. In most cases reduced contrast doesn't affect legibility negatively, but one can easily find cases where text becomes harder to read because the contrast is on the low side.
It is also not difficult to find sites where contrast between text and background is so high that the text becomes hard to read. Most often that happens when very light and/or colored text is placed on very dark background, for instance with yellow text on black background.
This time I am focusing on ease of reading for us who have reasonable good vision, as despite good eyesight we may at times find reading text on websites a little hard and tiring. This site has not been among the worst in this respect, but nothing is perfect. Thus, I decided to try to improve things here on familiar ground.
I found that the high contrast between text and background on this site tended to make the text kind
of blurry. I also found that although reducing the contrast by lightening the text and/or darkening the background
did reduce the blur, it didn't really improve on readability.
At some point the contrast also became too low by any standard, and then I had a real accessibility problem on my hands.
font and/or increasing
font-size helped on readability, but only so much. I liked
my original choice of pretty standard
fonts, and we can zoom text and/or entire pages in our browsers. So,
I kept the
fonts, and balanced the overall
font-size at 100%.
Some other visual effect was clearly at play here, and I could not find a real solution to the blur effect that did not cause other problems … until I put my thinking cap on and reclassified the blur as “a glare” at the high-contrast text-edges.
To help on understanding, we have to remember that the human brain largely ignores even-colored surfaces in our view. Without edges our brains can not make much sense of what we look at. Thus, our brains make us look for, and amplify, anything that looks like an edge, and may even invent edges if there aren't any.
Our eyes superior ability to detect edges, really gives us an edge in a low-light, low contrast, natural environment. We can make out very faint outlines and contours, and thereby recognize objects quickly – a must for the survival of our race so far.
But, the same ability can cause problems in artificial environments with its less balanced light conditions. Computer screens are definitely artificial, and the light setting is often far from natural neither on the screens nor in the environments we use our screens in.
What we may see as improvements in light-conditions compared to the natural conditions we humans have evolved to cope with, tend to challenge our senses in ways we are not well adapted to. Light-emitting screens is definitely something our eyes and brains have had very few generations to adapt to, as nearly all surfaces in nature are light-absorbing.
As I neither can nor want to speed up human evolution towards living in a totally artificial environment, I constantly seek ways to adjust the artificial environment a little closer to the natural.
I prefer high contrast “black on white” for text areas on my screens, but do find looking at
such text tiring on the eyes after a while because the text tends to stand out too much and look “unstable”.
That's the nature of the beast: regular screens emit light, and, as mentioned, our eyes are very good at looking for and amplify contrast around edges. Too good when the contrast is very high to begin with and light is emitted around the edges.
High contrast text – letters and words – with softer edges, should theoretically make reading easier on the eye in much the same way as lowered contrast does, without actually lowering the contrast.
After some back and forth testing of available options implemented by others, I am now testing my own
solution. I use regular fonts – Georgia in this main column, keep the high
contrast between text and background, and add a hint of edge-softening in the form of
to reduce the effect of our eyes' tendency to look for and amplify – over-sharpen – edges.
how to soften text-edges
The use of
text-shadow to soften letter-edges, may sound both logical and strange. If the shadow can
be seen it obviously doesn't work, and if it can't be seen it shouldn't work.
But, right at the borderline between invisible and visible, something interesting happens: it cannot be seen, but it works.
Below are two test-paragraphs, with almost identical content. Font, color and background is the
same for both: all black (#000) on all white (#fff), but one has
text-shadow and the other doesn't.
I am pretty sure that you can see that there's a visual difference between the two paragraphs.
Test #1: compare this paragraph to the one below, and see if you notice any difference in contrast and legibility.
Test #2: compare this paragraph to the one above, and see if you notice any difference in contrast and legibility.
Test #1 above is normal – unsoftened – and the letter-edges stand out extremely well. Too well actually, resulting in a slight glare at/around the letter-edges. This edge-glare makes the individual letters appear thinner on my screens.
Test #2 (as most text on this page) is softened. The color-contrast in itself is the same as for test #1, but letter-edges do not stand out as sharply because our eyes don't detect the edges quite as accurate. Thus, the edge-glare is reduced and the individual letters appear to be ever so slightly fatter and smoother than the normal – unsoftened – text.
This is because our brains no longer “pull” the light background color into and over the letter-edges in
order to increase edge-contrast. Instead our brains draw in, and amplify, the almost invisible but darker
making us perceive the text as slightly larger and smoother than the actual
font is at the declared
testing … testing
For now this custom-made text softening technique is under test on-line all over this site. I have not yet made up my mind what is better: normal or softened, or what degree of softening that will do the trick without going overboard.
A few tests I have done over the last couple of weeks, indicate that the smoother text reduces the time it takes to
read through text-heavy articles, maybe by as much as 15% in some cases. That is quite a gain.
However, that is just me, on my screens, with my settings, so I can not conclude that “softer is better”.
The softer text-edges definitely makes reading easier on my eyes, as I experience no tiring even after hours spent
focusing on unlocking details and looking for typos in my own articles.
This is an interesting observation, as proof-reading of my own stuff is a big part of what I do in front of my screens – hate to let flaws and typos get by unnoticed.
leaving it there for now
Having played around with alternative ways to achieve the same text-softening, or smoothing, effect for a while, I think by now I have it well under control under the existing conditions on this site.
Ideally, slight modifications like this should go unnoticed by most end-users. The text should now look smooth and more like if it had been printed on paper rather than being displayed on a light-emitting screen, but otherwise it should look perfectly normal and be easy to read and easy on the eyes.
CSS properties / values are set in granite, I will let this text-softening concept
grow on me, and add, subtract, trim and adjust as I see fit.
(11.jun.2016) One year after introduction the text-softening technique still looks like an improvement, so I think I have a winner.
(15.aug.2016) Modified the text-softening ever so slightly for all text-carrying elements, after extended text-size stress-testing.
(01.aug.2022) Adjusted SSR text-shadow up slightly after testing on phone.
11.jun.2016 - increased standard text-shadow .01 … 1px 0 rgba(0,0,0,.06)
11.jun.2016 - revised and added text.
15.aug.2016 - modified standard text-shadow … 1px 0 .01rem rgba(0,0,0,.05)
01.aug.2022 - modified SSR text-shadow.
last rev: 01.aug.2022