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!
classNamewhen you’re already using
styled-componentsfeels 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
Overall, yes, you could do this with
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
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
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
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!