Control typography in Webflow through Style Panel > Typography section, which includes font family, weight, size, line-height, letter-spacing, and text transforms. Set line-height between 1.4–1.6 for body text, use rem-based font sizing for accessibility, and load custom fonts through Project Settings > Fonts. All typography properties are CSS-standard and fully controllable without code.
Webflow Typography: Line Height, Letter Spacing, Font Sizing, and Fonts
Typography is the most impactful design variable in any website — spacing, sizing, and typeface choices can make the difference between a professional product and an amateur one. Webflow's Typography section in the Style Panel exposes every CSS text property in a visual interface. This tutorial covers the complete typography toolkit: loading and applying fonts, setting an accessible type scale, fine-tuning line-height and letter-spacing, applying text transforms, and using text shadows. You'll leave with a working typography system for your project.
Prerequisites
- A Webflow project open in the Designer with at least one page
- Text elements (Heading, Paragraph, Rich Text) added to your canvas
- Familiarity with the Style Panel (S) basics
Step-by-step guide
Add fonts through Project Settings
Add fonts through Project Settings
Before styling typography, load your desired fonts. Click the Webflow logo in the top-left corner of the Designer to open the main menu. Navigate to Project Settings > Fonts tab. You'll see three sources: Google Fonts, Adobe Fonts, and Custom Fonts. To add a Google Font: click 'Add Google Font', search for your font (e.g., 'Inter'), click '+' next to the weights you need (Regular 400, Medium 500, SemiBold 600, Bold 700), then click 'Save'. For custom font files (.woff2, .woff, .otf, .ttf), click 'Upload Custom Font', upload your file, name it, and set the weight. Published fonts appear in the Font Family dropdown in the Style Panel within seconds.
Expected result: Your chosen fonts appear in the Font Family dropdown within the Style Panel's Typography section when you style a text element.
Build a type scale by styling tag selectors
Build a type scale by styling tag selectors
Instead of applying font sizes to individual classes, style the HTML tag selectors to set your base type scale. Click on an H1 heading on your canvas. In the Style Panel Selector field, clear any class name so the selector shows just 'H1 All H1s'. Now set your H1 styles: Font Family > Inter, Weight > Bold 700, Size > 48px. This applies to all H1s site-wide. Repeat for H2 (36px, SemiBold 600), H3 (28px, SemiBold 600), H4 (22px, Medium 500), H5 (18px, Medium 500), Paragraph (16px, Regular 400). Using tag selectors means your defaults are correct everywhere without manual class application.
Expected result: All heading and paragraph elements across your site now inherit consistent size and weight defaults from the tag-level styles.
Set line-height for readability
Set line-height for readability
Line-height is one of the highest-impact typography adjustments for readability. Select a paragraph element. In Style Panel > Typography section, find the Line Height input (the icon with lines and an arrow). For body paragraphs, set line-height to 1.6 (unitless, which means 1.6 × the font size). For headings (H1–H3), set line-height to 1.1–1.2 for tight, impact-driven heading spacing. For subheadings (H4–H5), use 1.3–1.4. You can use px, %, em, or unitless values — unitless (e.g., '1.6' without a unit) is the best practice because it scales proportionally when font size changes.
Expected result: Body text looks airy and readable, headings look tight and impactful. The visual rhythm of the page improves noticeably with proper line-height values.
Set letter-spacing for headings and labels
Set letter-spacing for headings and labels
Letter-spacing (CSS: letter-spacing) controls horizontal space between characters. In Style Panel > Typography, find the Letter Spacing input (the 'AV' icon with arrows). For display headings (H1, H2), set letter-spacing to -0.02em to -0.03em (negative tracking) — this makes large text feel more natural and professional. For UI labels and all-caps text (navigation, tags, captions), use 0.05em to 0.15em (positive tracking) to improve legibility of uppercase letters at small sizes. For body text paragraphs, leave letter-spacing at 0 (default — normal).
Expected result: Display headings have a premium, tight appearance. Labels and navigation links have proper visual spacing between uppercase letters.
Apply text transforms and decorations
Apply text transforms and decorations
Text Transform and Text Decoration are in the Typography section's second row of controls. To make navigation labels uppercase: select your nav link text, Style Panel > Typography > Text Transform > click 'TT' (Uppercase). For a tag or badge label, apply 'Capitalize' to auto-capitalize the first letter of each word. For Text Decoration: select a link element, Typography > Text Decoration > select 'Underline' to add an underline (or 'None' to remove the default underline from anchor tags). For the hover state, switch the States dropdown to 'Hover' and set Text Decoration to control hover underline behavior independently.
Expected result: Navigation labels appear in proper uppercase. Links have controlled underline behavior across default and hover states.
Add a text shadow for depth and emphasis
Add a text shadow for depth and emphasis
Text shadows work well for hero headings on dark background images, or for a subtle depth effect on white text. Select a heading. In Style Panel > Typography, scroll to the bottom of the typography controls and find Text Shadow. Click '+' to add a shadow layer. The controls are: X (horizontal offset, positive = right), Y (vertical offset, positive = down), Blur (blur radius — 0 for hard shadow, 4–8 for soft shadow), Color (use the color picker to set color and opacity). For a dark overlay glow behind light text, try: X: 0, Y: 0, Blur: 20, Color: rgba(0,0,0,0.5). For a classic headline drop shadow: X: 2, Y: 2, Blur: 4, Color: rgba(0,0,0,0.3).
Expected result: The heading has a visible shadow effect that gives it depth or improves legibility against background imagery.
Configure responsive typography at breakpoints
Configure responsive typography at breakpoints
Typography set on Desktop cascades down to smaller breakpoints, but font sizes often need to be reduced on mobile. Click the Tablet breakpoint in the top breakpoint bar. Select your H1 element (using the tag selector). Change the font size from 48px to 36px. Move to Mobile Portrait breakpoint and set H1 to 28px. Webflow will show an orange dot next to font size to indicate a breakpoint-specific override. Check line-height at each breakpoint — if you used a unitless value, it scales automatically. Only override it if the visual rhythm looks wrong at that size.
Expected result: Headings are appropriately sized across all breakpoints. Mobile text doesn't overflow containers and reads comfortably on small screens.
Explore advanced typography: text columns and font features
Explore advanced typography: text columns and font features
For multi-column editorial layouts, the Advanced Typography section is useful. Select a Rich Text or paragraph block. In Style Panel > Typography, scroll to the bottom and expand the Advanced section (click the arrow/chevron). You'll see Text Columns settings: Columns Count (number of CSS columns), Column Gap (space between columns), and Column Rule (a visible divider line between columns). Set Columns to 2 and Column Gap to 40px for a classic editorial two-column body layout. For font-feature-settings (ligatures, tabular numbers), these aren't in the visual UI — use Custom Properties at the bottom of the Style Panel: property 'font-feature-settings', value '"tnum" 1' for tabular numbers in data tables.
Expected result: Body text flows across two columns in an editorial layout. The column gap and optional rule line create a clear visual separation.
Complete working example
1TYPOGRAPHY SYSTEM SETUP — VISUAL STEPS SUMMARY23FONT LOADING:4- Webflow logo menu > Project Settings > Fonts tab5- Add Google Font: search > select weights needed > Save6- Custom fonts: Upload Custom Font > .woff2/.woff file > set name + weight78TYPE SCALE (Tag Selectors):9- Click heading > clear class in Selector field to show 'H1 All H1s'10- H1: 48px, Bold 700, Line Height 1.15, Letter Spacing -0.02em11- H2: 36px, SemiBold 600, Line Height 1.212- H3: 28px, SemiBold 600, Line Height 1.2513- Paragraph: 16px, Regular 400, Line Height 1.61415LETTER SPACING RULES:16- Display headings: -0.02em to -0.03em (negative tracking)17- All-caps labels: +0.08em to +0.15em (positive tracking)18- Body text: 0 (default)1920BREAKPOINT OVERRIDES:21- Tablet: H1 → 36px22- Mobile Portrait: H1 → 28px2324ADVANCED:25- Text shadow: Typography section > Text Shadow > '+'26- Text columns: Typography > expand Advanced section > Columns27- Fluid sizing: Custom Properties > font-size: clamp(28px, 5vw, 48px)Common mistakes
Why it's a problem: Font doesn't appear in the Font Family dropdown after adding it in Project Settings
How to avoid: Font loading can take 10–30 seconds. Refresh the Project Settings page after saving, then return to the Designer. If the font still doesn't appear, confirm the font was saved (you should see it listed in the Fonts tab). Try publishing the site or creating a new page — sometimes the Designer cache needs a refresh.
Why it's a problem: Line height looks correct on Desktop but text overlaps on Mobile
How to avoid: You likely set a pixel-based line-height (e.g., 24px) rather than a unitless value. On mobile, you may have reduced the font size to 14px, but the 24px line-height stayed fixed. Switch to a unitless value (e.g., 1.6) so line-height scales proportionally with font size at every breakpoint. Select the element > Style Panel > Typography > Line Height > clear the unit and just type 1.6.
Why it's a problem: Letter spacing applied to all-caps labels looks correct in Designer but published site looks wrong
How to avoid: Confirm the Text Transform and Letter Spacing styles are on the same class and applied in the same selector state (None, not Hover). Sometimes letter-spacing on the 'None' state gets overridden by a more specific class. Check the Style Panel Selector field to see if there are combo classes affecting the element.
Why it's a problem: Custom font renders correctly in Designer but falls back to a system font on the published site
How to avoid: The font file may have an incorrect MIME type or was uploaded with a format not supported by some browsers. Upload both .woff2 and .woff versions of the same font in Project Settings > Fonts for maximum compatibility. Also ensure the font weight in the upload matches the weight you're using in the Style Panel — a 400 weight font file won't render correctly when you apply Bold 700 to it.
Best practices
- Style HTML tag selectors (All H1s, All H2s, All Paragraphs) as your typographic base layer before creating class-based overrides — this ensures consistent defaults site-wide.
- Use unitless values for line-height (e.g., 1.6 not 24px) so it scales correctly when font size changes at breakpoints.
- Load only the font weights you use. Each extra weight adds a network request. Two to three weights (Regular, SemiBold, Bold) cover most design needs.
- Combine Text Transform: Uppercase with Letter Spacing: 0.08em minimum. Uppercase text without tracking looks cramped and amateurish.
- Test typography on mobile with real devices, not just the Designer canvas. Mobile screens often require larger tap targets and different line-height values than you'd expect.
- Use the Style Selectors Panel (G) to find which classes override font size at specific breakpoints — the orange dot indicator shows breakpoint overrides, and the panel helps you audit them systematically.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm setting up typography in Webflow and want to create a professional type scale for a SaaS product website. I need to set correct line-height values for headings and body text, apply negative letter-spacing to display headings, and ensure the fonts load correctly from Google Fonts. Walk me through the exact steps using Webflow's Style Panel, including which values to use for each heading level and how to apply them to HTML tag selectors rather than individual element classes.
Create a complete typography system for this Webflow project. Apply Inter font to all text elements. Set H1 to 48px Bold with -0.03em letter spacing and 1.15 line height. Set H2 to 36px SemiBold. Set paragraph text to 16px with 1.6 line height. Add responsive breakpoint overrides: Tablet H1 = 36px, Mobile H1 = 28px.
Frequently asked questions
What line height should I use for body text in Webflow?
For body paragraphs, use a unitless line-height of 1.5 to 1.7 — most designers settle on 1.6 as the standard. This means each line of text has 60% extra space above and below the cap height. Use the unitless value (type '1.6' with no unit) rather than pixels, so the spacing scales correctly when you change font size at breakpoints.
How do I remove the default underline from links in Webflow?
Select any link element, then in the Style Panel Selector field, clear the class name so it shows 'All Links a'. In the Typography section, set Text Decoration to 'None'. This removes underlines from all links globally. Then add underlines back on specific classes or hover states where you want them by switching to the Hover state in the States dropdown and setting Text Decoration to 'Underline'.
Can I use variable fonts in Webflow for advanced weight animations?
Yes, upload the variable font file (.woff2 format with 'var' in the filename) in Project Settings > Fonts. Variable fonts support the full weight axis (100–900) in a single file. In the Style Panel, you'll be able to set intermediate weights like 450 or 550. For font-variation-settings (custom axes), use the Custom Properties section at the bottom of the Style Panel.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation