#Fonts & typography

#Font stack

Bumbag Native uses the operating system's sans serif fonts as it's default font. This will be different for each OS.

#Adding custom fonts

To add a custom font to Bumbag Native, you will need to do the following:

  • Add the font to the React Native project
  • Add the font to the web project (optional)
  • Add the font to the theme

#1. Adding fonts to React Native

#Add the assets into your project

In order to add a custom font to React Native, you will need to first place your font assets (.ttf, .otf, or whatever) into your src/assets folder.

#Add/update your React Native config

You will then need to update your React Native config file to support the fonts folder.

Add the following to the react-native.config.js file:

module.exports = {
assets: ['./src/assets/fonts'],
};

After that, you will need to link the assets to your project:

npx react-native link

#2. Adding fonts to web

TODO

#3. Adding fonts to the theme

You can change the font families through the Bumbag Native theme:

import { Provider } from 'bumbag-native';
const theme = {
fonts: {
default: 'DopeSans',
heading: 'DopeSansSerif'
}
}
export default () => (
<Provider theme={theme}>
{/* your app... */}
</Provider>
)

#Font families

#Accessing font families

#With style props

I have the heading font family
Editable example

#With applyTheme

I have the heading font family
Editable example

#Font weights

Bumbag currently has three font weights: normal, semibold and bold. You can also add your own custom font weights in the theme config if you wish.

Normal text
Semibold text
Bold text
Editable example

#Accessing font weights

#With style props

Bold text
Editable example

#With applyTheme

I have bold text
Editable example

#Font sizes

Bumbag uses a scale from 100-900 for font sizes. We use a numeric scale, instead of a contextual scale (like small, medium, etc) to maximize flexibility so you can easily add sizes inbetween if you need.

200 (16px) is the base font size.

Text 100 - 12px
Text 150 - 14px
Text 200 - 16px (normal)
Text 300 - 20px
Text 400 - 24px
Text 500 - 32px
Text 600 - 40px
Text 700 - 48px
Text 800 - 60px
Text 900 - 72px
Editable example

#Accessing font sizes

#With style props

Text 300 - 20px
Editable example

#With applyTheme

import { Text, applyTheme } from 'bumbag';
const LargeText = applyTheme(Text, {
styles: {
base: {
fontSize: '400'
}
}
});
<LargeText>I am bold</LargeText>

#Theming

#Schema

const theme = {
fonts: {
default: string,
heading: string,
mono: string
},
fontWeights: {
normal: number,
semibold: number,
bold: number,
[key: string]: number
},
fontSizes: {
100: number,
150: number,
200: number,
300: number,
400: number,
500: number,
600: number,
700: number,
800: number,
900: number,
[key: string]: number
}
}

#Example

const theme = {
fonts: {
default: "Lato",
heading: "Merriweather"
},
fontWeights: {
normal: 300,
semibold: 400,
bold: 500,
bolder: 600
},
fontSizes: {
50: 0.5,
950: 5,
extraSmall: 0.25
}
}
On this page
Copyright © 2021 Jake Moxey