blurry text?

[frogmoji]

i've noticed that the text goes blurry in places, and i'm not sure how to fix it. i don't think it's a problem with my coding, as it happens even with very basic text boxes. has anyone found a fix for this?

[spencerflem]

I've just gone through the same thing. This happens when the text does not start exactly at a pixel offset. Be careful about using center and padding in any unit other than pixels

[juanigaray]

@frogmoji Hi! Was spencerflem's answer useful? Do you think it would have been useful to have this problem documented?

[909oce]

was a fix for this ever found? i use pixel padding but it still happens, sometimes it randomly goes from normal to blurry mid sentence.

[spencerflem]

was a fix for this ever found? i use pixel padding but it still happens, sometimes it randomly goes from normal to blurry mid sentence.

By chance are you viewing on a screen with the display scale set to > 100%? That's the other thing I've found that reliably causes blur, but its more hassle to compensate for

[909oce]

was a fix for this ever found? i use pixel padding but it still happens, sometimes it randomly goes from normal to blurry mid sentence.

By chance are you viewing on a screen with the display scale set to > 100%? That's the other thing I've found that reliably causes blur, but its more hassle to compensate for

No it's set to 100%. The slight workaround I'm using is adding margins on text where its blurry between 0.1px and 0.5px. It ever so slightly shifts stuff into focus.

[Petally]

This is to do with subpixel rendering of the font. Usually, subpixel rendering makes fonts look better, however, in pixel fonts it makes the font look way worse. I've found a hacky workaround. Apply this css rule to any text you have:

contain: paint;

This will make the font render in whole-pixel numbers... However, any descendants of the element with this rule will not be painted outside the element's boundaries.