Typography
Font sizes and colors:
Item |
Font |
Size |
Color |
Class |
|
|---|---|---|---|---|---|
| 1. | Side menu navigation | Arial, Helvetica, sans-serif | 1.07em bold (What is em?) | #FFFFFF | #navigation ul |
| 2. | Highlight heading | Arial, Helvetica, sans-serif | 1.07em | #FFCC00 | #navigation h2 |
| 3. | Highlight links | Arial, Helvetica, sans-serif | 0.99em bold | #FFFFFF | #navigation .highlights ul |
| 4. | Facts heading | Arial, Helvetica, sans-serif | 1em | #FFCC00 | #navigation .facts h2 |
| 5. | Facts text | Arial, Helvetica, sans-serif | 0.85em | #A0B7E0 | #navigation .facts p |
| 6. | Toolbar text | Arial, Helvetica, sans-serif | 1em | #FFFFFF | .subNav-container a:link |
| 7. | Page title or heading (H1) | Arial, Helvetica, sans-serif | 1.99em | #990000 | h1 |
| 8. | Introduction text | Arial, Helvetica, sans-serif | 1.24em | #000000 | #content p.intro |
| 9. | Subtitle (H2) | Arial, Helvetica, sans-serif | 1.24 bold | #000000 | h2 |
| 10. | Paragraph text | Arial, Helvetica, sans-serif | 1.07em | #000000 | #content p |
| 11. | Spotlight heading | Arial, Helvetica, sans-serif | 1.07em bold | #990000 | #spotlight h2 |
| 12. | Spotlight links/text | Arial, Helvetica, sans-serif | 0.85em | #666666 | three-column #rightColumn #spotlight |
| 13. | Footer text | Arial, Helvetica, sans-serif | 0.85em | #666666 | #footer |
Helpful Tips
em:
The em unit displays font size based on the size set in the user's browser preferences. For example, if the user has specified 12 point as their default size, then the em unit is based off of 12 point type. This measurement allows the user to scale the type as needed for their legibility, and you still control the hierarchy of the type because the size is relative.
For example, if you specify an em unit of 1 (1em) and the user's default font size is 12 point, then the font will display in 12 point. However, if the user changes their default font size to 16 point, the font will now display 16 point because the 1em is based of the user's default setting.
Em size can also be specified as decimals to get larger or smaller fonts. For example, if the user has 14 point as their default setting, and you specify 0.5em, the font will display at 7 point or half of the default setting.
Source: Designers Toolbox, http://www.designerstoolbox.com/online/font.php
Additional tips on font size can be found at http://www.w3.org/QA/Tips/font-size.
