In order to keep your website responsive and accessible for your viewers, it is better not to use pixels for your font size. In order to make everything easier for you, I decided to give you the best practises when it comes to site width, padding, and font sizes.
H1 (52px → 34px)
clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem)
Line-height: 1.1
H2 (42px → 29px)
clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem)
Line-height: 1.15
H3 (34px → 24px)
clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem)
Line-height: 1.2
H4 (26px → 24px)
clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem)
Line-height: 1.25
H5 (21px → 18px)
clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem)
Line-height: 1.3
H6 (18px → 16px)
clamp(1rem, 0.98rem + 0.2vw, 1.125rem)
Line-height: 1.35
Body
clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
Line-height: 1.8
Related: Learn more about WordPress
Thank you, Ferdy sir
You’re welcome, Nayan! ???? Happy learning!
You’re welcome, Nayan! ???? Happy learning!
Dag Ferdy.
zeer interessante tutorial die ik met aandacht volg. Nav de rem instellingen heb ik een vraag, of eigenlijk twee:
– klopt het dat je voor laptop, tablet en mobiel de waarden afzonderlijk moet invoegen?
– betekent dit rem principe ook dat je een H1 titel niet meer handmatig hoeft te verkleinen indien deze op je mobiel te groot is, en dat dit automatisch wordt aangepast?
hoop dat je de tijd vind om hier een antwoord op te geven.
Hoi Martin! Goede vragen ???? Met clamp() stel je de waarden één keer in – je hoeft inderdaad geen aparte waarden in te voeren voor laptop, tablet en mobiel. Clamp() regelt dat automatisch. En ja, een H1 die te groot is op mobiel wordt automatisch kleiner als je clamp() correct instelt via de globale typografie. Geen handmatige aanpassingen meer nodig! ????
Hoi Martin! Goede vragen ???? Met clamp() stel je de waarden één keer in – je hoeft geen aparte waarden in te voeren voor laptop, tablet en mobiel. En ja, een H1 die te groot is op mobiel wordt automatisch kleiner. Geen handmatige aanpassingen meer nodig! ????
Dag Ferdy,
denk dat ik iets langer had moeten kijken naar je video. Het werd nog uitgelegd…… LOL
Maar wel en andere vraag: ik werk nu nog met EP #3+. Ook daar kan ik rem gebruiken. heeft dat hetzelfde effect als in versie 4?
vr groet Martin
Ha, geen zorgen Martin! ???? Rem werkt prima in Elementor – je kunt de waarden handmatig invoeren in px of rem. Clamp() als CSS-functie werkt ook in Elementor maar moet je dan via custom CSS toevoegen. In Divi 5 is dat ingebouwd in de interface. Succes ermee!
Ha, geen zorgen Martin! ???? Rem werkt prima in Elementor – je kunt de waarden handmatig invoeren. Clamp() als CSS-functie werkt ook, maar moet je via custom CSS toevoegen. In Divi 5 is dat ingebouwd in de interface. Succes ermee!
Thanks — you’re helping me work through the small issues I usually get stuck on
Happy to help, Mark! ???? That’s exactly what these tutorials are for. Keep at it!
Happy to help, Mark! ???? That’s exactly what these tutorials are for. Keep at it!
I’m currently learning Elementor because I’m planning to change my theme soon, and this guide came at the perfect time.
Thanks for sharing such useful insights.
Perfect timing indeed! ???? Good luck with the theme switch – Elementor is a great choice. Hope the tutorial helps you get set up smoothly!
Hoi Ferdy,
Bedankt voor deze timesaver. Ik had me er nog niet in verdiept.
Groet,
Jos
Graag gedaan Jos! Ja, het is echt een tijdsbesparing zodra je er eenmaal gewend aan bent. Veel succes met al je websites! ????
Thanks for providing this. Great information that I think can make my life easier.
You’re welcome Glenn! Hope it makes your life easier on every website you build from now on ????
You’re welcome Glenn! Hope it makes your life easier on every website you build from now on ????
Hoi Ferdey
Intersante en goede uitleg. Ik heb er althans veel van bijgeleerd als recente divi gebruiker.
Wat er wel mis is gegaan en ik ben daar achter gekomen is dat je de waarden van H3 en H4 hebt geschreven met een komma ertussen, dat moet een punt zijn anders neemt Divi de waarde niet aan.
Nog vele groeten en ik kijk al uit naar de volgende video’s
Ha, goed gevangen Paul! Je hebt helemaal gelijk – bij CSS-waarden moet een punt gebruikt worden als decimaalteken, geen komma. Bedankt voor het delen, dat helpt zeker andere kijkers! ???? Groetjes!
Ha, goed gevangen Paul! Je hebt helemaal gelijk – bij CSS-waarden moet een punt als decimaalteken, geen komma. Bedankt voor het delen, dat helpt zeker andere kijkers! ???? Groetjes!
Loving your tutorials Ferdy – you’re the best!. But can you tell me what the font is that you are using for the body text here?
Thanks Jenny! ???? The body font I use is Inter – clean, modern, and very readable. You can grab it for free on Google Fonts. Hope that helps!
Thanks Jenny! The body font I use is Inter – clean, modern and very readable. You can grab it free on Google Fonts. Hope that helps!
Hi,
Just going through your Divi 5 tutorial. Really good stuff for someone who is wanting to make the jump from Divi 4.
I have always used clamp but in a different way and found a complicated method (that works) using calc to determine the middle sizing value.
Yours looks to be a much simpler version. How do you calculate the middle value?
Also does this work for all devices or do you need to add H1, H2, etc variables for mobiles and tablets?
Many thanks
Great questions, Neil! For the middle value in clamp() I use a viewport-relative value like 3vw – it scales smoothly between the min and max. And the beauty of clamp() is that it adapts automatically to every screen size, so you don’t need separate values for desktop, tablet, or mobile. Set it once and it just works! ????
Great questions, Neil! For the middle value in clamp() I use a viewport-relative value like 3vw – it scales smoothly between min and max. And the beauty of clamp() is that it adapts automatically to every screen size, so no separate values needed for desktop, tablet, or mobile. Set it once and it just works! ????
Thank you to share your knowledge and advise. Apreciate your effort and time dedicated to teach. Currently I am developing my website and I will show you the results as soon as I finish . Thank you again.
That’s so nice to hear! I love seeing people take action. Can’t wait to see what you build – feel free to share when it’s ready! ????
Ferdy, you make tutorials very simple and highly useful. Keep it it up. I would like to get in touch if you don’t mind reaching out.
Thank you Daniel! What do you want to talk about?
Hi Ferdy, thank you so much for your tutorials; I really appreciate them!
I do like to ask first; is it okay to copy and paste information, like the recommended font sizes to sites I use?
Thank you.