I’m working with design mockups created for iPhone 11 Pro with dimensions 375x812 pixels. When I try to implement the designs in my React Native app, the fontSize values don’t match what I see in the mockups, even when testing on the exact same device model.
For instance, when the design shows 14px font size, setting fontSize: 14 in my React Native styles produces text that’s noticeably different in size. I’ve tried various scaling multipliers but nothing seems to work - multiplying by 3 makes everything way too big.
After comparing screenshots of my running app against the original designs on the same iPhone, I noticed that text and other UI elements appear roughly 10% smaller in the actual app.
What’s the proper way to convert font sizes from design mockups to React Native fontSize values? Is there a standard conversion method I should be using?
I’ve hit this exact problem multiple times. It’s usually system font scaling settings screwing things up. Even on identical devices, users have different text size preferences in accessibility settings - and that changes how React Native renders fonts.
The other thing that got me was React Native’s text rendering works nothing like design tools. It uses the platform’s native renderer, which has its own font metrics and line spacing math.
Here’s what fixed it: I made a reference component with known font sizes, screenshotted it on the actual device, then measured those against my designs. Gave me device-specific multipliers that were way more accurate than any theoretical calculations.
Also check if your design tool is using actual system fonts vs custom font files.
This happens because React Native doesn’t use actual pixels - it uses density-independent pixels (dp). So fontSize: 14 doesn’t mean 14 physical pixels on your screen. Your iPhone 11 Pro has a 3x pixel ratio, meaning each logical pixel becomes 3 physical pixels. But don’t multiply your fontSize by this - React Native already handles the conversion internally. That 10% difference you’re seeing? It’s probably because your design software (Sketch, Figma, etc.) renders fonts differently than React Native does. They just don’t match up perfectly. Here’s what works for me: create a scaling function based on your target device size. Take your device’s logical width, divide it by your design’s base width, then use that scale factor for all your font sizes. Way more reliable than trying to get pixel-perfect matches.
Sounds like a viewport scaling issue. Your design tool’s probably assuming standard web viewport, but React Native uses device-specific scaling. Check if your mockup’s using @1x or @2x assets - iPhone 11 Pro needs @3x scaling. Also, see if you’ve got PixelRatio.get() anywhere in your styles - that’ll mess things up.
The issue is React Native handles font metrics differently than design software. Figma uses its own font engine with specific spacing calculations, but React Native uses the platform’s native text renderer - which has totally different baseline and cap height measurements. I solve this by creating a font size mapping table early in development. Pick 5-6 common sizes from your designs, implement them in React Native, then measure them precisely on your target device. Build a simple conversion function that accounts for the differences between your design tool and React Native’s rendering. That 10% difference you’re seeing is normal - it varies by font family and weight. Some fonts match design specs better than others. San Francisco (iOS system font) is more predictable than custom fonts in my experience.
Had the same issue coming from web dev. Figma uses CSS pixels for iPhone dimensions, but React Native renders them differently. Your iPhone 11 Pro shows 375x812 logically, but the text engines calculate baselines completely differently than design tools.
Here’s what fixed it for me: I set up a base font ratio right at the start. Grabbed a standard size like 16px from my designs, built it in React Native, then figured out what adjustment factor I needed. Usually landed between 0.9 to 1.1 depending on the font. Applied that ratio to everything.
That 10% smaller thing you’re seeing? Happens on pretty much every project. It’s not just a scaling problem - React Native measures text totally different from how design tools render it.