0,0,1<\/code> (except for the bare-bones reset).<\/p>\n\n\nWrapping up<\/h3>\n\n\n
So there you have it, a bleeding-edge solution to a very boring problem! This newer approach is still not what I\u2019d call \u201csimple\u201d CSS \u2014 as I said at the beginning, it\u2019s a more complex topic than it might seem at first. But aside from having a few slightly complex selectors, I think the new approach makes more sense overall, and the less rigid HTML structure seems very appealing.<\/p>\n\n\n\n
If you end up using this, or something like it, I\u2019d love to know how it works out for you. And if you can think of ways to improve it, I\u2019d love to hear those too!<\/p>\n","protected":false},"excerpt":{"rendered":"
If you\u2019ve ever worked on sites with lots of long-form text \u2014 especially CMS sites where people can enter screeds of text in a WYSIWYG editor \u2014 you\u2019ve likely had to write CSS to manage the vertical spacing between different typographic elements, like headings, paragraphs, lists and so on. It\u2019s surprisingly tricky to get this […]<\/p>\n","protected":false},"author":288720,"featured_media":376436,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","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":"Solved With :has(): Vertical Spacing in Long-Form Text by Liam Johnston","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18909,587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_260A8E0A90873E472ABE1D21B969F62CF495A0B14984E72F603304D49A555B39_1673373404085_Screenshot2023-01-10at10.56.27AM.png?fit=1410%2C940&ssl=1","jetpack-related-posts":[{"id":245796,"url":"https:\/\/css-tricks.com\/methods-controlling-spacing-web-typography\/","url_meta":{"origin":376435,"position":0},"title":"Methods for Controlling Spacing in Web Typography","date":"September 26, 2016","format":false,"excerpt":"If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups. Then you may have tried explaining to me the pains of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283420,"url":"https:\/\/css-tricks.com\/typography-for-developers\/","url_meta":{"origin":376435,"position":1},"title":"Typography for Developers","date":"February 27, 2019","format":false,"excerpt":"This is intended as a practical guide for developers to learn web typography. We\u2019ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We\u2019ll go over\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":260620,"url":"https:\/\/css-tricks.com\/keeping-track-letter-spacing-guidelines\/","url_meta":{"origin":376435,"position":2},"title":"Keeping track of letter-spacing, some guidelines","date":"October 4, 2017","format":false,"excerpt":"Considering that written words are the foundation of any interface, it makes sense to give your website's typography first-class treatment. When setting type, the details really do matter. How big? How small? How much line height? How much letter-spacing? All of these choices affect the legibility of your text and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/10\/letterspacing_feat_img.png?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":319599,"url":"https:\/\/css-tricks.com\/leading-trim-the-future-of-digital-typesetting\/","url_meta":{"origin":376435,"position":3},"title":"Leading-Trim: The Future of Digital Typesetting","date":"August 21, 2020","format":false,"excerpt":"leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it \u2014 including how Microsoft has advocated for it \u2014 and that it\u2019s now part of the Inline Layout Module\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/1gXfB7QR3LpWwJEuA12drqw.gif?fit=1200%2C426&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295294,"url":"https:\/\/css-tricks.com\/weekly-platform-news-text-spacing-bookmarklet-top-level-await-new-amp-loading-indicator\/","url_meta":{"origin":376435,"position":4},"title":"Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator","date":"September 5, 2019","format":false,"excerpt":"In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's in-app browser is only posing as one. Let's get into the news! Check if your content breaks after increasing text spacing Dylan Barrell from Deque has created\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/wpn-20190905.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358029,"url":"https:\/\/css-tricks.com\/consistent-fluidly-scaling-type-and-spacing\/","url_meta":{"origin":376435,"position":5},"title":"Consistent, Fluidly Scaling Type and Spacing","date":"December 16, 2021","format":false,"excerpt":"When Chris first sent me this prompt, I was thinking about writing about progressive enhancement, but that subject is so wide-reaching to be one thing and all too predictable, especially for those already familiar with my writing. Saying that, what I\u2019m going to outline in this article also isn\u2019t just\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_35FD991FAFE1DAC785D8FF6F2C6CB7F45F7B73B94A1005536BB4ECAF4F7F267E_1637665704993_CleanShot2021-11-23at11.08.192x-scaled.jpg?fit=1200%2C721&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376435"}],"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\/288720"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376435"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376435\/revisions"}],"predecessor-version":[{"id":376573,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376435\/revisions\/376573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/376436"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}