HTML and CSS Reference
In-Depth Information
Adjusting font sizes
If you
do thi
ngs righ
t, any
user w
ill be a
ble to i
ncrease
the fo
nt size
s on yo
ur web
page f
or read
ability
. You'll
see ho
w in a
couple o
f page
s.
Now that Tony has a new set of fonts, we need to work on those font sizes, as most
people find the default sizes of the headings a bit large, at least aesthetically. To do
that, you need to know how to specify font sizes, and there are actually a few ways
to do this. Let's take a look at some ways to specify
font-size,
and then we'll talk
about how best to specify font size so they are consistent and user friendly.
You can specify your font size in pixels, just like the pixel dimensions you used
for images in Chapter 5. When you specify font size in pixels, you're telling
the browser how many pixels tall the letters should be.
In CSS
, you sp
ecify p
ixels wi
th
a numb
er follo
wed by
“px”.
This sa
ys that
the fo
nt-siz
e
should
be 14 p
ixels h
igh.
font-size: 14px;
The p
x must
come r
ight af
ter the
numbe
r of
pixels
. You ca
n't hav
e a spa
ce in be
tween.
h i p
1
4 pixel
s
He
re's ho
w you'd
specif
y
fon
t-size
withi
n a bod
y rule
.
body {
font-size: 14px;
}
%
Unlike pixels, which tell the font exactly how big it should be in pixels, a font size specified
as a percentage tells the font how big it should be relative to another font size. So,
font-size: 150%;
says that the font size should be 150%
of another font size. But which other
font size? Well, since
font-size
is
a property that is inherited from the
parent element, when you specify a
percentage font size, it is relative to
the parent element. Let's check out
how that works…
body {
font-size: 14px;
}
h1 {
font-size: 150%;
}
