Font Sizes (relatively) differs between desktop and mobile (tablet) devices

[TomFreudenberg]

What version of Tailwind CSS are you using?

v4 latest

What build tool (or framework if it abstracts the build tool) are you using?

postcss latest, Next.js 15. latest

What version of Node.js are you using?

v20.0.0

What browser are you using?

For example: Chrome, Safari, Firefox (Desktop) Chrome on Huawei mobile P30 Pro

Describe your issue

When looking at the output, I see some slightly differences in text sizes (font-size) when viewing the page on a desktop browser or mobile browser.

DESKTOP Screenshot

MOBILE Screenshot

OVERLAYED

If you check the overlayed screenshots, you can see, that on mobile device the content in size "text-base" is a tick bigger than on desktop device. That looks like the content on desktop is a bit too small.

---

Any suggestion how to deal that?

Is it just to change the font-size of text-base on non mobile devices? What CSS var would be best to set for only desktop changes?

[thecrypticace]

This sounds like either the system font is different on the mobile device or the user agent font size is not 16px.

On idea would be to set the html font size explicitly in pixels (to 16px) instead of 100% which is the default in browsers.

[rozsazoltan]

+1, the only upside of rem-based sizing could trick Tom on a device where, for some reason, the default font size is set larger than usual - typically among people over 40, as near vision tends to decline. This is actually the expected behavior.

https://play.tailwindcss.com/K0NjTOLCfl

[TomFreudenberg]

@thecrypticace @rozsazoltan Thanks for your suggestion!

I had a plugin prior for tailwindcss@3 but after migrating to tw@4 this was not working anymore.

So I had to set the default font-size manually - that was the missing part.

Thanks guys