Skip to content

Instantly share code, notes, and snippets.

@knowbody
Created July 14, 2016 13:42
Show Gist options
  • Save knowbody/c5cdf26073b874eae86ba96e7cf3a540 to your computer and use it in GitHub Desktop.
Save knowbody/c5cdf26073b874eae86ba96e7cf3a540 to your computer and use it in GitHub Desktop.
React Native Font Weight Cheatsheet iOS
{ fontWeight: '100' }, // Thin
{ fontWeight: '200' }, // Ultra Light
{ fontWeight: '300' }, // Light
{ fontWeight: '400' }, // Regular
{ fontWeight: '500' }, // Medium
{ fontWeight: '600' }, // Semibold
{ fontWeight: '700' }, // Bold
{ fontWeight: '800' }, // Heavy
{ fontWeight: '900' }, // Black
@ApoorvTheTecHie
Copy link

Thanks mate, helped a lot.

@ArthurInTheShell
Copy link

It helps a lot! Thanks!

@tonypee
Copy link

tonypee commented Jun 22, 2018

export const fontWeights = {
  Thin: 100,
  UltraLight: 200,
  Light: 300,
  Regular: 400,
  Medium: 500,
  Semibold: 600,
  Bold: 700,
  Heavy: 800,
  Black: 900
};

@buechner
Copy link

@tonypee: for usage in StyleSheet i needed to change this to

export const fontWeight = {
    Thin: "100",
    UltraLight: "200",  
    Light: "300",
    Regular: "400",
    Medium: "500",
    Semibold: "600",
    Bold: "700",
    Heavy: "800",
    Black: "900"
};

@badarshahzad
Copy link

Sorry but 100 to 400 is not working and 500 is working like 'bold' property. Did you notice this thing?

@stantoncbradley
Copy link

You can use https://www.npmjs.com/package/react-native-cross-platform-text to consolidate iOS and Android font weights into the same API

@michaelVictoriaDev
Copy link

WOW thanks for this.

@buithanhquan1994
Copy link

Nice! Thanks so much

@Satur-nity
Copy link

@pataratanan
Copy link

Thank you very much legend!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment