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:

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

New Size	xx-small	x-small	small	medium	large	x-large	xx-large
Old Size	Size 1	Size 2	Size 3	Size 4	Size 5	Size 6	Size 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!

About Admin

Hi EveryOne! The Guy behind this blog is called “Mehboob Ahmed”. By Profession I’m a Web Designer, Computer Teacher, Blogger and SEO Optimizer. I’m not having an educational degree or something like that but, I’m the one who has done everything whatever He wanted to do. I learnt computer from teachers, from Internet and from books and became teacher in very less time.

Mehboob Ahmed Channa