Typography
The typography system s designed for clarity, scalability, and balance. It includes a flexible set of styles for headings, body text, and labels — optimized for readability across devices and screen sizes. With consistent type scales and responsive behavior, your content stays accessible, structured, and visually aligned throughout the entire site.
Overview
Roi uses a clean and modular typography system to ensure your content is easy to read and visually consistent. With predefined text styles for headings, paragraphs, labels, and more, it helps you maintain a clear hierarchy across all pages and screen sizes—making your design look polished and professional by default.
Typeface
The template uses 2 main fonts, one mostly for headings, Poppins, and the other for body text, Inter. This gives you more flexibility when implementing your visual hierarchy.
Aa
Poppins · Headings
Aa
Inter · Body Text
Responsive Sizing
The template uses Framer's responsive sizing options, defining a pixel based text size for each breakpoint, making it easier to handle text size on different devices.
Desktop
Tablet
Mobile
Once those base sizes are defined, we don't use pixels anymore to define text sizes, but Rems, which are a relative unit derived of the responsive sizing variables. For instance, on desktop, a text size of 1 rem will result in a 20px text, 18px on tablet and 16px on mobile.
Text Styles
In the assets styles panel, the text folder contains many prebuilt typography styles, from H1 to H6. There should be enough variations in there to get you started, before you need to make your own.
While Roi provides many text styling options, ranging from all types of headings to several paragraph and body text options, it remains impossible to cover every option that could be used in the design, because there are simply too many.
Summary
The Typography system offers a scalable, balanced set of styles for headings, body text, and labels. Designed for clarity and readability across devices, it ensures consistent hierarchy and visual harmony—helping you deliver accessible, polished content on any screen size.