Skip to content
Habitus Design

Typography

Family Inter (--font-sans). Tailwind type steps used by the adapter, and the Figma type scale they were derived from.

Type steps

  • text-xsBuild better habits
  • text-smBuild better habits
  • text-baseBuild better habits
  • text-lgBuild better habits
  • text-xlBuild better habits
  • text-2xlBuild better habits
  • text-3xlBuild better habits
  • text-4xlBuild better habits
  • text-5xlBuild better habits
  • text-6xlBuild better habits

Figma type scale

  • 85px / 400 no Tailwind step (display) · used 1×
  • 60px / 700 text-6xl · used 5×
  • 60px / 500 text-6xl · used 1×
  • 36px / 700 text-4xl · used 2×
  • 36px / 500 text-4xl · used 1×
  • 30px / 700 text-3xl · used 2×
  • 24px / 600 text-2xl · used 2×
  • 22px / 400 no Tailwind step (display) · used 1×
  • 20px / 300 text-xl · used 6×
  • 20px / 500 text-xl · used 4×
  • 20px / 600 text-xl · used 3×
  • 18px / 400 text-lg · used 7×
  • 16px / 400 text-base · used 34×
  • 16px / 600 text-base · used 8×
  • 16px / 700 text-base · used 4×
  • 14px / 400 text-sm · used 3×