Font Rendering in Safari

Browser Logos

There’s definitely a difference between Chrome and Safari due to Safari’s font rendering. In Safari text tends to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.

I was getting very frustrated earlier because of a menu bar that was wrapping in Safari and not in Chrome. The Safari window had to be 200px wider than the Chrome window for the menu not to wrap before switching to the mobile menu.

Making the menu font size .1em smaller fixed the problem. It doesn’t even really make sense mathematically, but it worked so I am not inclined to figure it out right now.

Thanks Stack Overflow!