Fluid typography in Elementor

Fully fluid typography in Elementor is easy-to-be-made using the CSS’ clamp() function. By going for that kind of solution you can simply forget about the breakpoints mess and instead focus on other page elements that require a responsive solution.
Typography in Elementor must be excluded from the old-fashioned way of making it responsive! More modern approaches rely on plain CSS, one of which is presented in this video tutorial. Enjoy the outstanding CSS feature named the clamp()!

-------------------------------------------------- EXTRAS!

************************************
* OoohBoi Ele Posts Slider add-on *
************************************

A perfect slider for the Posts widget!

This is not just another Elementor widget but rather a natural extension to the Posts widget itself. It works with any post type including WooCommerce products.

******************************

If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!

——- OoohBoi Steroids for Elementor plugin page:

——- One-on-One Elementor training via Zoom: send an email to oooh(dot)boi29(at)gmail(dot)com with the subject “One on one Elementor request”

——- Visit my Shop for more cool stuff:

——- Buy me a coffee:

-------------------------------------------------- CREDITS!

Music by:

[tigersharkdiver]

Awesome work and explanation as always! I saw Elementor added you to their official Add-Ons page finally. Great work.

[barbarossa]

A VERY underrated channel! The amount of value / content quality packed here exceeds by far that of many overhyped channels put together.
Thank you A LOT for all your help and contribution mate. Highly appreciated!

[mygicarskrsk]

We missed your videos! This is the best video hands down on clamp for elementor by far.!~

[tristanhood]

Oooh Boi....great work! I installed your add on this morning and instantly love it. The elementor guys should look closely. Awesome work and tutorials!

[sayedhridoy]

Love to learn from you. Please make Video regularly

[Rolldeep]

almost thought "we" lost you mate great seeing you back now wondering if you would upload the typography page (the one that your saying your working on) would really like to see that one live on site ( and to work with) and see how your setting are overall on the page and in elementor maybe it can be used as ("my") new "elementor site settings standart"

[imjeffp]

Just a note that in newer versions of Elementor, you can enter clamp() values for font sizes in the site settings, eliminating the need for the custom CSS code page.

[MattyPod]

Very interesting approach, i always struggle with font size as I'm not a designer.. Glad to see you back :D

[meisterleise]

Thank you so much for showing this! Especially how to find the emt code (elementor-kit-XX and --e-global…). Nevertheless I'd prefer to use the --e-global styles to define the h1 to h6 and not elementor-kit-12 h1 and so on, because in your solution the styles of my headlines were changing, when I changed the h-tags. If you use the --e-global styles instead, you can change the h-tags and the headlines won't change.
I also extended the css with @media queries to have a higher font-weight on small devices.

[rightpadding]

I actually posted about this on the Elementor group now has been answered by you!!

[thinhle]

Such an awesome tutorial. Thank you for the work!

[bySterling]

Always jazzed to see your awesome vids bro!

[LudovicCharlier]

Nice, thanks! Is fluid typography compatible with all browsers?

[csstricks]

I found it very interesting and informative and want to try it, can you tell what plugin are you using to add this custom CSS Code to the Website @4:36?

[toineenzo]

Amazing!! Great tutorial :)
But wouldn’t it be better to place the custom css inside the Elementor site settings custom css field?

[LuisHerrera-tpvb]

This is just great! Thanks so much as always, awesome video!

[marcuspresident]

I'm a bit confused about the "body" font, is that the same as the Paragraph in a widget? If I choose in a widget "global" font settings to "text" then it becomes the body font or / the Paragraph font?
And when you in the custom code set the body font in the clamp in the video is it like this then?: clamp(1rem, 0.9694rem + 0.1531vw, 1.1875rem);

[Mulator]

Thank you for this! quick question, why did you choose 2280px as the maximum viewport width in the generator? does it make a huge difference if you change it to the actual website width ie. 1220px....

[marcuspresident]

Is it possible to applicate this method on my web when it's already done. My question is if it will affect all of my ready made templates etc.

[TheB-LINEBikeParkChannel-trmq]

I don't see a place to add "Custom Fonts"