react-native-typography

Pixel–perfect, native–looking typographic styles for React Native.

Why

Creating great Text Styles in React Native is not a simple task, it requires a lot of fiddling and some trial and error.

This library provides a good set of defaults and helpers that cover the majority of the cases you'll need, and make your code much simpler.

✨Bonus✨ They render great on both platforms 😄

Quick start

Add the dependency:

yarn add react-native-typography

Set the style in your component:

import { material } from 'react-native-typography'

<Text style={material.display1}>Hello Typography!</Text>

And it will render:

Example app

• Run the example app via Expo or check the code, all of the screenshots are taken directly from there!

Typography collections

We provide a series of predefined collections for you to start with that match the native design systems for iOS and Android.

You can use them directly wherever you would supply a textStyle. There's also the option of extending them to create your own styles.

Material Design

Includes all the styles defined in the Material Design Guidelines. Defines size, weight and color.

import { material } from 'react-native-typography'

Human Interface Guidelines

Defined in the Human Interface Guidelines. Defines size, weight and color.

import { human } from 'react-native-typography'

iOSUIKit

Extracted from the official Apple sketch file

These are the text styles that fall under the category of iOS UIKit, and are used to build the UI components of iOS Apps.

They build on top of the Human Interface styles, customizing some properties such as weight or letter spacing.

import { iOSUIKit } from 'react-native-typography'

Customization & Helpers

The collections provide every style in 2 different ways:

• As a StyleSheet: material.title
• As a plain object: material.titleObject

You can use the StyleSheet reference directly where you would supply a textStyle:

<Text style={material.title}>Title</Text>

Extending the styles

To extend the provided styles, you can spread the object and override some of its attributes:

const styles = StyleSheet.create({
  yellowTitle: {
    ...material.titleObject,
    color: iOSColors.yellow,
  },
});

<Text style={styles.yellowTitle}>Title</Text>

Another option would be to combine the provided StyleSheet with your own StyleSheet.

const styles = StyleSheet.create({
  yellow: {
    color: iOSColors.yellow,
  },
});

<Text style={[material.title, styles.yellow]}>Title</Text>

Weights

A font weight in React Native is sometimes formed by a pair of a fontFamily and a fontWeight... but not always! It depends on the typeface.

With these helpers, you can do this in a clean declarative way instead.

To combine them with a collection style (or your own styles) just spread them, as they are plain objects.

const styles = StyleSheet.create({
  lightTitle: {
    ...material.titleObject,
    ...systemWeights.light,
  },
});

<Text style={styles.lightTitle}>Title</Text>

System Weights

import { systemWeights } from 'react-native-typography'

The System weights can be used on both platforms! They render visually similar weights of the San Francisco/Roboto typefaces on each platform. Read more about cross-platform here.

This is the recommended way of customizing your weights unless you really need different visual styles for each platform.

They follow the San Francisco naming convention, as it has more steps, which makes it more future–proof.

San Francisco Weights

import { sanFranciscoWeights } from 'react-native-typography'

These weights are only functional on iOS, as they directly reference the native San Francisco typeface.

Roboto Weights

import { robotoWeights } from 'react-native-typography'

These weights are only functional on Android, as they directly reference the native Roboto typeface.

Colors

We also include the default text color hex values for each platform.

iOS

import { iOSColors } from 'react-native-typography'

const styles = StyleSheet.create({
  yellowTitle: {
    ...human.title3Object,
    color: iOSColors.yellow,
  },
});

<Text style={styles.yellowTitle}>Title</Text>

Material

import { materialColors } from 'react-native-typography'

const styles = StyleSheet.create({
  tertiaryTitle: {
    ...material.titleObject,
    color: materialColors.blackTertiary,
  },
});

<Text style={styles.tertiaryTitle}>Title</Text>

Spacing/Kerning

San Francisco

The San Francisco typeface on iOS defines its letter spacing via Kerning. This is not directly accepted by the React Native text style properties, they take letter-spacing instead.

To do the conversion you can use the sanFranciscoSpacing function, which receives the font size and gives you the appropriate letter spacing.

import { sanFranciscoSpacing } from 'react-native-typography'

const styles = StyleSheet.create({
  customSize: {
    ..., // some other props
    fontSize: 34,
    letterSpacing: sanFranciscoSpacing(34),
  },
});

This is already taken care of on the collections, but if you want to define your own sizes you can adjust the spacing with this helper.

Cross-platform

Quoting the Material Design Platform recommendations

The default typeface on iOS is San Francisco. Using this typeface is the easiest way to implement accessibility features like Dynamic Type. Using other typefaces may require making adjustments to get the same accessibility features.

This is the approach that we like to follow, and all the collections exported from this library render nicely on both platforms with their respective native typefaces, for that we use the System weight helper.

You can check the code of the example app where we included a couple of screens that follow this philosophy, this is how they render on both platforms:

F.A.Q.

But I don't wanna use the Material Design or Human Interface Guidelines! Is there any reason why I should use this library?

Absolutely! The helpers are very convenient to build your own text styles as they work around the quirks of working with text styles on React Native, even if you want to specify your own sizes and weights, check them out!

The Roboto typeface line heights are not 100% accurate to the Material Styles definition

This is a known React Native issue.

There's a pull request ready that fixes this, this library will be updated to make the heights 100% accurate once it gets released.

Kerning is not 100% accurate on the Display sizes for the Material styles on Android

There's no support for letter spacing on React Native Android yet ☹️

Where is Roboto Black?

It's not available by default on React Native yet 😐

I use styled-components/glamorous/etc. Can I use react-native-typography?

Of course! There are some examples in the provided app, check the code!

Why is this library exporting StyleSheets and objects instead of components?

The idea behind it is that textStyles are the universally accepted way of styling text and this makes integration with many libraries easier.

The StyleSheet/Object pattern is already being used in the React Native codebase to provide an easy way to extend exported StyleSheets.

If you enjoy using already styles components for your text, you can easily define them and just supply the desired styles from the library! 🙂

Roadmap

• Support for dense and tall scripts on the Material collection.

Versioning

We use SemVer for versioning. For the versions available, see the tags in this repository.

Roadmap

• Type with Flow

Authors

• Hector Garcia - Initial work
• Alina Cvetkova - Design, UX and visual fine–tuning

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License.

Acknowledgments

• Kyle Hickinson - thanks for the work on the kerning values for San Francisco and for being so nice!
• Bartol Karuza & Chris Lewis - thanks for the work on fixing the line heights inconsistencies in React Native.

References

• https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
• https://material.io/guidelines/style/typography.html
• https://developer.apple.com/design/resources/
• https://facebook.github.io/react-native/docs/text.html#style
• https://medium.com/@knoland/typography-in-react-native-f09c43b5b435
• https://developer.apple.com/videos/play/wwdc2015/804/
• https://medium.com/react-native-training/list-of-available-react-native-fonts-ed78b48bd45e
• https://developer.apple.com/documentation/uikit/uifontdescriptor/font_weights
• https://v1.designcode.io/iosdesign-guidelines
• http://devsign.co/notes/tracking-and-character-spacing
• https://www.raizlabs.com/dev/2015/08/advanced-ios-typography/
• https://medium.com/@sauvik_dolui/handling-fonts-in-ios-development-a-simpler-way-32d360cdc1b6
• https://readymag.com/arzamas/132908/6/