9.10. Adjusting font sizes
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.
If you do things right, any user will be able to increase the font sizes on your Web page for readability. You'll see how in a couple of pages.
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.
font-size: 14px;
The px must come right after the number of pixels. You can't
have a space in between In CSS you
specify pixels with a number followed by "px". This says that the font-size
should be 14 pixels high.
body { Here's how you'd specify
font-size within a body rule.
font-size: 14px;
}
h i p
14 pixels
Setting a font to 14 pixels high means that there will be 14 pixels
between the lowest part of the letters and the highest.
|
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 % font size, it is relative to the parent element. Let's check out how that works...
body { Here we've specified a body font size in pixels, and a level one heading as 150%.
font-size: 14px;
}
h1 {
font-size: 150%;
}
|
You can also specify font sizes using "em", which, like percentage, is another relative unit of measure. With em you don't specify a percentage; instead you specify a scaling factor. Here's how you use em:
Don't mix this up with the <em> element!
font-size: 1.2em;
This says that the font size should be scaled by 1.2.
Say you use this measurement to specify the size of an <h2> heading. Your <h2> headings will be 1.2 times the font size of the parent element, which in this case is 1.2 times 14px, which is about 17px.
It's actually 16.8, but most browsers will round it up to 17.
body {
font-size: 14px;
}h1 {
font-size: 150%;
}h2 {
font-size: 1.2em;
}
body is 14px
h1 is 21px Here's the <h1>
specified by a percentage. p is 14px h2 is 17px And here's the <h2> specified by 1.2em.
|
If we draw a little document tree, you can see that <h1> inherits from <body>, so its font is going to be 150% of the body's font size.
body is 14px
h1 is 21px The
<h1> heading is 150% of the <body> font size, which
is 21px. p is 14px Since
we didn't specify a font size for <p>, it inherits the <body> font size
of 14px.
|
There's one more way to specify font sizes: keywords. You can specify a font size as xx-small, x-small, small, medium, large, x-large, or xx-large and the browser will translate these keywords into pixel values using defaults that are defined in the browser.
xx-small This is typically how the various keyword sizes relate
to one another. Each size is about 20% larger than the previous size and small is
usually defined to be around 12 pixels in height. Keep in mind, however, that the keywords
aren't always defined the same way in every browser, and that users can redefine them if
they wan
x-small
small
medium
large
x-largex
x-large
body {
font-size
: In most browsers this will result
in the body text being about 12 pixels. small;
}
|
|
No comments:
Post a Comment