Web design development. Everything about Line Heights,Font Styles

More correctly, we are dealing with line heights: the distance between adjacent lines of text, measured baseline to baseline. Traditional printers called this amount the "leading" (pronounced "ledding"). Single-spaced text has a line-height just slightly larger than the font size, while double- or triple-spaced text increases the leading considerably.

Consider these styles:

  .single {line-height: 14pt;}

  .double {line-height: 24pt;}

  .triple {line-height: 36pt;}

Assuming your text is 12 points high, using these styles will create single-, double-, and triple-spaced text:

cereal for breakfast promotes a healthy mind.

cereal for breakfast promotes a healthy mind..

If your browser's text is around 12 points, you should see the appropriate line spacing.

But what if your text is 20 points to begin with? You need to use a percentage line height. Percentage line heights are computed based on the size of the surrounding text, so things always look right no matter how the text is sized. You could create more useful spacing styles by defining.

.single {line-height: 120%;}

.double {line-height: 200%;}

.triple {line-height: 300%;}

Notice that single-spaced lines use a line height that is a small percentage larger than the actual text, while double- and triple-spacing use true multiples of the text height. You can experiment with these values until you get just the line height you need.

There is nothing that says your line height needs to be larger than the text height. Interesting effects can be achieved by compressing text vertically, forcing one line to overlap the next. For example:

.half {line-height: 50%;}

creates a line with half-spacing, giving this effect:

cereal for breakfast promotes a healthy mind.

Obviously, you wouldn't want to do this for a whole page of text, but it can make for an interesting effect.

Choose your style

Font styles are far more mundane than personal styles. When HTML style sheets talk about font style, they are really addressing the slant of the type face, creating a font we often call "italic" or "oblique." these are the values you can use with the font-style property.

Keep in mind that for the vast majority of fonts, oblique and italic are identical. For a small number of type faces, the oblique version is less angled than the italic version. Very few people really care about the difference, and you can generally use these two values interchangeably. You can also use normal as a value to get plain, straight text.

<< BACK

Dealing With Font Heights: Line Heights and Font Styles