Typography
Typography component provides consistent text styling across the application. It supports multiple types (Landing, Dashboard, Pop-up, Profile Menu, etc.) and variants (Headline 1-4, Body 1/3/5, Title, Subtitle, etc.). Responsive styles for Mobile, Tablet, and Desktop are automatically applied through Tailwind classes.
Landing Typography
Typography styles for landing pages. All variants include responsive styles for Mobile, Tablet, and Desktop.
Headline 1
Desktop: 64px, Extra Bold, 110% line height, -1px letter spacing
Tablet: 64px, Extra Bold, 110% line height, -1px letter spacing
Mobile: 40px, Extra Bold, 110% line height, -1px letter spacing
Landing/Desktop/Headline 1, Landing/Tablet/Headline 1, Landing/Mobile/Headline 1
Headline 2
Desktop: 36px, Bold, 110% line height, -1px letter spacing
Tablet: 36px, Bold, 110% line height, -1px letter spacing
Mobile: 28px, Semi Bold, 110% line height, -1px letter spacing
Landing/Desktop/Headline 2, Landing/Tablet/Headline 2, Landing/Mobile/Headline 2
Headline 3
Desktop: 28px, Semi Bold, 120% line height, -1% letter spacing
Tablet: 28px, Semi Bold, 120% line height, 0px letter spacing
Mobile: 22px, Semi Bold, 110% line height, -1px letter spacing
Landing/Desktop/Headline 3, Landing/Tablet/Headline 3, Landing/Mobile/Headline 3
Headline 4
Desktop: 18px, Medium, 150% line height, 0px letter spacing
Tablet: 16px, Medium, 150% line height, 0px letter spacing
Mobile: 16px, Medium, 150% line height, 0px letter spacing
Landing/Desktop/Headline 4, Landing/Tablet/Headline 4, Landing/Mobile/Headline 4
Body 1
Desktop: 16px, Regular, 150% line height, 0px letter spacing
Tablet: 14px, Regular, 140% line height, 0px letter spacing
Mobile: 14px, Regular, 140% line height, 0px letter spacing
Landing/Desktop/Body 1, Landing/Tablet/Body 1, Landing/Mobile/Body 1
Body 3
Desktop: 14px, Regular, 140% line height, 0px letter spacing
Tablet: 14px, Regular, 140% line height, 0px letter spacing
Mobile: 14px, Regular, 140% line height, 0px letter spacing
Landing/Desktop/Body 3, Landing/Tablet/Body 3, Landing/Mobile/Body 3
Body 5
Desktop: 12px, Regular, 120% line height, 0px letter spacing
Tablet: 12px, Regular, 120% line height, 0px letter spacing
Mobile: 12px, Regular, 120% line height, 0px letter spacing
Landing/Desktop/Body 5, Landing/Tablet/Body 5, Landing/Mobile/Body 5
Dashboard Typography
Typography styles for dashboard interfaces.
Title
Desktop: 30px, Semi Bold, 120% line height, -2% letter spacing
Mobile: 22px, Semi Bold, 120% line height, -2% letter spacing
Desktop/Dashboard/Title
Subtitle
Desktop: 22px, Semi Bold, 120% line height, 0% letter spacing
Mobile: 18px, Semi Bold, 120% line height, 0% letter spacing
Desktop/Dashboard/Subtitle
Card Title
Desktop: 14px, Semi Bold, 120% line height, 0% letter spacing
Desktop/Dashboard/Card/Title
Card Body
Desktop: 14px, Regular, 140% line height, 0% letter spacing
Desktop/Dashboard/Card/Body
Pop-up Typography
Typography styles for pop-ups and modals.
Title L
Desktop: 22px, Semi Bold, 120% line height, -2% letter spacing
Desktop/Dashboard/Link/Popup/Title
Title
Desktop: 18px, Semi Bold, 120% line height, -2% letter spacing
Pop-up/Title
Body
Desktop: 14px, Regular, 140% line height, 0% letter spacing
Pop-up/Body
Caption
Desktop: 12px, Regular, 140% line height, 0% letter spacing
Pop-up/Caption
Profile Menu Typography
Typography styles for profile menu.
Title
Desktop: 16px, Bold, 120% line height, 0% letter spacing
Profile Menu/Title
Body
Desktop: 14px, Regular, 120% line height, 0% letter spacing
Profile Menu/Body
Usage Examples
Common use cases for Typography component.
Landing Page Example
Welcome to Our Platform
Build amazing products with our tools
Our platform provides everything you need to create, manage, and scale your business. Get started today and see the difference.
* Terms and conditions apply
Dashboard Card Example
Recent Activity
Your recent activity will appear here. This includes all actions you've taken in the last 30 days.
Last updated: 2 hours ago