Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Font-size

There are many ways to control font size with CSS. Keyword, px, em, %, and pt.

Keywords

The "Keywords" xx-small, x-small, small, medium, large, x-large, xx-large, smaller, and larger can control the size of a font.

The first 7 do what you'd think they would do. The last 2, "smaller", and "larger" make the font smaller or larger based on it's inherent font size.

For example, if you set the font-size of the BODY to "large", and set a DIV within the body to "smaller", then the DIVs font-size would be medium (one smaller than the body).

Eg. font-size: medium;

PX

PX (pixel) is the most common way (and offers the most control) to change the font size. Setting a font's pixel size does literally that - controls the height of the font in pixels.

Eg. font-size: 12px;

EM

1 em is equal to the current font-size of the element. So, if the inherent font-size of an element is 12px, and it's set to 2em, then it would be 24px tall.

EMs are often used for sites that need to allow all the fonts to zoom in or out, because if you change the body's font-size, the fonts set to EM will change as well.

A common way to use EMs is to set the body to 62.5% because if the default browser font-size is 16, this makes your new default 10px. From there, if you want an 18px font, you can use 1.8em - 14px font = 1.4em ... etc.

Eg. font-size: 1.5em;

Percentage %

Percent works like EM, where 200% = 2em. So if the inherent font-size is 12px, and you set the percent to 150%, your new font-size would be 18px;

Eg. font-size: 150%;

Points pt

Points (pt) are used for print only. 72pt = 1 inch. Pixels are accurate for screens, points are accurate for printing.

Eg. font-size: 72pt;

[BACK to RESOURCES]