README
@artifak/typography
The main purpose of the Artifak typography is to help your generate typography components according to your needs. You can also view the docs at Artifak Typography.
Installation
Yarn
yarn add @artifak/typography
NPM
npm install @artifak/typography
Usage
createTypography
Generates your typography components.
import { createTypographyComponents, fontWeight } from 'artifak';
import { theme } from '../theme';
const base = {
styles: {
color: theme.colors.text,
fontFamily: theme.fontFamily.arial
}
};
const components = {
H1: {
fontSize: [48, 96],
margin: '0 0 0.25em',
lineHeight: 1.15,
as: 'h1'
},
H2: {
fontSize: [37, 39, 41, 43],
lineHeight: 1.45,
as: 'h2'
},
H3: {
fontSize: [27, 28, 30, 32],
lineHeight: 1.45,
as: 'h3'
},
H4: {
fontSize: [18, 20, 22, 24],
lineHeight: 1.45,
as: 'h4'
},
H5: {
fontSize: [16, 17, 19, 21],
lineHeight: 1.45,
as: 'h5'
},
H6: {
fontSize: [16, 17, 19, 21],
lineHeight: 1.45,
as: 'h6'
}
};
export const { H1, H2, H3, H4, H5, H6 } = createTypography<
typeof components,
typeof theme
>(base, components);
Other than helping you generate new typography components, it also contains other utility functions as well to help you in styling.
fontWeight
A constant of font weights for use. An example usage is as per below:
import { fontWeight } from 'artifak';
import styled from 'styled-components';
export const theme = styled.p`
font-size: 16px;
font-weight: ${fontWeight.BOLD};
`;