How to Underline in Framer: 1-Min Guide

How to Underline in Framer

Updated on:

June 5, 2026

By:

Use this interactive demo to learn how to apply underline formatting to text in Framer.

Quick summary

To underline text in Framer, select your text element, enter Edit mode, and apply the underline style via the Decoration option in the typography controls. This guide walks through every step inside a live Framer project so you can follow along without leaving this page.

Steps

Open your Framer project from the projects dashboard.
Select the blog post or page element you want to customize its appearance and content.
Highlight the text you want to underline and navigate to the Text element in the panel.
Click the Edit button to enter edit mode and begin customizing your content.
Access the typography controls (the Aa icon) to manage text presentation and open the Decoration section.
Click the underline text icon to apply underline formatting to your selected text.
Your underline formatting is now successfully applied in Framer.

📌 Why this matters

Framer is a powerful no-code web design tool where precise typography control — including text decoration like underlining — is essential for creating polished, professional websites. Knowing how to underline text in Framer lets designers emphasize key content, improve readability, and match brand style guidelines without writing custom CSS. This feature is especially valuable for teams building content-rich pages such as blogs, landing pages, and editorial layouts directly inside Framer's visual editor. Mastering Framer's text decoration controls helps designers work faster and maintain consistent typographic styling across their entire project.

Your product deserves an interactive demo

Start free

How to Add Adobe Fonts to Framer

Framer CRM Integration

How to Link to Section in Framer