Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

W3C Says...
CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. The units have ... everything to do with the output media: screen or paper. In general you would use a different set of units for display on screen than for printing on paper. Source

Former size option, keyword, is deprecated. There are additional units of measure: em, cm, mm, in, pt, pc, but they are not recommended. You can read, in part, what the W3C has to say about it in the "W3C Says..." blurb. If you don't know, the W3C is the ruling body over the code rules.

It's important to note that font sizes cascade down from parent elements to child elements, meaning child elements inherit the font size unless otherwise specified.

You can code the font size into any text element: divisions, paragraphs, etc. I'll show samples using various elements and either inline or external styles.

Using pixels

body {font-size: 16px;}

Using ems

h1 {font-size: 3em;}

Using rems

p {font-size: 1.2rem;}

Using percentage

Using vw

Using calc

h2 {font-size: calc(14px + 2vw);}

Three quick notes:

In addition to the vw (viewport width) there's also hw (viewport height) but it's seldom used.
In the last calc example, the font size would be based on a calculation of 14 pixels plus 2% of the viewport width.
Many recommend using relative units for font sizes for better responsiveness and accessibility across different devices and screen sizes. I guess I'm old school still, I haven't moved away from pixels.

You'll probably get along fine without knowing the stuff below, but I offer it as supplemental knowledge for those interested.

What the Units of Length Mean

Pixel: Setting the font size in px value is a good choice when you need pixel accuracy. A px value is static. This is operating system independent and a cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The rule-of-thumb is that there are 96 pixels per inch.
EM: The actual size of the em depends on the font, how the browser renders it, and the resolution of the screen. An em is scalable and relative to the parent element's font size. For example, if the font size of the document is 16px, then 1em is 16px, 2em is 32px, and 0.5em is 8px. An em is useful for web documents because it can adapt to different devices and screen sizes.
REM: Rem (short for "root-em") units dictate an element’s font size relative to the size of the root element. Most browsers use a default font size of 16px (pixels). So, if the root element is 16px, an element with the value 1.5rem will equal 24px. Rem units are useful for scaling CSS elements in relation to the size of the root element.
Percentage: The percentage is relative to the parent element, which is the root element if there have been no other changes. Most browsers use a default font size of 16px (pixels). So a font size of 75% would be 12 pixels tall.
VW: The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window. The viewport is the browser window size. 1vw = 1% of viewport width. This is a good choice for scalability, but requires testing to ensure usability.
Calc: The calc () function is used to calculate a ratio between pixels and viewport widths. This will make the base font size grow at a rate relative to the screen width. This is probably the best choice for scalability, but also requires testing to ensure usability.

Have a great day!

Font Size

What the Units of Length Mean

Essentials

Cool Things

Notices

Sample Graphics