How to Fix Those “Squishy” Headlines
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, ‘Trebuchet MS’, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 10px 0px 0px 0px;
}
To increase the height of the line, I added “line-height: 28px;” 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.
#content h1 {
font-size: 25px;
line-height: 28px;
color:#036;
background: transparent;
font-family: Verdana, ‘Trebuchet MS’, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 10px 0px 0px 0px;
}
Alternatively, you can set the line height using a number value, e.g. “line-height: 1.2;” 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… and so on and so forth.
Here’s how the H1 Heading looked when I set the line height to 1.2.
The other alternative is to use a percent value, i.e. 100% is standard line height and 200% would double the size.
OK, now go fix your headlines! 
Want more info?
Rosalind Gardner is a Super Affiliate blogger, author, speaker, and Internet marketing consultant.
If you enjoyed this article and want to be notified the next time Rosalind writes something, subscribe to her RSS feed or the No-Hype, No-BS, No Spam NPT newsletter. You can also follow her on Twitter and Facebook. Thanks for visiting!
Related Posts
- Spinning Your Wheels?
- Recommended Web Site Hosting Services
- Review: The Insider Secrets to Selling on eBay
- Poll: What is Your Biggest Internet Marketing Challenge?
- Important Message re StormPay and PayDotCom.com
Hi Rosalind,
I’m so glad you posted this. I had some “squishy” headlines on my site and couldn’t figure out how to fix the problem. I can’t believe how easy you made it.
Thanks again and best regards,
Robert
Hi Robert,
Glad that it helped!
Cheers,
Ros
Ros,
That was refreshingly helpful for future use. In fact, please keep those coming. My journey has been filled with self taught applications, and so I know I am not the only one.
Thanks!
Kit
This is why I have liked you for so many years even though I have never met you!
Though not entirely altruistic, you truly do try to help EVERYONE!
This, more than anything else,is probably more of a major factor in your success than even your technical and marketing expertise…
Ah Michael, that’s a sweet thing to say, thank you! One of these days I’ll have to take that detour off Hwy 1.
Cheers,
Ros
Thank you, Rosalind. I recently created a website using Wordpress on Bluehost. My biggest problem was getting Contact Form 7 to work. It took me a week to finally figure it out. I don’t need this headline info yet, but I’m saving it in case I ever do.
Karen