Tags for this article: cascading style sheets, css line height property, CSS Line Spacing, css property, css value, tutorial
CSS line spacing is obtained by using CSS-line height property. This has five different values
Normal – a browser will determine the value of the line spacing that will be related to font size. Usually, this is same as that of the font size or it is slightly larger
Inherit – line spacing must be taken from parent’s elements line spacing. Therefore, if you set up the line-height of the body tag to about 30% larger than that of the font size and paragraphs tags inside will inherit and then they will have line height of 30% larger than that of the font-size as well.
A number – if these line height values doesn’t have u nit of measure, then would be considered as the font size for line height.
A length – if these line height values has unit of measure then that will be the exact amount of space, which should be there between the lines.
A percentage – if line height is percentage, then that percentage would be the font size percentage. Therefore, if a line height were 125% then it would be 25% larger than that of the font size.
Which is the value that should be used for CSS Line Spacing?
In the majority of the cases, one of the best choices for the line spacing is to set up the default spacing or normal. The default or normal are generally readable and it doesn’t require any special things to be done. However, if the line space is changed, it gives different look to the text.
If the font size is defined as the percentages or ems, then the line height should be defined in the above stated way.
Set up the height for the print style sheets along with a point value. Print measure is the point and the font sizes should be in points.
Few people do not make use of number choice, as it is confusing to people. Most of the people think that number is perfect size and because of that they make it large.
How much space must be used for the line spacing?
As it is mentioned above, it is always recommended to use the default size in line spacing and if you want to change the line spacing, you should have some specific reasons to do. There are different affects while changing the line spacing
It is difficult to read the text that is too tight together. However, the mood of the text will be affected by the small line spaces. If the entire text is crunched altogether, then it is able to sense the text tenser or seem darker.
It will again be difficult to read the text, which is farther apart. However, if there are wide line spaces, then the text seems to flow.
Changing the line space will be able to make the text otherwise would not fit in the space be compact or would take large space in the designs.
If you want to see what will happen in the various line spacing options, you have to check the examples of CSS Line Spacing.