softening text

for improved legibility

On many a website the contrast between text and back­ground 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 back­ground 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 back­ground 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 acces­si­bility problem on my hands.

Changing 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 reclas­sified the blur as “a glare” at the high-contrast text-edges.

problem: edge-detection

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 fontsGeorgia in this main column, keep the high contrast between text and back­ground, and add a hint of edge-softening in the form of text-shadow 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 – unsoft­ened – 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 text-shadow, making us perceive the text as slightly larger and smoother than the actual font is at the declared font-weight.

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.

As no 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 intro­duction the text-softening tech­nique still looks like an improve­ment, 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 smart­phone screens.

sincerely  georg; sign

Hageland 24.jun.2015
last rev: 27.sep.2023 advice upgrade advice upgrade navigation