The Best Way to Setup Elementor Typography
Вставка
- Опубліковано 5 вер 2024
- Are you confused by Elementor Global Fonts and Typography Styles? If so, try the best method we've found for styling fonts in Elementor. It's easy, fun, and truly centralized. No more spot styling fonts and worrying about updating those styles later.
Learn:
- How we use an XXL-XS approach to heading tags (thanks for the tip Derek at Solid Digital (www.soliddigit...)
- Why setting up the Global Fonts tab is superior to the Typography Styles tab
- How to change the size of any heading across desktop/tablet/mobile with one click
This is the best tip we've found lately for Elementor and are curious if it helps others!
Questions? Comments? Please reach out!
Don't have Elementor Pro? It's crazy cheap for the value. Get Elementor Pro (we may get a small kickback for teaching and referring):
bit.ly/element...
I will never get the week that I lost back from trying to figure this out...thank you!!!
Brian! You explained this specific part better than tons of videos I wasted my time on. And you did it in a way (English is not my native language) in which I could follow and understand the point. I wasted time and time and time on this. Only your video could show and explain this part in a way I now understand. This is better than the Elementor official docs.
Thank you so much.
This is nice to see! I'm pleased this helped you and appreciate your kind words. Happy web designing!
Holy Cow!!! Thank you x 1000. I've lost count of the number of videos I've seen on this topic and each guy was more in love with his own voice or trying to show off how much smarter he was than all of us. And as a result nothing made sense!!!. Till now...Thanks you sir!!
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!
This is the best tutorial on elementor typohraphy that currently exists on YT. Thank you sir.
Wow, thanks for this! Wait until you see what we are releasing for containers soon.
@KingGrizzly yes please, keep the videos coming :)
Finally somebody who makes sense. Thank you
Ha! I'm going to show this comment to my wife! Just kidding, she knows I'm brilliant. 😉
Excellent and helpful video, Brian, on a subject that is totally perplexing -- and which Elementor has never seemed to have fully explained in any documentation or tutorial! I've adopted your scheme in my WP starter site and will use it in my next couple of projects, hoping to get a grip on something I've never been able to implement or use properly.
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.
This is a really nice trick actually. And you also solve my confusion which I created myself after watching many videos
Happy to see this. I was confused too until a friend tipped me off to this approach.
Just what i was looking for and very concise. Thanks a lot
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.
This great, thanks. I've been doing what you mentioned, just ignoring/disabling the Global Typography settings. It had never occurred to me that I could customize those in this way. Very helpful.
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.
Confusion cleared up,especially when it comes to different styles with different markup. Thank you for this. 🎉 Subbed
Stay tuned, I've got an update to this video along with a time-saving tool Hoping to release very soon.
This is game-changing tips. Thank you so much!
I'm glad this helped you!
Best tutorial on this subject i've seen on YT. Thanks!
Wow, thank you! I've got a good one on a sneaky 12 column grid coming up. Stay tuned.
I keep waffling back around a few different approaches to typography within Elementor. I've tried the approach you took here, but the primary issue I take with the approach you show is that when you rename/repurpose Primary, Secondary, Text and Accent like you did, you then have to manually edit the typography for certain Elementor elements. For example the default Primary Global Font controls headings and icons. The Secondary Global Font controls list items, subheadings, animated headings and price tables. Text Global Font controls text editors and menu items. Accent Global Font controls links, button backgrounds, tab and accordion headings, and badges. Granted there is always some customization to be done with most elements - when you hijack the Primary Global Font and call it XXL - H1 and you set the font size to something big like 4rem, now all Elementor icons you add are going to default to 4rem in size. The same happens for the Secondary - if you make it a large font size, all of your Elementor List Item elements that you add will now have the same large text size. I really wished there was a way to control defaults for individual Elementor elements within the GUI. Sure you can write custom css and set baselines, but it would great if there was a way to edit a list item and say that by default all bullets used icons and the icons were spaced 10px away from the item and the font always used X...
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!
This is actually really useful as there are only a handful of font sets ever used on a site. I actually noticed with one of the template kits that I installed that this was done.
IT REALLY MAKES MUCH MORE SENSE TO WORK THIS WAY. THANKS FOR SHARING.
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 UA-cam. LOL.
@@KingGrizzly The sizes were good. Just a curiosity. Is the font base 16px or 10px?
This is a great way to solve this confusing fonts and typographpy subject. Thanks a lot!! By the way, you mantion that you find a new and better way and making a video about it. Could you tell us when do you share this video? Thanks again for this anormous helpfull video...
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.)
Thank you ..That has been a major problem for me to deal with..I've had a huge mess to deal with in trying to resize h1 ,h2 etc ...
Hopefully this helps!
Much better method than the last video! you should put it at the end of the last video to go check out this video LOL. I'm glad I found it.
Thanks Shawn. Better yet, I think it may be best to pull that. Will go take a look.
Using the Heading element, you can select a global font and thus have an H4 at the size of an H1. However, what would be the impact of headings used within a text element (e.g., in a blog post)? In my tests, the H- sizes use whatever is default in the theme.
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.
Thank you Sir! amazing!!
Nice!! been struggling with this very thing.. a big thanks!!
thank you so much
Thanks Brian, another excellent explanation. One of the things that I have a hard time understanding in the Elementor settings where the option is "Checking this box will disable Elementor's Default Fonts....." ok, I think I got that...maybe... But then it states: ...."and make Elementor inherit the fonts from your theme..." So currently I am using OceanWP theme and if I interpret that setting, "make Elementor inherit the fonts from your theme", by checking that box, my settings set in the OCeanWP customizer should be controlling the fonts, right? But if I want to use Elementor Site Setting, Global fonts, I should still leave it checked? If I don't want my theme involved shouldn't I uncheck it?
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 tips!
Thanks for this. Just a quick question... Why REM and not EM?
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.
VERY HELPFUL
Hello there, Brian! How are you doing?
THIS is what I was looking for.
I've been running my head around some ways of setting it for a better workflow and this is just perfect, so a big THANK YOU. Now I'm setting this combined with clamp calc for responsive scaling without breakpoints.
Now it's been almost 2 years would you change anything on this video?
And what about the Hello Theme settings under "Appearance" in WP Dashboard, what options do you check or leave unchecked?
Hi! CSS clamp is something new I've added to this approach and have built a handy generator to create the clamp CSS and variables (it's on my list to make a video just as soon as client work isn't all consuming).
As for the Hello Theme settings... I haven't clicked any of the toggles. Do you disable any of them?
I typically go to Elementor > Settings and check the two boxes to disable default colors and default fonts.
It's nice to know about the generator! I'll certainly take a look when your video comes out.
Just delivered another project, so I'm now with an open window to organize things a bit; also, I'm looking for new projects and potential collaborations.
If you have any ideas or projects in mind so we could work together, just let me know, I'd love to discuss them with you. Feel free to send me a private message!
Regarding the Hello Theme Settings, YES!
I do disable half of them, the ones I leave untouched are the "Disable Skip Link" (for accessibility reasons) and the last two, being "Unregister Hello style.css" and "Unregister Hello theme.css" (since I also disable Elementor Default colors and fonts, like you do).
Better details on why I check the rest:
If you handle SEO with a plugin or custom code, you'll want to check the "Disable description meta tag" option, since the plugin will generate another tag;
If you use Elementor to build the header and footer from scratch, you can check "Disable cross-site header & footer", since it refers only to the theme's built-in generic templates.
Likewise for "Disable page title". The theme by default generates an H1 tag for the page title, so, if you use Elementor to set element with an H1 tag within your pages, then you must check this setting to avoid hurting SEO since there would be more than one H1 tag on each page.
Now you have a great day! Take care
@@phkoon These are really great tips! Thank you for sharing them. I'm going to tic the same toggles you did.
@@KingGrizzly You're welcome!
Now, I just watched a video that I think settles that matter about trying to get equally sized containers to keep their ratio within rows with different number of containers when resizing the window.
The bottom line is to use grid instead of flex containers, or to give all flex containers the CSS property "flex: 1", I haven't tested it yet but both approaches should solve the matter easily.
Can't recall if you touched this ideia on our previous discussions and, if you you've already watched it, let me know.
The video in question is Kevin Powell's "Stop the Flexbox for 1D, Grid for 2D layout nonsense"
@@KingGrizzly Update:
Pixel-perfect scaling with the last approach (after I sent you the demonstration video) , but noth with "flex: 1" of course (I had mixed things up in my brain, then I recalled our discussions and took a look again at the improved test build I presented to you).
Gotta say it waaaay easir with grids, of course, as it does not require finding out what are the two related rates for each of the children containers nor setting up a calc funtion for each of their widths.
Yet, with grid you have to set a "grid-column" for each child container column-span as desired.
Oh my God! Thanks!
Thanks for the video. But I still didn't find what I was looking for. Rn my Home page has 5 different fonts not sizes. But different font styles. and there's no way I can fix it.
Once again, an amazing tutorial. What are your thoughts on using clamp() to resize the fonts "fluidly"😏? Also what are you using to customise your dashboard? Looks very sleek and client friendly. Do you have a tutorial for that as well? Thanks
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.
What is the link of the video you made in the past about global fonts as you say at 1:44 minute. Thanks
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.
Are you sure when you update your theme your font setting is still there and working?
Using the Elementor Hello theme, I've don't recall any issues with the global font settings changing after setting them up like this.
What are the font sizes you used?
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!
What font are you using here?
Hi James. Futura PT.
Anyway yu can give us so we can download and upload these settings?
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!