How do I change the font size in Webflow?
Set a Webflow font size in Style panel, Typography. Use rem so visitors can enlarge text, and pair it with line height.
Select the text and open Style panel, Typography, then set the font size. Webflow's responsive text guidance is to use rem, not px, so the size can follow a visitor's browser text setting. Keep body text no smaller than 16 pixels in effect. Set paragraph line height to at least 1.5 times the font size. The heading tag does not choose the size. Typography does.
Set the size in Typography
Select the text on the canvas. Open Style panel, Typography, and type the font size. The default unit is px. You can type another unit after the number, such as rem.
Give the element a class in the Selector field before you change the second heading. The size is stored on the class, so the next element that uses the class gets the same size. If you style the tag instead, such as All H1 Headings, every heading of that level picks up the size.
Example: the services hero should read larger than the paragraph under it. Select the heading, name the class Hero heading, and set the size to 3rem. Select the paragraph, name it Intro, and set the size to 1rem. Leave the other sections alone.
A parent can pass type styles to the text inside it. The Body (All pages) tag is the top of that chain. Select the Body element, choose Body (All pages) in the Selector, and set the size you want as the site default. An orange mark on a type property means the value is inherited. Click it to see where it comes from.
Prefer rem so people can resize the text
Webflow's responsive text guidance is to size text in rem, and not in px. Px ignores the browser's own text size setting, so a visitor who enlarged text in the browser still sees your px size. Rem is relative to the root font size, which follows that browser setting unless the root size was changed in code.
1rem matches that root size. 2rem is twice the root. If you set a parent to 20px and a child to 1em, the child follows the parent, not the root. Rem does not do that. It stays tied to the root, which is why it is the accessible default.
Webflow also says body text should be no smaller than 16 pixels. If the root is the usual browser default, 1rem is that 16 pixel size. Do not set a paragraph to 0.75rem to make a page look delicate. Thin type at a small size is hard to read, especially in a paragraph.
Check the published page with the browser text size enlarged. Rem text should grow. A heading you left in px will not follow that browser setting.
Set line height with the size
Size alone can make a paragraph feel tight. Webflow's typography guidance says line height should be at least 1.5 times the font size for paragraphs and blocks of text.
Set that on the paragraph class, or set the default on the Body (All pages) tag so it cascades until a more specific style overrides it. A heading can use a tighter line height than a paragraph. A paragraph should not.
Long lines are a separate problem. Webflow suggests about 60 to 80 characters per line. A max width of 60ch equals the width of 60 zeros in the font you selected. If a 1rem paragraph still stretches across a wide screen, limit the width. Do not shrink the font to force the line to wrap.
Do not fake the size with a heading level
The heading tag is not a size knob. An H1 is the page purpose. An H2 is a section inside it. Skipping a level to make type look bigger or smaller confuses the outline, and the size is still whatever Typography says.
If a label needs to look small, keep an honest heading level and set the size on the class. The heading guide is the H1 to H6 order. This page is only the size.
The font family is a different control in the same Typography section. Uploading a file or adding a Google font is the custom font guide. Changing the family does not set the size, and changing the size does not load a new font.
Check a phone width before you publish
A size that looks right on a desktop canvas can be too large on a phone. Select the phone width in the Designer, read the heading, and set a size on that width if this screen should differ. Then open the live page on a real phone after you publish. The mobile layout guide is what to do when the page scrolls sideways or overlaps.
Example: Hero heading is 3rem on desktop and 2rem on the phone width, and Intro stays 1rem with a line height of 1.5. The class names stay the same. Only the size value changes on the smaller width.
A font size on a page you already have is ordinary type work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.
Questions & answers
If I pick H1, does the font get bigger?
No. The heading level is the structure of the page. The size is a Typography setting. Use the heading guide when the level is wrong, and this page when the letters are the wrong size.
I changed one paragraph and every paragraph on the site changed. What did I style?
You styled a shared class or a tag such as All paragraphs or Body (All pages). Name a class on the one paragraph if only that block should change.
Will rem text grow when a visitor enlarges browser text?
Yes. Rem follows the root size, which respects the browser text setting. A px size ignores that setting, which is why the responsive text guidance says not to size text in px.
The heading is fine on my laptop and huge on my phone. Where do I fix it?
Check that phone width in the Designer and set the size there if this width should differ. Then open the published page on a real phone. The mobile layout guide is the breakpoint check.
Sources & further reading
Need a hand with your Webflow site?
View membership