Implementing Adaptive Font Ratios

In this lesson, you will learn how to maintain visual harmony across different screen sizes by scaling typography proportionally to the size of its parent container.

The Problem with Static Text

In standard React Native development, we often set font sizes as static integers (e.g., fontSize: 16). However, a 16px font looks vastly different on a small smartwatch compared to a large tablet. Simply using Dimensions for global scaling often ignores the specific needs of nested components. Instead, we use Adaptive Font Ratios, where the font size is derived from a parent container's layout dimensions.

Calculating Ratios via Layout Events

The cleanest way to implement this is by using the onLayout prop. This allows a component to "know" its own width, which we can then use to calculate a font size that stays relative to that space.

const AdaptiveText = ({ children }) => {
  const [containerWidth, setContainerWidth] = useState(0);

  // We define a base ratio, e.g., 5% of the container width
  const fontSize = containerWidth * 0.05;

  return (
    <View onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
      <Text style={{ fontSize }}>{children}</Text>
    </View>
  );
};

Why Hierarchy Matters

By calculating the font size based on the specific View the text lives in, your UI becomes "content-aware." If you move this AdaptiveText component from a sidebar (narrow) to a main content area (wide), the font will automatically expand or shrink to fit its new context without you having to manually define breakpoints or media queries.

This creates a hierarchical rhythm where titles, body text, and labels all maintain their proportional "weight" regardless of how much screen real estate they are granted. When designing these ratios, it is helpful to establish a "scale factor"—a constant multiplier that keeps your typography consistent across the app, ensuring that while the size changes, the aesthetic balance remains identical.

Key Takeaway: Rather than relying on global screen dimensions, calculate font sizes locally using the container's layout width to ensure typography scales gracefully within its specific context.