HTML and CSS Reference
In-Depth Information
Line Height
Line height, the distance between two lines of text (often referred to as leading) is declared
using the line-height property. The line-height property accepts all general
length values, which we covered in Lesson 3 , Getting to Know CSS .”
The best practice for legibility is to set the line-height to around one and a half
times our font-size property value. This could be quickly accomplished by setting the
line-height to 150% , or just 1.5 . However, if we're working with a baseline grid,
having a little more control over our line-height using pixels may be preferable.
Looking at the CSS, we're setting a line-height of 22 pixels within the <body> ele-
ment, thus placing 22 pixels between each line of text:
1. body {
2. line-height: 22px;
3. }
Line height may also be used to vertically center a single line of text within an element.
Using the same property value for the line-height and height properties will vertic-
ally center the text:
1. .btn {
2. height: 22px;
3. line-height: 22px;
4. }
This technique may be seen with buttons, alert messages, and other single-line text blocks.
Shorthand Font Properties
All of the font -based properties listed earlier may be combined and rolled into one font
property and shorthand value. The font property can accept multiple font -based prop-
erty values. The order of these property values should be as follows, from left to right:
font-style , font-variant , font-weight , font-size , line-height , and
font-family .
As a shorthand value, these property values are listed from left to right without the use of
commas (except for font names, as the font-family property value uses commas). A
forward slash, / , separator is needed between the font-size and line-height prop-
erty values.
When using this shorthand value, every property value is optional except the font-size
and font-family property values. That said, we can include only the font-size and
font-family property values in the shorthand value if we wish.
Search WWH ::

Custom Search