Let's add some styling for font sizes to the CSS declarations we've set up for our font families.
- In
style.css, edit the font styling so it reads as follows:/*------------------TYPOGRAPHY -------------------*/ /* Set font stacks here Assign default colors only. Otherwise color is handled at BOTTOM of sheet. */ body{ font-family: 'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 0.9em; color: #333; } h1, h2, h3, h4, h5, h6 { font-weight: 100; margin: 20px 0 10px 0; } h1, h3, h5{ font-family: Helvetica, Arial, sans-serif; line-height: 120%; color: #666; } h2, h4, h6{ font-family: 'Helvetica Neue', Helvetica, 'Arial Condensed', Arial, sans-serif; line-height: 110%; color: #999; } a { font-family: Helvetica, Arial, sans-serif; font-size: 100%; color: #666; font-weight: 100; text-decoration: none; } pre, code{ font-family: Courier, monospace; font-size: 100%; margin-bottom:10px; } - Now add some more specific height styling for some other elements. Add the following code below the code you've just added:
h1 { font-size: 280%; font-weight: 600; } h2 { font-size: 220%; border-bottom: 1px solid #ccc; padding-bottom: 10px; } h3 { font-size: 180%; } h4{ font-size: 200%; color: #999 } h5{ font-size: 115%; } h6{ font-size: 100%; } p { line-height: 150%; margin-bottom: 170%; } - Save your stylesheet.
We added some additional styling for font sizing. You'll notice that we've also included some styling for margins as well, to give our text some extra space where it's needed.
As you can see, in the previous code examples, the only em size we used was in the body rule. The rest of our header, paragraph, and other typography-based rules rely on increasing or decreasing the font size based on percentages. 90% = 0.9em and so 90% would size down the font a tad, while 280% sizes the font up considerably. Now, if our client asks to just "bump down" (or up) the size on everything "a little" all we have to do is change the main em size in the body rule. Everything else will size up or down, relatively, based on the percentage we assigned it. Easy!
We then moved on to using percentages to help us with the line-height property and also made sure our a href links stand out with a different font-family, yet still have the familiar underline appear on :hover.
Using ems and percentages in this way is also far better for accessibility than using pixels, as it means that, if a user has set their browser to resize text, this will be applied across our theme, and not be overridden by any pixel-based text styling.
The final stage in styling our text is to deal with text we want to hide from browsers with CSS turned on, while making them visible to screen readers and search engine bots.