How to Change Text Size

• by keyword
• by keyword relative to the containing element or default size
• by percentage of size relative to the containing element or default size
• by unit of measurement

By Keyword

body {font-size: medium;}

xx-small | x-small | small | medium | large | x-large | xx-large

If you’re familiar with setting the font size using the deprecated size attribute with the deprecated HTML font tag, here’s a chart showing how this coding closely compares to the old:

By Relative Keyword

By using either the keyword smaller or larger, you can change the font size relative to the containing element or default size. If you coded your font size by keyword to be small in size, using the keyword larger would change the size to medium, or one size bigger than it was previously set for (see the previous table of keyword font sizes for reference). Here’s an example of that using an inline style with a paragraph element:

<p style="font-size: larger;"> your paragraph text here </p>

By Percentage

<div style="font-size: 200%;"> your content here </div>
<div style="font-size: 50%;"> your content here </div>

By Unit of Measurement

• px (pixels)
• pt (points)
• pc (picas)
• in (inches)
• cm (centimeters)
• mm (millimeters)

The actual size of a pixel depends on the resolution of the display screen. If the display is set to its maximum resolution, a pixel will equal the size of the dot pitch. If the resolution is set to less than the maximum resolution, a pixel will be larger than the physical size of the screen's dot pitch. In other words, a pixel will use more than one dot. I know that’s a little hard to wrap your head around, so for practical purposes, let’s just say a single pixel is the smallest unit of measurement a computer can render.

Most computers display at either 72 dpi (dots per inch) or 96 dpi, so there are usually either 72 or 96 pixels per inch. That will get you close enough to reality to work. There are 72 points in an inch. There are 6 picas in an inch.

Having a background in graphics, where using pixels and dpi are standard operational units, I prefer using pixels to set my font sizes. You can use whichever you prefer. I won't kick you out of the Geeks R Us Club if you don't use pixels as I do. ;)

Size values for pixels are set in whole numbers; while size values for points, picas, inches, centimeters, and millimeters can be set as whole numbers or in decimals. Here is an example of each:

body {font-size: 16px;}
div {font-size: 28pt;}
p {font-size: 4.5pc;}
h1 {font-size: 0.75in;}
h2 {font-size: 10mm;}
.smalltext {font-size: 0.5cm;}

Those examples are all coded for either embedded or external style sheets. If you don't know what that is, you'll have to go through my Introduction to CSS tutorial.