Generate fluid typography classes and use the system in your next Elementor project!
| Class | Max Size (px) (Desktop) |
Min Size (px) (Mobile) |
Clamp Function (CSS) | Actions |
|---|---|---|---|---|
| Headline XXL | ||||
| Headline XL | ||||
| Headline L | ||||
| Headline M | ||||
| Headline S | ||||
| Headline XS | ||||
| Headline XXS (Body L + 2px) | ||||
| Body L | ||||
| Body M (Base) | ||||
| Body S | ||||
| Body XS | ||||
| Accent L | ||||
| Accent M (Base) | ||||
| Accent S | ||||
| Accent XS | ||||
| Label L (Sample as Body S) | ||||
| Label M | ||||
| Label S | ||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. – Body M
Go to your Elementor’s site settings
Make sure your fonts are fully flexible, responsible and in a proportion that makes you happy
You can start adding the font-size directly to Elementor Global Fonts
Open your website in a new browser tab (incognito/private recommended) and play with the window width to ensure that your new fluid typography system works