That’s a good question! I wrote this for a few different reasons, any of which you may not agree with. As with everything, this is opinionated!

• Using className when you’re already using styled-components feels like an anti-pattern
• I wanted a consistent API between all typographic elements
• I wanted a better API for differentiating between semantic hierarchy and visual hierarchy
• As design systems grow, so do one-off components. I needed typography components I could compose as needed without creating many abstractions
• I was inspired by react-native-web, but wanted something that fit in with styled-components

Overall, yes, you could do this with h#, p, span, and a tags. In the end, having a single reusable API that fits in with my existing styling framework and composition style made the most sense to me. And after tweaking this API over several years, it still does!

The main difference is that react-typography, and typography.js both are meant to setup typographic styling at the root level (i.e. at the body element). They don’t provide components to use throughout the app.

The main issue I have with this approach is that it’s not very JSX-like. To customize each instance of p, h#, span, etc, you must override each or create your own components. This is ok, but also time consuming.

styled-typography takes a different approach, by providing components that feel like react and have an API that allows you to customize each one as needed with props rather than a className or style prop.

Please use whichever you prefer! I personally prefer the API and components used in styled-typography, which is why I created it, but everyone’s different!