src/styles/Typography.js
import {StyleSheet} from 'react-native';
/**
* Font and font size from iOS UI kit
* @type {Object}
*/
const iOSTypo = StyleSheet.create({
largeTitle: {
fontSize: 34,
lineHeight: 41,
},
title1: {
fontSize: 28,
lineHeight: 34,
},
title1Dark: {
fontSize: 28,
lineHeight: 34,
color: '#FFFFFF',
},
title2: {
fontSize: 22,
lineHeight: 28,
},
title2Dark: {
fontSize: 22,
lineHeight: 28,
color: '#FFFFFF',
},
title3: {
fontSize: 20,
lineHeight: 25,
},
title3Dark: {
fontSize: 20,
lineHeight: 24,
color: '#FFFFFF',
},
headline: {
fontSize: 17,
lineHeight: 20,
fontWeight: '600',
},
body: {
fontSize: 17,
lineHeight: 22,
},
});
/**
* Font and font size from iOS UI kit, xLarge
* @type {Object}
*/
const iOSxLargeTypo = StyleSheet.create({
largeTitle: {
fontSize: 36,
lineHeight: 43,
},
title1: {
fontSize: 30,
lineHeight: 37,
},
title2: {
fontSize: 24,
lineHeight: 30,
},
title3: {
fontSize: 22,
lineHeight: 28,
},
body: {
fontSize: 19,
lineHeight: 24,
},
headline: {
fontSize: 19,
lineHeight: 24,
fontWeight: '600',
},
});
/**
* iOS xxxLarge: diary details on free text, buttons
* @type {Object}
*/
const iOSxxxLargeTypo = StyleSheet.create({
largeTitle: {
fontSize: 40,
lineHeight: 48,
},
title1: {
fontSize: 34,
lineHeight: 41,
},
title2: {
fontSize: 28,
lineHeight: 34,
},
title3: {
fontSize: 26,
lineHeight: 32,
},
body: {
fontSize: 23,
lineHeight: 29,
},
headline: {
fontSize: 23,
lineHeight: 29,
fontWeight: '600',
},
callout: {
fontSize: 22,
lineHeight: 28,
},
subhead: {
fontSize: 21,
lineHeight: 26,
},
});
/**
* Non standard-iOS typography
* @type {Object}
*/
const typography = StyleSheet.create({
title1: {
fontSize: 40,
lineHeight: 42,
fontWeight: '700',
letterSpacing: 2,
textAlign: 'center',
textAlignVertical: 'center',
},
title2: {
// fontFamily: 'notoserif',
fontSize: 24,
lineHeight: 28,
fontWeight: '600',
},
headline: {
fontSize: 18,
lineHeight: 26,
fontWeight: '600',
},
body: {
fontSize: 17,
lineHeight: 22,
},
});
export {
iOSTypo,
iOSTypo as iOSTypography,
iOSxLargeTypo,
iOSxxxLargeTypo,
typography,
};