Glare of white 100% backgrounds and how it affects fonts

jaimes
jaimes Posts: 24
edited November 12 in Font Technology
I noticed recently that the people at Tiro Typeworks use a very muted background (#e3e5e1) in their editable font samples.

And experimenting in my own website with muted off-white backgrounds, I noticed with surprise that the letters appeared darker with the muted background instead of 100% white.
I'm using #efede2 now in my sites and in my programming text editor, and I think they're much more readable.

I notice especially with serif fonts. For serif fonts, with muted background, the letterforms appear "fuller" if it makes sens. Sometimes the stems get a bit washed out over 100% white background.

I realize that this is probably highly machine dependent, and person dependent, but, I don't think it should be surprising, in retrospect:
I checked the Spiekermann book (3rd ed) and there's a page about font adjustments to compensate for light text on dark background, and especially when the light text is actually illuminated from behind.
And this is exactly the converse of computer screens, no?

Do other people notice this? Are there recommendations for screens? (I have found some web designer sites calling for off-white, but nothing formal). And, is there a technical name for this?
Tagged:

Best Answer

  • John Hudson
    John Hudson Posts: 3,574
    Answer ✓
    Erik Van Blokland explained this very well recently, in the context of signage lettering:
    When rays of light hit your cornea, and then your lens, through the soup of the vitreous body, and finally upsetting a photoreceptor in your retina, at every step the ray diffracts, it spreads a little. Only light does that. Darkness is the absence of light, it is created and noticed in your brain. It has no physical properties. So: light always gets bigger.

    Dark shapes on a light background? The light will eat them and they shrink. Light shapes on a dark background: they appear bigger.

    In FontLab, I set my background colour to a cream colour, emulating a nice warm paper.



Answers

  • Jacques Le Bailly
    Jacques Le Bailly Posts: 98
    I use a slightly off-white background in glyphs when designing type.
  • Kent Lew
    Kent Lew Posts: 1,027
    Mohawk Superfine, nice. 😉
  • Nick Shinn
    Nick Shinn Posts: 2,323
    I reduce the brightness of my screen.
  • jaimes
    jaimes Posts: 24
    Do you do it each time you read on white background? Otherwise, if you leave it set all the time, watching videos or photos on that screen must be a disappointment, no?
  • Nick Shinn
    Nick Shinn Posts: 2,323
    I leave it a little dim all the time. All non-255/255/255 colours are relative to that “white,” no matter its nominal brightness.
  • Ray Larabie
    Ray Larabie Posts: 1,473
    edited December 2
    Reverse issue: when testing closed caption fonts, I found that #FFFFFF white causes a dazzle effect, which harms legibility. I suggest to clients that they use a lower white value for television set embedded CCTV systems.

    Eyeballs are not camera lenses...they're spheres of murky goop.
  • jaimes
    jaimes Posts: 24
    Yes! Sometimes I have to read a page that implements dark mode as 100% white text on 0% black background.
    Just awful. You look away and the text is burned into your retinas for a few seconds.

    In my website and my text editors, I use "Everforest dark" theme to implement dark mode:

    - #d3c6aa  for text
    - #2d353b for background



  • Thomas Phinney
    Thomas Phinney Posts: 3,099
    John Hudson said:
    Erik Van Blokland explained this very well recently, in the context of signage lettering:
    When rays of light hit your cornea, and then your lens, through the soup of the vitreous body, and finally upsetting a photoreceptor in your retina, at every step the ray diffracts, it spreads a little. Only light does that. Darkness is the absence of light, it is created and noticed in your brain. It has no physical properties. So: light always gets bigger.

    Dark shapes on a light background? The light will eat them and they shrink. Light shapes on a dark background: they appear bigger.

    Just to clarify, something that I think was referred to in passing in the initial post... there is an additional effect that takes place at the imaging level, before anything even reaches your eye. That effect is that for printed ink, the colored ink spreads. So for text printed in ink, it gets heavier, but text printed in reverse, where the text is non-printed area and the ink is around it, the text strokes are thinned.

    Of course, for light-emitting devices such as screens, it is only the effect EvB described, which we are discussing here.

    (I know that most folks here are well aware of this phenomenon! Just adding it for completeness.)

Categories