Background highlight on text span looks uneven (more bottom padding) on Mac vs Windows

Design help General
1

Here is my site Read-Only: Webflow - BTC ACADEMY
Hi everyone,

I’m running into a cross-platform styling issue. I have a text span in Webflow with a background color to highlight a single word. On Windows, the highlight looks perfectly centered, but on Mac the background always shows more padding at the bottom than at the top.

image
image1940×581 115 KB

image
image1920×788 79.7 KB

2

This usually comes from font rendering differences between Mac and Windows. Try setting a fixed line-height and adjusting the span’s padding-top/padding-bottom manually , I’ve had to do that for consistency across client builds. Sometimes switching the span to display: inline-block also evens it out.