Loading…
19
Pro tip: if your text looks fuzzy on a retina screen, check .5px borders before you blame the font
I spent about 3 hours last Tuesday chasing a blurry text problem on our checkout page and it turned out to be one dumb border rule. Every card had a 1px border, but on the 2x screen the browser was splitting that pixel across two, so the whole card looked soft and the text inside it looked fuzzy too. I kept swapping fonts and messing with font smoothing, which did nothing. My coworker in Phoenix looked at my screen share for like 10 seconds and said "that's a half pixel, not a font issue." I switched the border to a box-shadow of 0 0 1px and boom, crisp. People keep blaming the font or the anti-aliasing when it's really fractional pixels piling up. Has anyone else fixed a fuzzy text bug with a shadow trick, or do you all just use 2px borders and move on?
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.