html tutorials web design help css tutorials free web graphics diy search engine optimization

How to Change Text Size

The text size on a web page can be changed from the default size in four different ways:
  • 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

Setting the font size according to keyword is probably the easiest method for most people, but it also offers less control. Here’s an example of how to code the font size by keyword using an external style sheet:
body {font-size: medium;}
Here are the possible values for setting a font using the keyword method:

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:

New Sizexx-smallx-smallsmallmediumlargex-large xx-large
Old SizeSize 1Size 2Size 3Size 4Size 5Size 6Size 7

By Relative Keyword

Font size can also be changed by relative keyword as it pertains to the containing element or default size. The containing element is whatever currently controls the current font size at the place in the page where you want to make a change. This could be a font size you’ve already coded into your page via style sheets, or the default font size of the user agent if you haven't set a font size.

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

Using a percentage to change the font size is similar to the using a keyword relative to the containing element, only it gives you more control. Rather than having specific bumps in sizes, you can use any percentage (other than a negative value) to change the font size. Here are two examples using an inline style with a division tag:
<div style="font-size: 200%;"> your content here </div>
<div style="font-size: 50%;"> your content here </div>
In the first example, the text would be changed to twice the size of the font size in the containing element. In the second example, the text would be half the size of the font size in the containing element.

By Unit of Measurement

Now that those methods are out of the way, we come to my preferred method of setting the font size—by unit of measurement. There are several units of measurement you can use. They are:
  • px (pixels)
  • pt (points)
  • pc (picas)
  • in (inches)
  • cm (centimeters)
  • mm (millimeters)
Pixels, points, and picas may not be as familiar to you as an inch, centimeter, or millimeter, so let me give you an idea of how they compare to an inch.

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;}
Notice that in all examples, there is no space between the number and the unit of measurement. Writing 16 px instead of 16px is incorrect syntax. Got it? Great, you’re really smart!

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.

Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)