search

jdan / 98.css

A design system for building faithful recreations of old UIs
https://jdan.github.io/98.css
MIT License
9k stars 296 forks source link

blurry text? #184

Open frogmoji opened 10 months ago

frogmoji commented 10 months ago

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? blurry text

spencerflem commented 9 months ago

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 commented 8 months ago

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

909oce commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 1 week ago

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.