{"id":358565,"date":"2021-12-24T04:33:11","date_gmt":"2021-12-24T12:33:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=358565"},"modified":"2021-12-24T04:33:13","modified_gmt":"2021-12-24T12:33:13","slug":"care-for-the-text","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/care-for-the-text\/","title":{"rendered":"Care for the Text"},"content":{"rendered":"\n

How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to pack a punch! Vite! And, sure, all these things might make a website better. But no matter how fancy the application is or how dazzling the technology will ever be under the hood, a great website will always require great text.<\/p>\n\n\n\n\n\n\n\n

So, whenever I\u2019m stuck pondering the question: \u201chow do I make this website better?\u201d I know the answer is always this: <\/p>\n\n\n\n

care for the text.<\/p>\n\n\n\n

Without great writing, a website is harder to read, extremely difficult to navigate, and impossible to remember. Without great writing, it\u2019s hardly a website at all. But it\u2019s tough to remember this day in and day out\u2014especially when it\u2019s not our job to care about the text\u2014yet each and every <p><\/code> tag and <button><\/code> element is an opportunity for great writing. It\u2019s a moment to inject some humor or add a considerate note that helps people.<\/p>\n\n\n\n

So: care for the text. Got it. But there are so many ways to care! From commas and smart quotes, to labels in our forms, to typography, and even the placeholders in our inputs. It\u2019s a dizzying amount of responsibility\u2014but it\u2019s worth every second of our time.<\/p>\n\n\n\n

Here\u2019s one example: a while ago, we needed to explain a new feature to our users and point to it in the UI. We could use our pop-up component to explain how our team just fixed something for a ton of folks\u2014but!\u2014I knew that no matter what the fancy new feature was, our customers would be annoyed by a pop-up.<\/p>\n\n\n\n

After thinking about it for far too long I realized that this was an opportunity to acknowledge how annoying this popup was:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

With this project, I could\u2019ve just thrown some text in that button that says \u201cDismiss\u201d but our little team of writers at Sentry constantly remind me that even the smallest, most boring block of text can be a playground. Each string has potential, even in this dumb example. It doesn\u2019t change the world or anything, but it improves something that would otherwise be yawn-worthy, predictable.<\/p>\n\n\n\n

Not every bit of text in a website needs to be passive-aggressive though. When you\u2019re in the checkout ordering medicine, you likely don\u2019t want to be reading a quirky story or a poem, and you don\u2019t want to click a button that insults you. In this context, caring for the text means something entirely different. It\u2019s about not getting in the way but being as efficient and empathetic as possible.<\/strong> And this is true of every link in the footer, every navigation item, every <alt><\/code> tag, and subtitle\u2014they all require care and attention. Because all of these details add up.<\/p>\n\n\n\n

These are the details that make a good website great<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"

How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to pack a punch! Vite! And, sure, all these things might make a website better. But no matter how fancy the application is or how dazzling the technology will ever be […]<\/p>\n","protected":false},"author":223806,"featured_media":283490,"comment_status":"open","ping_status":"closed","sticky":false,"template":"art-direction\/eoy-2021.php","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/text-wrap.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":323539,"url":"https:\/\/css-tricks.com\/create-an-faq-slack-app-with-netlify-functions-and-faunadb\/","url_meta":{"origin":358565,"position":0},"title":"Create an FAQ Slack app with Netlify functions and FaunaDB","date":"October 22, 2020","format":false,"excerpt":"Sometimes, when you\u2019re looking for a quick answer, it\u2019s really useful to have an FAQ system in place, rather than waiting for someone to respond to a question. Wouldn\u2019t it be great if Slack could just answer these FAQs for us? In this tutorial, we\u2019re going to be making just\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/slack-app.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":289115,"url":"https:\/\/css-tricks.com\/making-width-and-flexible-items-play-nice-together\/","url_meta":{"origin":358565,"position":1},"title":"Making width and flexible items play nice together","date":"July 1, 2019","format":false,"excerpt":"The short answer: flex-shrink and flex-basis are probably what you\u2019re lookin\u2019 for. The long answer Let\u2019s say you want to align an image and some text next to each other with like this: Now let's say you reach for flexbox to make it happen. Setting the parent element to display:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/connected-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":343224,"url":"https:\/\/css-tricks.com\/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side\/","url_meta":{"origin":358565,"position":2},"title":"How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?","date":"June 30, 2021","format":false,"excerpt":"I got this exact question in an email the other day, and I thought it would make a nice blog post because of how wonderfully satisfying this is to do in CSS these days. Plus we can sprinkle in polish to it as we go. HTML-wise, I'm thinking image, text,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/Screen-Shot-2021-06-25-at-2.37.07-PM.png?fit=1200%2C1010&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":241528,"url":"https:\/\/css-tricks.com\/tips-aligning-icons-text\/","url_meta":{"origin":358565,"position":3},"title":"Tips for Aligning Icons to Text","date":"May 16, 2016","format":false,"excerpt":"Icons. They're popular. They help complement content (most of the time). And yet they can be a pain in the neck. Once you've decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you're coding. Here's an\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17481,"url":"https:\/\/css-tricks.com\/beefing-up-dull-text-in-webkit\/","url_meta":{"origin":358565,"position":4},"title":"Beefing Up Dull Text in WebKit","date":"July 11, 2012","format":false,"excerpt":"While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite like Chrome and it was sad to me knowing that I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/07\/brightenedup.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":363553,"url":"https:\/\/css-tricks.com\/explain-the-first-10-lines-of-twitter-source-code\/","url_meta":{"origin":358565,"position":5},"title":"Explain the First 10 Lines of Twitter’s Source Code to Me","date":"February 24, 2022","format":false,"excerpt":"For the past few weeks, I\u2019ve been hiring for a senior full-stack JavaScript engineer at my rental furniture company, Pabio. Since we\u2019re a remote team, we conduct our interviews on Zoom, and I\u2019ve observed that some developers are not great at live-coding or whiteboard interviews, even if they\u2019re good at\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/twitter-source-code.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358565"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=358565"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358565\/revisions"}],"predecessor-version":[{"id":359741,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358565\/revisions\/359741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/283490"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=358565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=358565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=358565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}