Home Reference Source

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,
};