Obra shadcn/ui docs

Typography

Note about type styles

typography.png Figure: the typographic styles we included

On purpose, we only provide you with the bare minimum of styles. We built it this way to that you can customise it to your liking.

We stopped where we stopped because the next steps highly depend on:

  • Your (custom) fonts
  • How far you want to go with type variables.
  • The need for using variable fonts (Figma supports them but not fully in variable systems)

Type styles tend to expand quickly if you are not careful. If we were to include type styles for Geist and all its variants, we’d easily have over 300 styles. The reality of a UI design project is that you use 10-20 styles. In the philosophy of this kit, we chose to ship an easily adjustable set of styles.