{"id":5316,"date":"2025-03-12T13:46:33","date_gmt":"2025-03-12T18:46:33","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5316"},"modified":"2025-03-12T13:46:34","modified_gmt":"2025-03-12T18:46:34","slug":"chilled-out-text-underlines","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/chilled-out-text-underlines\/","title":{"rendered":"Chilled Out Text Underlines"},"content":{"rendered":"\n<p>I sometimes struggle with what the perfect look for a link within body text should look like. It needs to be clearly a link, but also not styled so intensely it distracts from reading a paragraph. I <em>generally<\/em> like the idea that links are blue and underlined, as that&#8217;s as close to a default familiar look as we have for links, but I&#8217;m flexible. Links that are a &#8220;brand&#8221; color and distinct from the text color seem fine to me, particularly if also underlined. <\/p>\n\n\n\n<p>Here&#8217;s how links look with entirely default styles:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"836\" height=\"254\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.29.57%E2%80%AFAM.png?resize=836%2C254&#038;ssl=1\" alt=\"\" class=\"wp-image-5319\" style=\"width:479px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.29.57%E2%80%AFAM.png?w=836&amp;ssl=1 836w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.29.57%E2%80%AFAM.png?resize=300%2C91&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.29.57%E2%80%AFAM.png?resize=768%2C233&amp;ssl=1 768w\" sizes=\"auto, (max-width: 836px) 100vw, 836px\" \/><\/figure>\n<\/div>\n\n\n<p>Me, I think that look is a bit intense. I think it can be improved by keeping the spirit of what is going on there but chilling it out a bit. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nudge the Underline Away<\/h2>\n\n\n\n<p>I think the characters are a bit more legible if we move that underline away a little. Let&#8217;s make the font <code>system-ui<\/code> and kick that underline away a smidge:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span> {\n  <span class=\"hljs-attribute\">text-underline-offset<\/span>: <span class=\"hljs-number\">2px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"380\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.32.12%E2%80%AFAM.png?resize=844%2C380&#038;ssl=1\" alt=\"\" class=\"wp-image-5320\" style=\"width:479px\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.32.12%E2%80%AFAM.png?w=844&amp;ssl=1 844w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.32.12%E2%80%AFAM.png?resize=300%2C135&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.32.12%E2%80%AFAM.png?resize=768%2C346&amp;ssl=1 768w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n<\/div>\n\n\n<p>I think that&#8217;s broadly better, regardless of <code>font-family<\/code>, <code>line-height<\/code>, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add Opacity to the Underline<\/h2>\n\n\n\n<p>This is the part that chills the link style out the most, while still reading strongly as a link. We&#8217;ve got <code>text-decoration-color<\/code> to use for this, which we can just apply a chilled out color directly. But we can be a bit smarter!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rather than setting a 2nd static color, let&#8217;s leverage the <code>currentColor<\/code>. That way it&#8217;s not yet-another-color we have to manage. <\/li>\n\n\n\n<li>Let&#8217;s use this alteration for our <code>:hover<\/code> and <code>:focus<\/code> styles, which can be another hard choice!<\/li>\n<\/ul>\n\n\n\n<p>The <a href=\"https:\/\/frontendmasters.com\/blog\/relative-color-syntax-basic-use-cases\/\">relative color syntax<\/a> would be cool here, but full cross-browser support is a smidge away on that yet, so let&#8217;s use the <a href=\"https:\/\/caniuse.com\/mdn-css_types_color_color-mix\">better-supported<\/a> <code>color-mix()<\/code> instead.<\/p>\n\n\n\n<p>For a smidge of <a href=\"https:\/\/bsky.app\/profile\/anatudor.bsky.social\/post\/3lk52ep2lvs25\">extra trickery<\/a> we&#8217;ll only apply the opacity underline when the link is &#8220;not&#8221; hovered or focused, meaning when it is that will be removed:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:not(<\/span><span class=\"hljs-selector-pseudo\">:is(<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span>, <span class=\"hljs-selector-pseudo\">:focus))<\/span> {\n  <span class=\"hljs-attribute\">text-decoration-color<\/span>: \n    <span class=\"hljs-built_in\">color-mix<\/span>(in srgb, currentColor, transparent <span class=\"hljs-number\">75%<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"380\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.40.25%E2%80%AFAM.png?resize=838%2C380&#038;ssl=1\" alt=\"\" class=\"wp-image-5321\" style=\"width:479px\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.40.25%E2%80%AFAM.png?w=838&amp;ssl=1 838w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.40.25%E2%80%AFAM.png?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.40.25%E2%80%AFAM.png?resize=768%2C348&amp;ssl=1 768w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Color Away!<\/h2>\n\n\n\n<p>By using <code>currentColor<\/code> it means that whatever color the links are, we get this chilled out style that comes along for the ride no matter what. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"830\" height=\"386\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.42.01%E2%80%AFAM.png?resize=830%2C386&#038;ssl=1\" alt=\"\" class=\"wp-image-5322\" style=\"width:479px\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.42.01%E2%80%AFAM.png?w=830&amp;ssl=1 830w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.42.01%E2%80%AFAM.png?resize=300%2C140&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-12-at-11.42.01%E2%80%AFAM.png?resize=768%2C357&amp;ssl=1 768w\" sizes=\"auto, (max-width: 830px) 100vw, 830px\" \/><\/figure>\n<\/div>\n\n\n<p>Possibly a decent candidate for a default stylesheet.<\/p>\n\n\n\n<p>Is all this accessible? My guess is that as long as the color of the link has enough contrast against the background, and the keyboard focus styles are strong, it&#8217;s fine. But if I&#8217;m wrong feel free to correct me here. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demo<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mydqdPN\" src=\"\/\/codepen.io\/anon\/embed\/mydqdPN?height=1000&amp;theme-id=47434&amp;slug-hash=mydqdPN&amp;default-tab=result\" height=\"1000\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mydqdPN\" title=\"CodePen Embed mydqdPN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blue links with underlines is a good default style for links in body text, but it&#8217;s a bit intense. Maybe we can chill it out a bit and be a bit more flexible. <\/p>\n","protected":false},"author":1,"featured_media":5324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[305,7,225,39],"class_list":["post-5316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-color-mix-2","tag-css","tag-relative-color-syntax","tag-typography"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/chilled-out-text.png?fit=1492%2C822&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5316"}],"version-history":[{"count":3,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5316\/revisions"}],"predecessor-version":[{"id":5325,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5316\/revisions\/5325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5324"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}