{"id":2450,"date":"2009-05-20T06:21:57","date_gmt":"2009-05-20T15:21:57","guid":{"rendered":"http:\/\/www.rosalindgardner.com\/blog\/?p=2450"},"modified":"2022-11-24T16:37:23","modified_gmt":"2022-11-25T00:37:23","slug":"how-to-fix-those-squishy-headlines","status":"publish","type":"post","link":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/","title":{"rendered":"How to Fix Those &#8220;Squishy&#8221; Headlines"},"content":{"rendered":"<p>Here the CSS trick for fixing those squished headlines on your blog such as the H1 Heading shown in the screenshot below.<\/p>\n<div align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif\" width=\"564\" height=\"186\" alt=\"Squished Headline\"  border=\"0\"  vspace=\"5\"\/><\/div>\n<p>The original code in the CSS (cascading style sheet) for that H1 was as follows:<\/p>\n<p>#content h1 {<br \/>\n\tfont-size: 25px;<br \/>\n\tcolor:#036;<br \/>\n\tbackground: transparent;<br \/>\n\tfont-family: Verdana, &#8216;Trebuchet MS', Arial, Helvetica, sans-serif;<br \/>\n\tfont-weight: bold;<br \/>\n\tmargin: 0px 0px 5px 0px;<br \/>\n\tpadding: 10px 0px 0px 0px;<br \/>\n\t}<\/p>\n<p>To increase the height of the line, I added &#8220;line-height: 28px;&#8221; as shown in bold in the code below. Because the font size is 25px, I simply added 3 pixels to the line height to put some space in between the lines. <\/p>\n<p>#content h1 {<br \/>\n\tfont-size: 25px;<br \/>\n\t<strong>line-height: 28px;<\/strong><br \/>\n\tcolor:#036;<br \/>\n\tbackground: transparent;<br \/>\n\tfont-family: Verdana, &#8216;Trebuchet MS', Arial, Helvetica, sans-serif;<br \/>\n\tfont-weight: bold;<br \/>\n\tmargin: 0px 0px 5px 0px;<br \/>\n\tpadding: 10px 0px 0px 0px;<br \/>\n\t}<\/p>\n<p>Alternatively, you can set the line height using a number value, e.g. &#8220;<strong>line-height: 1.2;<\/strong>&#8221; The standard line-height is 1, so 1.2 increases the line height. You can also shrink a line height by half as well by using the value 0.5&#8230; and so on and so forth.<\/p>\n<p>Here's how the H1 Heading looked when I set the line height to 1.2.<\/p>\n<div align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/farm4.static.flickr.com\/3415\/3412515154_e7f2267893_o.gif\" width=\"566\" height=\"269\"  alt=\"Unsquished Headline\" border=\"0\" vspace=\"5\"\/><\/div>\n<p>The other alternative is to use a percent value, i.e. 100% is standard line height and 200% would double the size.<\/p>\n<p>OK, now go fix your headlines! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here the CSS trick for fixing those squished headlines on your blog such as the H1 Heading shown in the screenshot below. The original code in the CSS (cascading style sheet) for that H1 was as follows: #content h1 { font-size: 25px; color:#036; background: transparent; font-family: Verdana, &#8216;Trebuchet MS&#8217;, Arial, Helvetica, sans-serif; font-weight: bold; margin: [&hellip;]<\/p>\n","protected":false},"author":577,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1222],"tags":[471,980,487,535],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Fix Those &quot;Squishy&quot; Headlines - RosalindGardner.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Fix Those &quot;Squishy&quot; Headlines - RosalindGardner.com\" \/>\n<meta property=\"og:description\" content=\"Here the CSS trick for fixing those squished headlines on your blog such as the H1 Heading shown in the screenshot below. The original code in the CSS (cascading style sheet) for that H1 was as follows: #content h1 { font-size: 25px; color:#036; background: transparent; font-family: Verdana, &#8216;Trebuchet MS&#039;, Arial, Helvetica, sans-serif; font-weight: bold; margin: [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/\" \/>\n<meta property=\"og:site_name\" content=\"RosalindGardner.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RosalindGardnerOnline?ref=hl\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/RosalindGardnerOnline\" \/>\n<meta property=\"article:published_time\" content=\"2009-05-20T15:21:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-25T00:37:23+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif\" \/>\n<meta name=\"author\" content=\"Rosalind Gardner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rosalindgardner\" \/>\n<meta name=\"twitter:site\" content=\"@rosalindgardner\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rosalind Gardner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/\",\"url\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/\",\"name\":\"How to Fix Those \\\"Squishy\\\" Headlines - RosalindGardner.com\",\"isPartOf\":{\"@id\":\"https:\/\/rosalindgardner.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif\",\"datePublished\":\"2009-05-20T15:21:57+00:00\",\"dateModified\":\"2022-11-25T00:37:23+00:00\",\"author\":{\"@id\":\"https:\/\/rosalindgardner.com\/blog\/#\/schema\/person\/e1a2787f4571b58c05f7c8cd6a98fa9f\"},\"breadcrumb\":{\"@id\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#primaryimage\",\"url\":\"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif\",\"contentUrl\":\"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rosalindgardner.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Fix Those &#8220;Squishy&#8221; Headlines\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rosalindgardner.com\/blog\/#website\",\"url\":\"https:\/\/rosalindgardner.com\/blog\/\",\"name\":\"RosalindGardner.com\",\"description\":\"Learn Blogging &amp; Affiliate Marketing with Rosalind Gardner\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rosalindgardner.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/rosalindgardner.com\/blog\/#\/schema\/person\/e1a2787f4571b58c05f7c8cd6a98fa9f\",\"name\":\"Rosalind Gardner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rosalindgardner.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/76d7f9fe48227e9a6f4b6c1d3f786941?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/76d7f9fe48227e9a6f4b6c1d3f786941?s=96&d=mm&r=g\",\"caption\":\"Rosalind Gardner\"},\"description\":\"Super affiliate, blogger, and speaker, Rosalind is best known for her affiliate marketing training in the Super Affiliate Handbook: How I made $436,797 in One Year Selling Other Peoples' Stuff Online. You can connect with her on Facebook.\",\"sameAs\":[\"https:\/\/rosalindgardner.com\/blog\/sah\",\"https:\/\/www.facebook.com\/RosalindGardnerOnline\",\"https:\/\/www.pinterest.ca\/rosalindgardner\/\",\"https:\/\/x.com\/rosalindgardner\",\"https:\/\/www.youtube.com\/user\/rosalindgardner\"],\"url\":\"https:\/\/rosalindgardner.com\/blog\/author\/rosalindgardner\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Fix Those \"Squishy\" Headlines - RosalindGardner.com","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:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/","og_locale":"en_US","og_type":"article","og_title":"How to Fix Those \"Squishy\" Headlines - RosalindGardner.com","og_description":"Here the CSS trick for fixing those squished headlines on your blog such as the H1 Heading shown in the screenshot below. The original code in the CSS (cascading style sheet) for that H1 was as follows: #content h1 { font-size: 25px; color:#036; background: transparent; font-family: Verdana, &#8216;Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: bold; margin: [&hellip;]","og_url":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/","og_site_name":"RosalindGardner.com","article_publisher":"https:\/\/www.facebook.com\/RosalindGardnerOnline?ref=hl","article_author":"https:\/\/www.facebook.com\/RosalindGardnerOnline","article_published_time":"2009-05-20T15:21:57+00:00","article_modified_time":"2022-11-25T00:37:23+00:00","og_image":[{"url":"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif"}],"author":"Rosalind Gardner","twitter_card":"summary_large_image","twitter_creator":"@rosalindgardner","twitter_site":"@rosalindgardner","twitter_misc":{"Written by":"Rosalind Gardner","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/","url":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/","name":"How to Fix Those \"Squishy\" Headlines - RosalindGardner.com","isPartOf":{"@id":"https:\/\/rosalindgardner.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#primaryimage"},"image":{"@id":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#primaryimage"},"thumbnailUrl":"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif","datePublished":"2009-05-20T15:21:57+00:00","dateModified":"2022-11-25T00:37:23+00:00","author":{"@id":"https:\/\/rosalindgardner.com\/blog\/#\/schema\/person\/e1a2787f4571b58c05f7c8cd6a98fa9f"},"breadcrumb":{"@id":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#primaryimage","url":"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif","contentUrl":"http:\/\/farm4.static.flickr.com\/3354\/3412515130_d65f72f3bc_o.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/rosalindgardner.com\/blog\/how-to-fix-those-squishy-headlines\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rosalindgardner.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Fix Those &#8220;Squishy&#8221; Headlines"}]},{"@type":"WebSite","@id":"https:\/\/rosalindgardner.com\/blog\/#website","url":"https:\/\/rosalindgardner.com\/blog\/","name":"RosalindGardner.com","description":"Learn Blogging &amp; Affiliate Marketing with Rosalind Gardner","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rosalindgardner.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rosalindgardner.com\/blog\/#\/schema\/person\/e1a2787f4571b58c05f7c8cd6a98fa9f","name":"Rosalind Gardner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rosalindgardner.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/76d7f9fe48227e9a6f4b6c1d3f786941?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/76d7f9fe48227e9a6f4b6c1d3f786941?s=96&d=mm&r=g","caption":"Rosalind Gardner"},"description":"Super affiliate, blogger, and speaker, Rosalind is best known for her affiliate marketing training in the Super Affiliate Handbook: How I made $436,797 in One Year Selling Other Peoples' Stuff Online. You can connect with her on Facebook.","sameAs":["https:\/\/rosalindgardner.com\/blog\/sah","https:\/\/www.facebook.com\/RosalindGardnerOnline","https:\/\/www.pinterest.ca\/rosalindgardner\/","https:\/\/x.com\/rosalindgardner","https:\/\/www.youtube.com\/user\/rosalindgardner"],"url":"https:\/\/rosalindgardner.com\/blog\/author\/rosalindgardner\/"}]}},"_links":{"self":[{"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/posts\/2450"}],"collection":[{"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/users\/577"}],"replies":[{"embeddable":true,"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/comments?post=2450"}],"version-history":[{"count":0,"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/posts\/2450\/revisions"}],"wp:attachment":[{"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/media?parent=2450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/categories?post=2450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rosalindgardner.com\/blog\/wp-json\/wp\/v2\/tags?post=2450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}