{"id":23293,"date":"2024-10-14T11:27:14","date_gmt":"2024-10-14T11:27:14","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=23293"},"modified":"2024-10-15T09:26:51","modified_gmt":"2024-10-15T09:26:51","slug":"change-line-spacing-in-wordpress","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/change-line-spacing-in-wordpress\/","title":{"rendered":"How to Change Line Spacing in WordPress (Without Plugin)"},"content":{"rendered":"\n<p>Changing line spacing in <a href=\"https:\/\/kwebby.com\/blog\/wordpress-plugins-themes-damage-seo\/\" data-type=\"post\" data-id=\"23208\">WordPress<\/a> can seem a bit tricky at first, especially if you&#8217;re aiming to do it without relying on a plugin.<\/p>\n\n\n\n<p>But don&#8217;t worry, it&#8217;s easier than it sounds, and you&#8217;ll be a pro in no time! In this guide, we&#8217;re going to walk you through the process using the <a href=\"https:\/\/kwebby.com\/blog\/gutenberg-block-editor-tips\/\" data-type=\"post\" data-id=\"12523\">Gutenberg editor<\/a>&#8216;s typography settings.<\/p>\n\n\n\n<p>We&#8217;ll keep it simple and straightforward, so you can get your content looking just how you want.<\/p>\n\n\n\n<p>Plus, we&#8217;ll show you how to fine-tune things a bit more with some <a href=\"https:\/\/kwebby.com\/blog\/avoid-large-layout-shifts\/\" data-type=\"post\" data-id=\"23091\">custom CSS<\/a> in the Additional CSS settings.<\/p>\n\n\n\n<p>Ready to dive in?<\/p>\n\n\n\n<p>Let&#8217;s get to it!<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/_anazb8plnU?si=LZmYnjuIdUo0_--1\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Method #1 &#8211; Using Gutenberg Editor (For Newer Themes Only)<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001995@2x-1024x453.png\" alt=\"\" class=\"wp-image-23294\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001995@2x-1024x453.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001995@2x-300x133.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001995@2x-768x340.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001995@2x-1536x680.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001995@2x-2048x907.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To adjust the line spacing in your <a href=\"https:\/\/kwebby.com\/blog\/searchable-database-wordpress\/\" data-type=\"post\" data-id=\"22211\">WordPress site<\/a> using the <a href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/gutenberg\/\" rel=\"noreferrer noopener\">Gutenberg editor,<\/a> you\u2019ll want to follow a few simple steps. This method works great for newer themes and gives you clear control over how your text looks on the page. Let&#8217;s break it down:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Select the Text Block: <\/strong>First, navigate to the page or post where your text is located. Click on the text block that you want to modify\u2014this will bring up the block settings on the right-hand side of your screen.<\/li>\n\n\n\n<li><strong>Access Typography Settings: <\/strong>With your text block selected, look over to the right where the block settings are displayed. Hover your cursor over the &#8220;Typography&#8221; section, and click the three-dot icon to expand the menu.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"892\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001997@2x-1024x892.png\" alt=\"\" class=\"wp-image-23295\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001997@2x-1024x892.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001997@2x-300x261.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001997@2x-768x669.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Add-New-Post-\u2039-Copyrocket-AI-\u2014-WordPress_Microsoft-Edge_001997@2x.png 1086w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adjust Line Height: <\/strong>Within the expanded Typography settings, you\u2019ll find the &#8220;Line Height&#8221; option. Adjust this to your liking. You can click and drag the slider, or input a specific value to get the perfect spacing for your text.<\/li>\n\n\n\n<li><strong>Preview and Save: <\/strong>Once you&#8217;re satisfied with the changes, it&#8217;s always a good idea to preview your page to ensure everything looks just right. Don\u2019t forget to hit &#8220;Save&#8221; or &#8220;Update&#8221; to keep your changes intact.<\/li>\n<\/ul>\n\n\n\n<p>And there you go!<\/p>\n\n\n\n<p>Adjusting your line spacing using Gutenberg is simple and effective for giving your <a href=\"https:\/\/kwebby.com\/blog\/update-php-wordpress\/\" data-type=\"post\" data-id=\"20579\">WordPress site<\/a> a polished, readable look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method #2 &#8211; Using Simple CSS<\/h2>\n\n\n\n<p>If you&#8217;re more comfortable with code or want a bit more flexibility for <a href=\"https:\/\/kwebby.com\/blog\/free-wordpress-themes\/\" data-type=\"link\" data-id=\"https:\/\/kwebby.com\/blog\/free-wordpress-themes\/\">older themes<\/a>, adjusting line spacing with CSS is another great option. <\/p>\n\n\n\n<p>Here&#8217;s how to do it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigate to Customize:<\/strong> First, head to your WordPress dashboard. From there, go to <strong>Appearance<\/strong> and then select <strong>Customize<\/strong>. This will open the Customizer interface where you can make changes that affect your site&#8217;s appearance.<\/li>\n\n\n\n<li><strong>Open Additional CSS:<\/strong> In the Customizer, look for the <strong>Additional CSS<\/strong> section. Click on it to open the area where you can input your custom CSS code.<\/li>\n\n\n\n<li><strong>Add CSS Code: <\/strong>Now it&#8217;s time to add the CSS code to adjust your line height.<\/li>\n<\/ul>\n\n\n\n<p>For instance, if you want to change the line spacing for posts, you would enter something like;<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".post p {line-height: 2em;}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">post p <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">height<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">2em<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>If it does not change that means your article tag does not have &#8220;post&#8221; CSS selector, therefore, you can add the following;<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"article p {line-height: 2em;}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">article p <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">height<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">2em<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>For pages, use ;<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".page p {line-height: 2em;}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">page p <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">height<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">2em<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2024\/10\/Customize-How-to-make-Taylor-Swift-AI-Photos-for-Free-Prompts-Included-\u2013-Copyrocket-AI_Microsoft-Edge_001998.gif\" alt=\"\" class=\"wp-image-23296\" title=\"\"><\/figure>\n\n\n\n<p>You can tweak the `2em` value to make the spacing larger or smaller, depending on your preference.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Preview and Publish:<\/strong> Always preview your changes first to make sure everything looks just the way you want it. If you&#8217;re happy with the result, click <strong>Publish<\/strong> to apply the changes to your live site.<\/li>\n<\/ul>\n\n\n\n<p>Using CSS gives you powerful control over your site&#8217;s typography, making sure everything is as readable and visually pleasing as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Tips to Add Line Spacing<\/h2>\n\n\n\n<p>Looking for more ways to tweak line spacing on your <a href=\"https:\/\/kwebby.com\/blog\/find-page-post-id-wordpress\/\" data-type=\"post\" data-id=\"19909\">WordPress site<\/a>? <\/p>\n\n\n\n<p>Here are a few handy tips to consider:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use Shift+Enter for Line Breaks:<\/strong> Instead of creating a whole new paragraph, hit Shift+Enter to add single line breaks wherever you need them.<\/li>\n\n\n\n<li><strong>Try the Spacer Block:<\/strong> This is a great tool for adding extra vertical space between different elements on your page, ensuring everything breathes well.<\/li>\n\n\n\n<li><strong>Leverage Plugins Like Ultimate Blocks:<\/strong> For more customized spacing options, plugins such as Ultimate Blocks offer separator or divider blocks that you can easily incorporate.<\/li>\n\n\n\n<li><strong>Explore HTML\/CSS for Precision:<\/strong> For those who are tech-savvy, diving into HTML\/CSS can provide more precise control over spacing, allowing you to really fine-tune your design.<\/li>\n<\/ul>\n\n\n\n<p>These tips should give you even more flexibility in making your WordPress site clean and visually appealing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts!<\/h2>\n\n\n\n<p>In conclusion, while it might initially seem daunting to customize your WordPress site\u2019s line spacing without plugins, it\u2019s actually quite straightforward and offers rewarding results.<\/p>\n\n\n\n<p>By utilizing the Gutenberg editor for quick fixes and simple control over newer themes or opting for CSS adjustments for a more custom feel, you have the tools to create a visually cohesive and polished web space.<\/p>\n\n\n\n<p>Remember, the key to great typography lies in readability and aesthetics, so take your time experimenting with spacing until you find what best suits your content and brand. With these techniques and tips, you now have the power to make your WordPress site truly your own, enhancing both functionality and style.\u200b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Changing line spacing in WordPress can seem a bit tricky at first, especially if you&#8217;re aiming to do it without relying on a plugin. But&hellip;<\/p>\n","protected":false},"author":1,"featured_media":23297,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[404],"tags":[],"class_list":["post-23293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/23293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=23293"}],"version-history":[{"count":0,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/23293\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/23297"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=23293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=23293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=23293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}