softening text

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.

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 reclassified 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 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 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 – 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 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 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 smartphone screens.

sincerely georg; sign

Hageland 24.jun.2015
last rev: 27.sep.2023

side notes.

just a hint

Too much of anything tends to ruin the result, and so also here. Choice of colors (shades) used for the edge-softening plays a role, but more so it is the low opacity that does the trick.

I do not think anyone would like this much “softness” to text on their sites, although opacity is only about 12% for edge-softening on this paragraph. Combined with a slight increase in letter-space it is easy on my eyes though.

This paragraph with an edge-softening opacity of 10%, may work fine on most screens.

So, if the edge-softening becomes visibly blurry, it is most likely beyond the point of being usable – unless you're a real “softy” that is.

not all fonts and sizes

Softening all text neither makes sense, nor will it work well. It is the main text that needs a little edge-softening, as that's the one we most want to read with ease.

I add edge-softening to all paragraphs and a few other text carrying elements, but leave smaller text, and elements that are not used very often, out of the equation.
This makes the exceptions stand out a little more than they would otherwise do, and if I one day choose to soften these elements too I most likely will choose a different degree of edge-softening for them.

A class for turning on softening on elements that aren't given the treatment by default, and another class to turn softening off, completes the styling.

hints of color

I use colors sparingly on this site – especially for text. But, of course, colors are there to be utilized, so I have no strict rules for their use apart from that I see no point in overusing colors.

Below I have used all-black text (#000), and have added just a hint of color to those edges.

This is what a hint of red around the edges look like.

This is what a hint of green around the edges look like.

This is what a hint of blue around the edges look like.

This is what a hint of yellow around the edges look like.

These edge-colors will show up different on different screens, but a slight difference in what color they are given should be visible to all with reasonably well-adjusted screens and somewhat normal color vision.
I can distinguish those hints of color quite well. The yellow isn't having much of an effect on color as such, but – as expected – it sharpens those text-edges on my screens.

Colors alone should not be used to differentiate content, so I see no problems here. I don't think I will use colors this way all that often though.

hints of darkness

By blurring out the background around the edges of each letter with an almost invisible hint of darkness close to that of the letters themselves, we do not perceive those edges as sharp anymore. As a result the letters seems to have gone up a small step in font-weight, and are easier to look at and read.

Below are two paragraphs with white text on white background, that show how low opacity the text-shadow for smoothing out edges on black text, really has.
You need good eyes and a well-adjusted screen in order to make out the text-shadow on the upper of the two paragraphs. For comparison: the lower paragraph has no text-shadow.

Can you read this?

When you click or tap on the white area above, the text will turn black so you can see the effect text-shadow has.

actual css…

The softening effect can be achieved in (at least) three ways. What works best depends on the actual use of colors for text and background in each case.

1: the background-color can be “lowered” and blurred out:

p {text-shadow:
   0 0 1px #d6d6d6;
}

2: the text color can be blurred out at low opacity:

p {text-shadow: 
   0 0 1px rgba(0,0,0,.15);
}

3: the text color can be shaded in at very low opacity on all sides:

p {text-shadow: 
   0 -1px .01rem rgba(0,0,0,.05),
   -1px 0 .01rem rgba(0,0,0,.05), 
   1px 0 .01rem rgba(0,0,0,.06), 
   0 1px .01rem rgba(0,0,0,.06);
}

And that's really all there is to it.

For the record: I use alternative 3 on this site for now, mainly because it works well almost regardless of background.
(01.aug.2022) For SSR (Small Screen Rendering) I have increased the text-shadow effect on all four sides (alt 3) as a test, and tuned the other text-shadow variants a little.

p {text-shadow: 
   0 -1px .01rem rgba(0,0,0,.07),
   -1px 0 .01rem rgba(0,0,0,.07), 
   1px 0 .01rem rgba(0,0,0,.07), 
   0 1px .01rem rgba(0,0,0,.07);
}

existing solutions

Some browsers and/or operating systems have some forms of “edge-softening” in place, at least as options. The ones I have looked into vary in implementation and success, and some of them work so bad that they are better turned off.

The problem with solutions built into software and OSes, is that they often are some kind of “all or nothing” solutions based on how the implementors view the problem, and rarely ever can they be adjusted to suit the individual end-user.

my solution

The solution I have introduced here on my own site, is easy to adjust and add variations of for various foreground / background conditions set by the design as a whole. Although I can hardly improve things to perfection for every single end-user, with a bit of care I can at least avoid making things worse for anyone.

As my solution does not add specific bits (half- or quarter-pixels) to smoothen text, it is less of a text-smoothening technique and more of a brain-trick. The human brain redefines text-edges as it draws on the fuzzy information provided by the faint text-shadow overlaying the background. As such it can be discussed back and forth ad nauseum how and why it works, and even if it works at all.

As with all techniques used in web design, it can be used, overused, underused and misused. It is all up to the individual designer / developer – it is after all just another tool in our toolboxes.

browser addition

End-users can of course add their own text-smoothing variants in user-stylesheets, and apply as they see fit.
I don't know how many end-users who are capable of utilizing user-stylesheets to their advantage, but at least it's an option.

Note: additional info… Tests in browsers:
1: browsers on Gecko and Trident rendering engines seem to make text-shadow slightly more opaque than browsers on Webkit do. The difference is only about .01 for rgba opacity though.
Same “slightly more opaque” observations for MS Edge classic.