maintaining vertical font space using CSS

Question

Im using Lucida Grande font for my site and when I put the font-size large, say 30px, the fonts in the two adjacent lines overlap upto some extent. How can I put a gap between the two lines using CSS?

Answer 1

Use the line-height property. Something like

p {
  line-height: 1.3em;
}

Should do. This will give you line height 1.3 times the font-size you set. You probably have this set to a fixed number, like 25px in another ruleset or stylesheet, thus when you increase the font-size the line height does not increase with it.

Answer 2

You probably have a fixed line-height set. Change it to be either relative (e.g., line-height: 1.3em;) or fixed, but larger (30px).

Answer 3

/*
user same line-height as as font-size;
*/

.product{
 font-size:30px;
 line-height:30px;
}

/*
its always a better practice to define line-height in body if you are going to use same font size across or as standard
*/