I love to use Google Fonts for my Ataria Island website, but the one major problem has been extra padding or margin around the fonts, especially on the larger font sizes. It seems like at times there is 10px, 12px, 15px of extra space on top and on the bottom of the text. I’ve tried to fix it by putting the text in <span> tags (instead of <p>) and adding ‘padding: 0px;’ and ‘margin: 0px’ to the text’s CSS but in most cases I get no change. This leaves me scratching my head wondering ‘what is up with this?‘
On my “Best Restaurants” page I had the ideal font picked out to use for the title text “Macross Eats! The Best Restaurants on Ataria Island,” but that same font was giving me all kinds of spacing problems. I wanted ‘Macross Eats!‘ on one line and then ‘The Best Restaurants on Ataria Island‘ on the second line, but there was a gigantic amount of space between the two lines. I was defeated by this issue in the past, at least on one occasion I gave up on my perfect font because I couldn’t reduce the white space. I was determined this time to figure it out and save my font.
My first attempt to fix it was by setting both the padding and margin to zero, unfortunately just as before nothing changed. Next I went old school and tried to put the text inside a table with two rows, that didn’t get me anywhere. Fortunately I had a light bulb moment and I added the line-height property to the CSS for the text.
Line-height did the trick! I had to fool around with different line-height values to get the perfect combination, but that didn’t take long. I’ve used line-height before, but only to improve the appearance of a paragraph, never to actually solve a problem. I’m happy that I was able to overcome this small issue and add a new tool to my problem-solving toolbox.