Text Rendering and Typography Scales

In this lesson, you will learn how to build a unified typography system to ensure your text looks consistent and legible across every device size.

The Problem with "Magic Numbers"

When building apps, it is tempting to hardcode font sizes directly into your components (like fontSize: 16). However, if you do this everywhere, updating your app’s visual style becomes a nightmare. More importantly, different devices have different pixel densities and screen sizes; a font size that looks perfect on a small phone might look tiny on a large tablet.

Defining a Typography Scale

Instead of choosing random sizes, we use a Typography Scale. This is a predefined set of font sizes, weights, and line heights that act as the "source of truth" for your entire app. By creating a central object for these values, you ensure that every Text component in your project remains visually balanced.

Implementing a Global Scale

You can store your typography settings in a separate file (e.g., theme.js) and import them into your components:

// theme.js
export const typography = {
  h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 },
  body: { fontSize: 16, fontWeight: 'normal', lineHeight: 24 },
  caption: { fontSize: 12, fontWeight: '300', lineHeight: 16 },
};

// YourComponent.js
import { typography } from './theme';

const MyText = () => (
  <Text style={typography.h1}>Welcome Back!</Text>
);

Why This Matters

By centralizing these styles, you gain two massive advantages:

1. Consistency: You no longer worry if a screen accidentally uses a 15px font instead of 16px.
2. Scalability: If you decide your app needs larger text for better accessibility, you only have to change one value in your theme.js file, and every screen in your app will update automatically.

Remember, React Native’s Text component inherits styles from its parents, so defining these scales globally allows you to create a harmonious visual hierarchy without repeating code.

Key Takeaway: Stop using arbitrary font sizes and start using a centralized typography scale to maintain visual consistency and simplify future design updates.