Skip to content
Styled Typography
Styled Typography
Typograpy components for react and styled-components

styled-typography is a small set of components using styled-components, to better manage typographic styles within your app. The API was born out of years of managing large single page applications and design systems.

It’s flexible to be used however you need and to be customized further, but simple enough to have a small API. Additionally, care has been taken to ensure accessibility when adding it to your apps.

Getting started
import React from "react";
import { ThemeProvider } from "styled-components";
import { Heading, Text, Link } from "styled-typography";

export const App = ({ children }) => (
	<ThemeProvider theme={{}}>
		<Heading>Welcome to my app!</Heading>
		<Heading level={2} displayLevel={3}>
			Do some pretty cool things
		</Heading>
		<Text>
			To get started,
			{" "}<Link href="/sign-up">create an account</Link>{" "}
			via email or your social network login.
		</Text>
	</ThemeProvider>
);

Still interested? Read the docs to learn more!