Fonts.js

import {Dimensions} from 'react-native'
const {width, height} = Dimensions.get('window')

const calculateFontSizeForAScreenSizePercentage = (percentage) => {
  return Math.sqrt((width * width) + (height * height)) * (percentage / 100)
}

const baseUnit = calculateFontSizeForAScreenSizePercentage(2.5)

const em = (value) => {
  return baseUnit * value
}

const type = {
  base: 'Avenir-Book',
  bold: 'Avenir-Black',
  emphasis: 'HelveticaNeue-Italic'
}

const size = {
  h1: em(1.75),
  h2: em(1.65),
  h3: em(1.55),
  h4: em(1.45),
  h5: em(1.25),
  h6: em(1.15),
  input: em(1.05),
  regular: em(1),
  medium: em(1),
  small: em(0.85),
  tiny: em(0.75)
}

const style = {
  h1: {
    fontFamily: type.base,
    fontSize: size.h1
  },
  h2: {
    fontFamily: type.base,
    fontSize: size.h2
  },
  h3: {
    fontFamily: type.base,
    fontSize: size.h3
  },
  h4: {
    fontFamily: type.base,
    fontSize: size.h4
  },
  h5: {
    fontFamily: type.base,
    fontSize: size.h5
  },
  h6: {
    fontFamily: type.base,
    fontSize: size.h6
  },
  normal: {
    fontFamily: type.base,
    fontSize: size.regular
  },
  description: {
    fontFamily: type.base,
    fontSize: size.medium
  }
}

export default {
  type,
  size,
  style
}