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