Why Fonts Look Crispier on iOS

I just finished revamping my personal site. Since I get paid to help clients secure their protocols, I figured my portfolio site and reports should look professional. It’s just like wearing a tuxedo when meeting a client, you know. After a lot of tweaking, I got it looking just right on my iMac and MacBook.

Then, I checked it on my iPhone and my heart sank a little. The font was completely different.

Here’s how it looked on my phone, notice how sharp and thin the text is:

Font rendered on my iPhone

And here’s how it looked on my Mac, which is what I wanted. The text is a bit thicker and smoother:

Font rendered on my Mac

It looked good on my Mac, but the crispy look on my iPhone was driving me crazy. I wanted the font to render the same way on both devices.

Different Font Rendering

After some digging, I found out this isn’t a bug. The problem is that macOS and iOS use different ways to smooth out fonts on screen.

macOS has a history of supporting all kinds of monitors, including non-retina ones. It often uses something called subpixel anti-aliasing. This technique uses the individual red, green, and blue subpixels on a screen to make text look smoother. It’s a clever trick that often makes fonts appear slightly thicker or heavier.

iOS, on the other hand, was built from the start for high-resolution (Retina) screens. It doesn’t need the subpixel trick. Instead, it uses grayscale anti-aliasing, which smooths fonts using shades of gray. This makes the text look sharper and thinner, what I was calling “crispy”.

Getting Consistent Fonts

So, how do you fix it? My first thought was to make iOS render fonts like macOS, since I liked that thicker style more. Turns out, you can’t.

The only way to get them to match is to make macOS render fonts the way iOS does.

I’m using Tailwind CSS for my site, and luckily, it has a simple utility class for this. All I had to do was add the antialiased class to my <body> tag.

HTML
<body class="antialiased">
    <!-- ... -->
</body>

This class applies the following CSS, which forces macOS to use the sharper, grayscale anti-aliasing, just like iOS:

CSS
.text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

With that one change, the font on my Mac now looks just as crisp as it does on my iPhone. While it wasn’t the style I originally preferred, having it consistent across all my devices feels much more polished and professional. It’s a small detail, but it’s the kind of thing that matters.

Tags meta , tailwind