I’m building a React Native app. Using the same style { fontSize: 13 } the text looks noticeably larger on a Samsung S25 Ultra than on an iPhone 12. I expect the visual size to look the same across devices (like Spotify does), but by default the font appears to scale up on larger screens ( i don't mean the accessibility font scaling of the phone ).
Actual behavior
fontSize: 13 on iPhone 12 → visually normal.
fontSize: 13 on S25 Ultra → visually larger.
On some devices (e.g. Galaxy M12) width/height numbers don’t match perceived size, so scaling by Dimensions alone is inconsistent.
Desired behavior Text with the same logical size (13) should appear visually consistent across devices (same perceived size), regardless of device pixel density or screen dimensions.
What I tried
Scaling based on Dimensions.get('window').width/height (results inconsistent — e.g. Galaxy M12 looks larger than iPhone but reports smaller width/height).
Attempted other heuristics but wasn’t sure which approach is correct or minimal.
Minimal reproducible example:
// App.js
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
export default function App() {
return (
fontSize: 13 (expected same on all phones)
window: {Math.round(width)} x {Math.round(height)}
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
small: { fontSize: 13 }, // visually larger on S25 Ultra
note: { marginTop: 16, fontSize: 12, color: '#666' },
});
Reproduction steps
Run the same JS bundle on an iPhone 12 (Expo or device build).
Run the same JS bundle on a Samsung S25 Ultra.
Compare the perceived size of the first Text line.
Question What is a minimal, reliable way in React Native to make the visual font size consistent across different Android/iOS phones? (I’m fine with a single-line helper / tiny function to normalize font sizes.) Please include the shortest reproducible code snippet for the recommended approach.