I’ve lost count of how many times I’ve seen a colleague hit 'Ctrl+U' or 'Cmd+U' expecting to underline a specific phrase in a chat app or a web-based document editor, only to be met with silence—or worse, a browser window popping open to show the page source code.
It’s a frustrating muscle memory loop. We grew up with typewriters and legacy word processors where underlining was the primary way to add emphasis.
Digital design has evolved, and the underline has largely been pushed to the background for good reason. This shift isn't just about design trends or someone trying to be difficult.
It’s a response to how we consume content. Over two decades in web development, I have watched the web transform from a static document repository into a highly interactive, responsive experience.
When you try to find out how to underline text in a modern interface and find the button missing, it’s usually because the platform designers are steering you toward communication habits that prevent usability traps.
Relying on outdated conventions often sabotages the clarity of your message. The urge to reach for the underline is almost always a sign that your typography hierarchy is broken.
If you are highlighting text to make it stand out, you are probably fighting against your own layout rather than working with it.
The 'False Affordance' Problem
In user experience (UX) design, an 'affordance' is a visual property that suggests how an object should be used. Think of a door handle: the shape tells you to pull or push. On the web, the underline is the universal signal for a hyperlink.
It is the primary way we tell a user, 'Click this to go somewhere else.'
When you apply underlining to static text, you create a 'false affordance.' When users click on it and nothing happens, that subconscious promise is broken. Users feel a moment of confusion that chips away at the trust between your content and your reader.
I once consulted on a project where the team used underlines to style sub-headers. Within an hour of deployment, we had support tickets flooding in from users complaining that the navigation menu was unresponsive.
They weren't broken; they were just styled to look like links.
To maintain clean UI design patterns, avoid overloading the visual language of your interface. If you need to emphasize something, rely on contrast, color, or weight, but save the underline for your anchor tags.
This preserves the 'contract' between the user and the page: if it's underlined, it's a link.
Design systems are built on these implicit rules. When we break them for stylistic flair, we increase the cognitive load for our visitors. Simplicity is the ultimate sophistication.
Beyond clicking, consider mobile users. On a touch device, the margin for error is thin. When a user sees an underlined phrase, they might try to tap it, accidentally scrolling the page or misinterpreting the intent of your content.
My advice is to strictly audit your interface for these 'phantom' links. If it doesn't navigate, strip the line.
Stick to the industry standard and leave the underline for links.
Why Modern Chat Platforms Exclude the Underline Button
You’ve likely noticed that platforms like Discord and Slack have stripped away the 'underline' button. This isn't a missing feature; it is an intentional design choice aimed at accessibility and interface integrity.
The issue often starts with 'shortcut hijacking.' In almost every desktop web browser, hitting 'Ctrl+U' triggers 'View Page Source.' Trying to remap these keys inside a browser-based application often leads to conflict and broken user expectations.
Furthermore, these platforms prioritize clean web typography. Underlining adds vertical density that can make text hard to read, especially in chat interfaces where space is tight and legibility is paramount.
When you cram too many visual signals into a compact message feed, the text starts to blur together.
By enforcing bold, italics, or code blocks as the primary forms of text emphasis, these apps force users to communicate more clearly. It’s a trade-off that favors the long-term health of the ecosystem over the short-term desire for one specific formatting style.
When everyone plays by the same rules, the interface becomes predictable.
I’ve tested various internal tools for our team, and we found that disabling underlining actually sped up our average response time in documentation. Writers stopped trying to use underlines to 'shout' at readers and started using better sentence structure.
In these environments, underline is essentially reserved for specialized, non-document features. When you see a platform lack a button, don't think of it as a limitation.
Think of it as a guidepost designed to help you avoid common pitfalls.
If you genuinely need to highlight something, learn the markdown underline syntax instead of hunting for a GUI button that isn't there. It is faster and keeps your hands on the keyboard.
For Developers: Controlling the Line with CSS
If you are a developer, you might be frustrated by the limitations of the default CSS text-decoration property. It is, frankly, too rigid.
It sits too close to the text and often cuts through descenders, creating a jagged, unprofessional aesthetic that can ruin a clean typography stack.
For professional text formatting best practices, I strongly recommend abandoning the default property in favor of border-bottom. Using border-bottom gives you granular control over thickness, color, and offset.
You can pull the line away from the letters, ensuring the text remains legible.
If you are cleaning up complex data or code before applying these styles, our formatting text data utility is an excellent way to ensure your underlying strings are pristine.
Always remember that CSS text-decoration vs border-bottom is a decision about utility versus control.
If it is a link, use text-decoration so it remains semantic. If you are doing something purely for aesthetic design, border-bottom is your friend, but keep it subtle.
Also, don't forget the text-decoration-skip-ink property. Modern browsers support this, and it automatically breaks the line when it hits a descender, preventing that messy collision.
When I develop custom dashboards, I often prefer a semi-transparent border-bottom. This allows the background color to show through just a bit, making the design look layered and modern.
The Accessibility (WCAG) Reality Check
We cannot discuss the nuance of underlining without addressing the hard reality of digital inclusion. The W3C’s WCAG guidelines regarding link purpose are very clear: users must be able to understand the function of an element based on its visual presentation.
Consistency is a cornerstone of accessibility.
When you use an underline for emphasis, you are essentially telling a screen reader and a visually impaired user that they are looking at a link. When they navigate to that element, they realize it has no destination, which disrupts their flow.
This is known as a 'semantic trap.'
For users with cognitive disabilities or low vision, clear visual cues are essential. If you confuse the visual language of your site, you are adding cognitive load.
By adhering to modern design standards where only links are underlined, you are actively supporting a more inclusive web. Accessibility audits often flag non-link underlines as a high-severity usability issue.
If your organization is aiming for compliance, removing these elements is the first step in your cleanup process.
Your underline should be robust enough to be noticed, but only where it actually serves a functional purpose. Always validate your designs against contrast checkers to ensure that the line is visible enough to meet the 3:1 ratio requirement for non-text contrast.
Better Emphasis: Moving Beyond the Underline
If the underline is off the table, how should you emphasize your content? It’s time to lean into the other tools in our typographic toolkit. Italics and bold are the workhorses of professional writing for a reason.
They provide visual distinction without interfering with the legibility of the characters or mimicking the appearance of a hyperlink.
Modern APA formatting standards and MLA guidelines have long since deprecated the underline in favor of italics for titles and emphasis. Today, it is seen as a sign of antiquated document structure.
Instead of underlining, try using typography hierarchy. Use bold for key terms, italics for emphasis, and white space to group ideas. Using white space effectively draws the eye exactly where you want it to go.
When your page has clear, consistent structure, you don't need to 'scream' at the reader with excessive styling.
In my experience, simple font weight changes usually handle 90% of emphasis needs perfectly.
Additionally, consider the emotional tone of your text. Excessive styling can often be interpreted as aggressive. If you find yourself wanting to underline a sentence, ask yourself if the sentence structure itself is strong enough.
When You Really Need to Format Text
There are times when you are dealing with raw text strings and need to get them ready for a specific platform, and the manual effort of standardizing that text is just too slow.
If you are handling large blocks of text or messy input that needs to be cleaned up, efficiency is the priority.
If you find yourself manually converting formats, stripping bad syntax, or preparing strings for a new UI, check out our text processing utility. It’s designed for those one-off tasks where you just need the job done quickly.
It handles the heavy lifting so you don't have to manually delete stray characters.
It’s a great example of using the right tool for the right stage of the content lifecycle, keeping your workflow frictionless.
Think about the state of your text before you apply any styles. If the foundation is messy, the design will be messy, no matter how much underlining or bolding you apply. Clean your data first, then apply your design hierarchy.
Don't let your workflow get bottlenecked by messy input; use tools that streamline the transition from raw to polished.
Conclusion
Underlining text is a relic of the typewriter era that creates friction and accessibility issues on the modern web. Whether you are dealing with markdown underline syntax issues or trying to debug CSS properties, the lesson remains consistent: avoid underlining unless you are creating a link.
It is an outdated habit that we should collectively move past.
If you are a developer, reach for border-bottom if you absolutely must create a custom line for design reasons. If you are a writer, prioritize bold and italics to provide emphasis without confusing your readers.
These are the small, deliberate choices that separate a chaotic, amateur page from a professional, accessible interface.
Ultimately, prioritize the user experience. Your design choices should communicate clearly and unambiguously. By stripping away outdated habits like non-linked underlines, you make your content cleaner, more accessible, and easier to consume.
Your users will appreciate the lack of visual clutter, and your web pages will stand the test of time.