The Best Way to Setup Elementor Typography 

Wow, thanks! I've got a way to improve this method and am hoping to release a video in the very new future showing how. Stay tuned!

Happy to see this. I was confused too until a friend tipped me off to this approach.

Great! Please let me know how this works for you and if you find any improvements. I'm optimistic about this approach because it detaches the styling from reliance on the html tags, so the styles can be tag agnostic.

I'm glad this helped you!

Happy to see this helped. I really like the size based approach. XXS -> XXL Seems to hold up. I've also been using Body: SM, Body, Body: LG lately.

Thanks for the message, glad this helped! If you like the thinking behind how we setup typography, please subscribe because we're about to release some videos and tools which take this to another level and make containers a lot faster/more consistent to build with.

Wow, thank you! I've got a good one on a sneaky 12 column grid coming up. Stay tuned.

Stay tuned, I've got an update to this video along with a time-saving tool Hoping to release very soon.

Wow, thanks for this! Wait until you see what we are releasing for containers soon.

@KingGrizzly yes please, keep the videos coming :)

Ha! I'm going to show this comment to my wife! Just kidding, she knows I'm brilliant. 😉

Thanks Shawn. Better yet, I think it may be best to pull that. Will go take a look.

Hopefully this helps!

Let us know if you can think of ways to improve the approach!

@@KingGrizzly It could be better talking about spacing between lines in the text.

@@user-rz6ie8qn5l You are right! Lately, I've been placing CSS variables in for the font sizes and line heights and then using CSS to control the sizing/spacing across devices sizes. So, for example, instead of using a PX value for the line-height, use the pencil icon and put in a variable like: var(--line-height-xl) Then you can figure out some associated CSS in your theme or wherever you like to put your CSS. Here are some CSS variables I used on a recent project. /* Font sizes */ --kg_font-size-base-sm: clamp(0.95rem, 0.12vw + 0.92rem, 1.02rem); --kg_font-size-base: clamp(1rem, 0.22vw + 0.95rem, 1.13rem); --kg_font-size-base-lg: clamp(1.05rem, 0.33vw + 0.97rem, 1.24rem); --kg_font-size-xs: clamp(1.17rem, 0.41vw + 1.07rem, 1.41rem); --kg_font-size-sm: clamp(1.23rem, 0.67vw + 1.07rem, 1.62rem); --kg_font-size-md: clamp(1.29rem, 0.99vw + 1.06rem, 1.86rem); --kg_font-size-lg: clamp(1.36rem, 1.36vw + 1.03rem, 2.14rem); --kg_font-size-xl: clamp(1.42rem, 1.81vw + 0.99rem, 2.46rem); --kg_font-size-xxl: clamp(1.67rem, 2.6vw + 1.05rem, 3.16rem); --kg_font-size-xxxl: clamp(1.75rem, 3.28vw + 0.98rem, 3.63rem); /* Line heights */ --kg_line-height-base-sm: 1.8em; --kg_line-height-base: 1.8em; --kg_line-height-base-lg: 1.6em; --kg_line-height-xs: 1.4em; --kg_line-height-sm: 1.4em; --kg_line-height-md: 1.4em; --kg_line-height-lg: 1.3em; --kg_line-height-xl: 1.2em; --kg_line-height-xxl: 1.2em; --kg_line-height-xxxl: 1.2em; Probs time to make another video. 😄

@@KingGrizzly Thanks. I'll do some tests and get back to you. Don't forget to make the content, it's missing on RU-vid. LOL.

@@KingGrizzly The sizes were good. Just a curiosity. Is the font base 16px or 10px?

Great question. I believe headings within a text widget like "post content" should inherit the "Theme Style > Typography" sizes from the H1-H6 tags. Generally, this works just fine but I'll sometimes override with some manual CSS. For example, in a single post template. CSS clamp sizes makes this less arduous.

Thanks! I'll do my best to make that updated approach soon. This one is still really solid!

@@KingGrizzly It really is solid! I change it all of my settings to this way and it is really help me to get figure how work typography and global fonts. Thanks again... (By the way, I'll wait for the new video.)

Thanks for your thoughtful reply. I will look for your new video when it comes out. It is an intriguing approach.@@Ruinyourknees

Replying with the correct account... Spot on! I've spent an inordinate amount of time contemplating similar tradeoffs - so please share if you solve 100%! Since the 4 global styles don't necessarily have a consistent application across Elementor widgets, I've decided to ignore them and rely on consistent manual application of size-based or component based font styles. We tend to pre-build containers and common widgets into a style guide clients can simply copy and paste from. In this way, they don't have to figure out how to map the widgets to global styles. Lately, I'll set a custom field variable (the pencil) for the font size and line height. For example: var(--kg_font-size-xxl) I then write CSS clamp styles to manage the sizing across a viewport range (e.g. 360px-1200px, or whatever). In fact, I'm about to release a new video showing the method alongside a CSS generator I built with ChatGPT. It spits out something like the following and allows the removal/addition of styles: :root { --kg_font-size-body: clamp(1rem, 0.9357rem + 0.2857vw, 1.15rem); --kg_line-height-body: 1.8em; --kg_font-size-body-sm: clamp(0.95rem, 0.9286rem + 0.0952vw, 1rem); --kg_line-height-body-sm: 1.8em; --kg_font-size-body-lg: clamp(1.05rem, 0.9643rem + 0.381vw, 1.25rem); --kg_line-height-body-lg: 1.6em; --kg_font-size-xxxl: clamp(1.75rem, 0.9357rem + 3.619vw, 3.65rem); --kg_line-height-xxxl: 1.2em; --kg_font-size-xxl: clamp(1.65rem, 1.0071rem + 2.8571vw, 3.15rem); --kg_line-height-xxl: 1.2em; --kg_font-size-xl: clamp(1.4rem, 0.95rem + 2vw, 2.45rem); --kg_line-height-xl: 1.2em; --kg_font-size-lg: clamp(1.4rem, 0.95rem + 2vw, 2.45rem); --kg_line-height-lg: 1.3em; --kg_font-size-md: clamp(1.3rem, 1.0643rem + 1.0476vw, 1.85rem); --kg_line-height-md: 1.4em; --kg_font-size-sm: clamp(1.25rem, 1.1rem + 0.6667vw, 1.6rem); --kg_line-height-sm: 1.4em; --kg_font-size-xs: clamp(1.15rem, 1.0429rem + 0.4762vw, 1.4rem); --kg_line-height-xs: 1.4em; --kg_font-size-button: calc(1rem); --kg_line-height-button: clamp(1.25em, 1.25em + 0.0298vw, 1.5em); --kg_font-size-label: clamp(1.5rem, 0.8571rem + 2.8571vw, 3rem); --kg_line-height-label: 1em; --kg_font-size-quote: clamp(1.5rem, 0.8571rem + 2.8571vw, 3rem); --kg_line-height-quote: 1em; } This works pretty well and I'll be curious to see what the channel thinks. Thanks for the great comment!

Hi Rodney. Thank you! Absolutely "yes" to clamping fonts if the client doesn't need to get in and adjust (too confusing for client)! At the time of this video, custom values were not an option for spacing units (eg: padding) and font sizing. We've been having some great success using a centralized CSS with variables and then placing those variables as the value for the custom units. So, you might be able to create a desktop, tablet, and mobile CSS variable to establish your clamping and then use that variable for the font size. Not sure, on my list of things to try. I bet it would rule. We tend to clean up the dashboard with White Label CMS (don't like the name). We've been using the free version and it can clean up menus based on user role and also clean up the main dashboard AND place an Elementor template or two right in the dashboard! We like to put how to content in the dashboard for clients (eg: "How to add a blog post") and they love it. I'll try to make a video on this just as soon as I'm done being clobbered with project builds. 🙂 Let us know if you figure out anything cool with clamping!

@@KingGrizzly 😄😄 feel you on the crazy projects. Thanks for the interesting take. Just trying out the clamp solution, will let you know how it goes. Imran of web squadron also has some interesting videos on this.

@@rodlivz Thanks. I'll have to see what Imran suggests about clamping.

This is confusing to me as well. We use the Hello theme and I've found that leaving the boxes unchecked causes interference with the styles I've established in site settings. It's not clear to me if the styling interference is coming from the Elementor plugin or the Hello Theme - I think it is coming from the plugin. Checking the boxes seems to allow 100% fidelity to the site settings, removing any of the basic fonts styling which is coming Elementor, presumably. However, I don't know what they gets precedence: Site Settings or the OceanWP theme - sorry! You may have to pull up their support or do some trial and error testing. If anyone else understands this better, please let us know!

Great question! I'm not sure where that went. We've got a way to take this video's font approach even further and will be releasing a video and accompanying font size clamping tool soon.

In my experience, REM is more predictable to work with - as EM is relative to the cascade of font size styles. This is not to say EM can't be figured out successfully! The typical browser has the font size set to 16px. If we declare a REM size, then we know 1 REM is probably 16px. This will be true no matter where we use our fonts, even a font nested inside of widgets and div containers. However, elements with EM sizing are relative to their parent element font size styles. It is true: a font with 1EM size will be 16px unless other font-size declarations come into play. But, it is a lot easier to get inconsistent sizing by mistake. A heading with a 1EM size inside of widgets and containers which could possibly end up with some other font-size directives could display at an unintended size - especially when clients come into the mix. If a container or widget had a font size declared (32px, for example), then a child element with a 1EM size could render at 32px, not 16px. Still, I will sometimes use EM intentionally in my CSS or widget settings if I'm confident of the style cascade, because it is a good way to ensure contextual proportions for some design requirements. - Brian

@@KingGrizzly Thanks for taking the time to explain, great reply.

I don't know what the fonts were set to with this demo. At the time of the video, I was inputting REM sizes for the fonts. Lately, I've been using a CSS clamp generator to come up with font sizes. Something like: clamp.font-size.app It is then possible to click on the pencil icon and put in a clamp setting for desktop. For example, clamp(1rem, -1.5rem + 8vw, 3rem) and then tablet and mobile will just work!

Hi James. Futura PT.

This might be possible with a kit. I don't have the available time right now but will attempt to put together some sort of style guide template in the coming weeks. Thanks for watching!

​@@KingGrizzly would also be interested in these settings. It should be easy to export them as a theme in Elementor

@@konradbinder2214 Thanks for mentioning, I'm working on a little starter kit and will let people know when it is ready. Please subscribe so you don't miss it!

Using the Elementor Hello theme, I've don't recall any issues with the global font settings changing after setting them up like this.