Let's add some styling for font sizes to the CSS declarations we've set up for our font families.
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; }
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%; }
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.