Front end component to make managing typography in HTML and CSS easier.

1. Install from NPM:

   npm i -D @brikcss/typography

2. Include file(s) in your app:

   • PostCSS: The main file in package.json resolves to ./src/typography.css. This must be used with PostCSS and must include postcss-font-magician, postcss-apply, and postcss-pxtorem.

   • Precompiled: Or you can include the precompiled version: ./dist/typography.min.css.

   • Custom build: To create your own custom typography styles, follow the example in ./src/typography.css.

Brikcss Typography follows Material Design's Typography to create the following font styles:

• overline
• caption
• button
• body2
• body
• subtitle2
• subtitle
• h6
• h5
• h4
• h3
• h2
• h1

A class is created for each font style. Each class is named as follows: .font__<font style name> (i.e., .font__body).

A "property set" is also created for each font style, which allows you to @apply a font style's properties inside your own CSS rules.

Example input:

.my-selector {
	@apply --font__title;
}

Output:

.my-selector {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 3rem;
	letter-spacing: 0.02em;
}

You can easily create your own custom font styles by following the example in the source typography.css. It uses postcss-apply to create property sets. Refer to their documentation for configuration and usage details.