Flipping how we define typography in React Native

Usage no npm install needed!

<script type="module">
  import reactNativeCapsize from '';


React Native Capsize

Stable Release license

A port of Capsize for React Native

From Capsize's README

Capsize makes the sizing and layout of text as predictable as every other element on the screen.

Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.


yarn add react-native-capsize


npm install react-native-capsize


import capsize from 'react-native-capsize'

const fontMetrics = {
  capHeight: 1456,
  ascent: 1900,
  descent: -500,
  lineGap: 0,
  unitsPerEm: 2048,

const styles = capsize({
  capHeight: 48,
  lineGap: 24,

function App() {
  return <Text style={styles}>Hello</Text>

Where do I get the font metrics?

From Capsize's Documentation

This metadata is extracted from the metrics tables inside the font itself. You can use the Capsize website to find these by selecting a font and referencing JavaScript tab in step 3.

For more please visit Capsize's Documentation


To run the example project, follow these steps:

  • Clone the repo
  • Run these commands
cd example
yarn && yarn start