I've noticed that line-height rendering varies quite a bit between different browsers, which often leads to pixel discrepancies. I usually advise my clients that achieving pixel perfection across all browsers is nearly impossible. Do you think this advice still holds true? How do you approach this issue?
5 Answers
I’ve never really noticed much of a line-height issue myself. It's probably not something that affects most users greatly. But yeah, your advice about pixel perfection not being feasible still makes sense to me.
It's important to note that line-height is actually a unitless value. Browsers may render it differently, but using unitless values often yields better consistency across the board. Check out resources like MDN for more details!
If you can provide specific examples of the problems you’re facing, others might offer useful solutions. Remember, with CSS, there are more font metrics available now, like the "lh" unit, which could help in some situations.
Honestly, I typically just ignore line-height issues unless they’re really noticeable. But button padding? Now that’s a real headache!
Chasing pixel perfection rarely makes sense because users won't view the site at the exact resolution of your designs. Plus, even design tools like Figma can have differences in rendering. It’s more crucial that your site is consistent rather than a perfect visual match to the original designs.
I see your point, but in discussions with designers, every pixel counts, especially with grid designs. Saying it doesn't make sense often doesn't help. Technical details about browser rendering could be a better way to address concerns.