const typography = {
    fontFamily: [
        'Inter',
        'sans-serif',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"'
    ].join(','),
    h1: {
        fontSize: '4.5rem',
        lineHeight: '5.625rem',
        letterSpacing: '-1.44px'
    },
    h2: {
        fontSize: '3.75rem',
        lineHeight: '4.5rem',
        letterSpacing: '-1.44px'
    },
    h3: {
        fontSize: '3rem',
        lineHeight: '3.75rem',
        letterSpacing: '-1.44px'
    },
    h4: {
        fontSize: '2.25rem',
        lineHeight: '2.75rem',
        letterSpacing: '-1.44px'
    },
    h5: { fontSize: '1.875rem', lineHeight: '2.235rem' },
    h6: {
        fontSize: '1.5rem',
        lineHeight: '2rem'
    },
    subtitle1: {
        fontSize: '1.25rem',
        lineHeight: '1.875rem'
    },
    subtitle2: {
        fontSize: '1.125rem',
        lineHeight: '1.75rem'
    },
    body1: {
        fontSize: '1rem',
        lineHeight: '1.5rem'
    },
    body2: {
        fontSize: '0.875rem',
        lineHeight: '1.25rem'
    },
    button: {},
    caption: {
        fontSize: '0.75rem',
        lineHeight: '1.125rem'
    },
    overline: {
        fontSize: '0.5rem',
        lineHeight: '0.875rem'
    }
}

export default typography
