How to Change Font Size in Elementor

Work from the top down. Set typography globally, let widgets inherit, and override individually only where the design genuinely differs. Sites where every heading has a hand-set size are painful to change later and inconsistent from the start.

Global typography

Open the Elementor menu (top-left in the editor) → Site Settings → Typography.

Here you set the defaults for body text and each heading level. Changes apply everywhere that has not been overridden, which makes this the right place for a site-wide adjustment.

Global Fonts goes further: define named styles — Primary, Secondary, Text, Accent — and assign them to widgets. Change the definition and every widget using it updates. It is the same idea as a design system, and it is worth setting up before building pages rather than after.

Per-widget font size

1. Select the widget.
2. Open the Style tab.
3. Expand Typography and click the pencil icon.
4. Set Size with the slider or by typing a value.

The pencil icon is the part people miss — typography controls stay collapsed until you open them.

Choose the unit deliberately

rem is the sensible default for body text, because it honours a visitor's browser font-size preference. Pure px ignores it, which is an accessibility problem as well as a rigidity one.

vw alone produces headings that become unreadably small on narrow screens. If you use it, set a per-breakpoint minimum.

Responsive sizes

This is where most of the confusion lives. Elementor stores a separate value per breakpoint.

1. Click the responsive mode icon next to the Size control.
2. Choose Desktop, Tablet or Mobile.
3. Set the value for that view.

Once a mobile value exists, changing the desktop value no longer affects mobile. That is the intended behaviour and the reason a change "does not apply" — you changed a different breakpoint's value.

Practical guidance:

• Body text: 16–18 px equivalent on desktop, and do not go below 16 px on mobile.
• Headings: reduce noticeably on mobile — a 48 px desktop headline is usually 28–32 px on a phone.
• Check tablet as well; it is the view people forget, and it is the one that looks broken on an iPad.

The wider principles are in the responsive web design checklist.

When the size will not change

Diagnose by inspecting the element: the Styles panel shows which rule won and which are crossed out. That answers the question in seconds and beats changing settings hopefully.

Overriding with CSS when you must

If a theme rule is winning, add a class to the widget under Advanced → CSS Classes and target it:

.big-quote .elementor-heading-title {
    font-size: 2.25rem;
    line-height: 1.2;
}

Prefer raising specificity over !important, which makes the next override harder. Put the rule somewhere update-safe, per how to add custom CSS to WordPress.

Keep typography maintainable

• Define a small scale — four or five sizes — and use only those.
• Use Global Fonts rather than setting sizes on individual widgets.
• Set line height alongside size; large text needs tighter line height than body copy.
• Constrain line length to roughly 60–75 characters for readable body text.
• Check contrast as well as size; small light-grey text fails on both counts.

Fewer, deliberate sizes make a site look designed rather than assembled — the reasoning behind that is in how to choose fonts for a website.