{"id":30864,"date":"2021-07-13T01:30:52","date_gmt":"2021-07-13T08:30:52","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=30864"},"modified":"2021-07-13T01:30:54","modified_gmt":"2021-07-13T08:30:54","slug":"hmtl-line-spacing-good-bad","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/","title":{"rendered":"HTML Line Spacing: The Fine Line Between Good and Bad UX Design"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing-1024x512.png\" alt=\"HTML Line Spacing\" class=\"wp-image-30869\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>HTML line spacing \u2014 the vertical space between two lines of text within a paragraph \u2014 isn&#8217;t the most exciting thing in the UX design world, but it matters more than you think. This <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/styling\/\" target=\"_blank\" rel=\"noreferrer noopener\">styling<\/a> element involves Experience Strategy and Interaction Design \u2014 two of the <a href=\"https:\/\/medium.com\/@supriyakwriter\/4-quadrant-ux-design-model-to-create-a-great-user-experience-de06a8219c25\" target=\"_blank\" rel=\"noreferrer noopener\">four UX design quadrants<\/a> used to create an <em>incredible <\/em>user experience. But it goes much deeper than that.\u00a0<\/p>\n\n\n\n<p>Here&#8217;s a quick lowdown on HMTL line spacing:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It has the power to make a text more or less <em>readable<\/em>. Line-height has an enormous impact on readability, and if users can&#8217;t read content, they&#8217;re going to hit the &#8216;back&#8217; button or exit the app.<\/li><li>It&#8217;s super-important for accessibility, and with ever-increasing <a href=\"https:\/\/www.w3.org\/WAI\/policies\/\" target=\"_blank\" rel=\"noreferrer noopener\">legal standards and requirements<\/a> that govern this practice, you need to use the <em>correct <\/em>spacing or risk alienating users.\u00a0<\/li><li>Good line spacing makes or breaks the success of a website or app. It&#8217;s that simple.\u00a0<\/li><\/ul>\n\n\n\n<p>In this guide, deep dive into HTML line spacing and discover how to get it right.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-does-html-line-spacing-make-a-design-more-readable\"><strong>How does HTML line spacing make a design more readable?<\/strong><\/h2>\n\n\n\n<p>Line spacing isn&#8217;t a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-local-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">fo<\/a>nt thing. It&#8217;s a UX design thing. But when was the last time you heard designers talk about it? Line height matters because it makes text readable or unreadable.\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If line spacing is too large, there&#8217;s too much white space. The text looks awkward.&nbsp;<\/li><li>If line spacing is too small, letters appear all squished together. The text looks awkward.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/YEHrtNnxX6sIOO9pfwg8G-c1uf_8-mztDlp6jos2H_l6OqD8VerWKwsOGC9bnmvByyUHuKKCGq7E7pa3m7n3IF8SJI0kqJ_5p0i8ZpUUvW8c9q7_xEe955ezqIVZVsgqKDtu1CSt\" alt=\"\"\/><\/figure>\n\n\n\n<p>Most UX designers learn line spacing of 130-150 per cent is best for readability (1.3-1.5), with 140 per cent (1.4) the golden ratio, but that formula won&#8217;t benefit all users. Your client might have a style guide with a line spacing requirement that ranges anywhere from 120 per cent to 200 per cent, but someone might have written the style guide decades ago, long before anyone considered <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">web accessibility<\/a>. Consider changing the status quo if it improves readability. (More on accessibility in the next section.)<\/p>\n\n\n\n<p>Unfortunately, there&#8217;s no magic number that designers agree on, so it&#8217;s all down to trial and error on CSS. Some calculators claim to work out the perfect line spacing and font size, like <a href=\"https:\/\/grtcalculator.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">this one<\/a>, but as a designer, you&#8217;ll make the final decision. Use a design tool like UXPin, which lets you <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/styling\/#layer-opacity-and-blending\" target=\"_blank\" rel=\"noreferrer noopener\">experiment with line and character spacing<\/a> before you go live. World-famous UX designers use it for a reason, so why not join us with a <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">free trial<\/a>?<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-html-line-spacing-matters-for-accessibility\"><strong>Why HTML line spacing matters for accessibility<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/9kgzgQ1Lc2HQCqty8kgZ08br_btgL9ggpPf8q64moibMlrbqfoS-enDWxvybmUZlbeF7-1rHeAGoA2dt6z6YujvoipG9dy9FXpMfZLs_-ab0NH399ehzs4QJPFWwEmgvj5Q8kbQ7\" alt=\"\"\/><figcaption><a href=\"https:\/\/unsplash.com\/photos\/IThpmszqH7Y\" target=\"_blank\" rel=\"noreferrer noopener\">Photo credit<\/a><\/figcaption><\/figure>\n\n\n\n<p>Accessibility is a big deal in UX design right now, and rightly so. A good designer designs products that provide meaningful experiences to <em>all users<\/em>, including people with disabilities. Over <a href=\"https:\/\/www.cdc.gov\/ncbddd\/disabilityandhealth\/infographic-disability-impacts-all.html#:~:text=61%20million%20adults%20in%20the,is%20highest%20in%20the%20South.\" target=\"_blank\" rel=\"noreferrer noopener\">60 million adults<\/a> in the United States alone have some kind of disability. That&#8217;s around one in four of the population. Still, few UX designers consider their requirements when creating prototypes and products. This needs to change. Now.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/bG9Hjo8nGgqCL44K7vbCBn4puVnH_z54kU6JDv9TGiO2n2CUf4kM2KuXRdyrSubfPxC9q6-setVH5wbcInWdSL0Q0rPmaC1T7N28TeWjK2xA66QoprsUD_MJeLC5P9ykNfeYsx1R\" alt=\"\"\/><\/figure>\n\n\n\n<p>The World Wide Web Consortium (W3C), the international community that develops accessibility standards for the web, says:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Line spacing should be at least a <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/text-spacing.html\" target=\"_blank\" rel=\"noreferrer noopener\">space-and-a-half<\/a> within paragraphs. So around 150 percent or 1.5 times the font size.<\/li><li>Spacing following paragraphs should be at least two times the font size.<\/li><li>Spacing between letters should be at least 0.12 times the font size.<\/li><li>Spacing between words should be at least 0.16 times the font size.\u00a0<\/li><\/ul>\n\n\n\n<p>These are just guidelines, not laws, and the W3C can&#8217;t <em>make <\/em>UX designers do anything, but accessible design principles provide a moral obligation for design teams. Some people with disabilities still can&#8217;t engage with websites and apps for years, and the shift towards more accessible design all starts with UX designers like you. So be the change you want to see in the world.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-line-spacing-makes-or-breaks-ux-design\"><strong>HTML line spacing makes or breaks UX design<\/strong><\/h2>\n\n\n\n<p>HMTL line spacing might not be noticeable to users (unless it&#8217;s really bad), but this subtle style element drives the success of your prototypes and completed designs. Discuss this issue with your team at the start of a UX design project and consider the client&#8217;s brief, style guide or design system, demographic, and all the other design elements you plan to implement. Nothing&#8217;s set in stone: You can always adjust line spacing later on.&nbsp;<\/p>\n\n\n\n<p>Always consider other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-game-typekit-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography<\/a> elements. Font size, text length, and character spacing are all linked to line height, and it&#8217;s your job to get these components correct. As a general rule:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Larger fonts look better with less line spacing. Especially headers.&nbsp;<\/li><li>Smaller text sizes work best with larger line-heights.<\/li><li>Wider paragraphs work best with more spacing.<\/li><li>So do longer paragraphs.<\/li><\/ul>\n\n\n\n<p>A recent <a href=\"https:\/\/www.researchgate.net\/publication\/301935601_Make_It_Big_The_Effect_of_Font_Size_and_Line_Spacing_on_Online_Readability\" target=\"_blank\" rel=\"noreferrer noopener\">eye-tracking experiment<\/a> saw 104 people read text on Wikipedia, where the researchers changed the line spacing of the text from 0.8 to 1.8 to measure readability and comprehension. The results? Line spacing at the two extremes, 0.8 and 1.8, impaired readability, suggesting text-heavy websites should use more conservative spacing. Adjusting your spacing to somewhere toward the middle of this range proves the most successful. Again, there&#8217;s an argument for line spacing of around 1.3-1.5, but it depends on context.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-summary\"><strong>Summary<\/strong><\/h2>\n\n\n\n<p>While there&#8217;s no golden ratio for HTML line spacing, consider readability, accessibility, and overall aesthetics when incorporating text into your next prototype. Few UX designers think about this styling element, so you&#8217;ll be on the front lines of a design revolution.\u00a0Discover the perfect line and character spacing on UXPin, the No.1 UI design and prototyping tool that turbocharges typography and streamlines styling. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try it for free<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML line spacing \u2014 the vertical space between two lines of text within a paragraph \u2014 isn&#8217;t the most exciting thing in the UX design world, but it matters more than you think. This styling element involves Experience Strategy and Interaction Design \u2014 two of the four UX design quadrants used to create an incredible<\/p>\n","protected":false},"author":3,"featured_media":30869,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[],"class_list":["post-30864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ux-design"],"yoast_title":"","yoast_metadesc":"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML Line Spacing: The Fine Line Between Good and Bad UX Design | UXPin<\/title>\n<meta name=\"description\" content=\"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Line Spacing: The Fine Line Between Good and Bad UX Design\" \/>\n<meta property=\"og:description\" content=\"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-13T08:30:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-13T08:30:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"HTML Line Spacing: The Fine Line Between Good and Bad UX Design\",\"datePublished\":\"2021-07-13T08:30:52+00:00\",\"dateModified\":\"2021-07-13T08:30:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/\"},\"wordCount\":934,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-Line-Spacing.png\",\"articleSection\":[\"Blog\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/\",\"name\":\"HTML Line Spacing: The Fine Line Between Good and Bad UX Design | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-Line-Spacing.png\",\"datePublished\":\"2021-07-13T08:30:52+00:00\",\"dateModified\":\"2021-07-13T08:30:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-Line-Spacing.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-Line-Spacing.png\",\"width\":1200,\"height\":600,\"caption\":\"HTML Line Spacing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/hmtl-line-spacing-good-bad\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Line Spacing: The Fine Line Between Good and Bad UX Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML Line Spacing: The Fine Line Between Good and Bad UX Design | UXPin","description":"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/","og_locale":"en_US","og_type":"article","og_title":"HTML Line Spacing: The Fine Line Between Good and Bad UX Design","og_description":"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/","og_site_name":"Studio by UXPin","article_published_time":"2021-07-13T08:30:52+00:00","article_modified_time":"2021-07-13T08:30:54+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"HTML Line Spacing: The Fine Line Between Good and Bad UX Design","datePublished":"2021-07-13T08:30:52+00:00","dateModified":"2021-07-13T08:30:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/"},"wordCount":934,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png","articleSection":["Blog","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/","name":"HTML Line Spacing: The Fine Line Between Good and Bad UX Design | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png","datePublished":"2021-07-13T08:30:52+00:00","dateModified":"2021-07-13T08:30:54+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/HTML-Line-Spacing.png","width":1200,"height":600,"caption":"HTML Line Spacing"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"HTML Line Spacing: The Fine Line Between Good and Bad UX Design"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=30864"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30864\/revisions"}],"predecessor-version":[{"id":30872,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30864\/revisions\/30872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/30869"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=30864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=30864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=30864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}