Font sizes are an important part of Web design because they are the first hurdle to overcome in creating a page that is readable by your customers. Fonts that are too large take up too much space on the page and are as unreadable as ant-sized tiny fonts.
Define Font Sizes in Four Ways
- Absolute sizes define the size of the font according to the sizes defined in the user-agent. Absolute font sizes include: xx-small, x-small, small, medium (the default), large, x-large, and xx-large.
- Relative sizes define the size of the font relative to the parent element. Relative fonts are either the same size as the parent, larger, or smaller.
- Lengths specify a font size that has an absolute measurement of some kind. Lengths include relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc).
- Percentages specify an absolute font size relative to the parent element's font size.
Font Sizes and Accessibility
When choosing font sizes remember to keep accessibility in mind. As a 22-year-old Web designer, you might have better eyesight than your site's 52-year-old demographic. Making fonts tiny may seem to make the page more visually interesting, but often your readers will just ignore what they can't read and move on.
The best way to make your font sizes accessible is to design in ems. Ems allow your fonts to scale up or down as your readers change their font sizes in the browser. And while you might not want them to change their font size, the fact is that they will, so you might as well design for it.