Home

How to Specify Size with Absolute Measurement Units for HTML5 and CSS3 Programming

|
Updated:  
2016-03-26 13:16:56
|
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

Many times, you need to specify the size of something in CSS3. Of course, font size is one of these cases. The different types of measurement have different implications. It's important to know there are two distinct kinds of units in CSS.

Absolute measurements attempt to describe a particular size, as in the real world. Relative measurements are about changes to some default value. Generally, web developers are moving toward relative measurement for font sizes.

Points (pt)

In word processing, you're probably familiar with points as a measurement of font size. You can use the abbreviation pt to indicate you're measuring in points, for example:

p {
 font-size: 12pt;
}

Unfortunately, points aren't an effective unit of measure for web pages. Points are an absolute scale, useful for print, but they aren't reliable on the web because you don't know what resolution the user's screen has. A 12-point font might look larger or smaller on different monitors.

In some versions of IE, after you specify a font size in points, the user can no longer change the size of the characters. This is unacceptable from a usability standpoint. Relative size schemes prevent this problem.

Pixels (px)

Pixels refer to the small dots on the screen. You can specify a font size in pixels, although that's not the way it's usually done. For one thing, different monitors make pixels in different sizes. You can't really be sure how big a pixel will be in relationship to the overall screen size.

Different letters are different sizes, so the pixel size is a rough measurement of the width and height of the average character. Use the px abbreviation to measure fonts in pixels:

p {
 font-size: 20px;
}

Traditional measurements (in, cm)

You can also use inches (in) and centimeters (cm) to measure fonts, but this is completely impractical. Imagine you have a web page displayed on both your screen and a projection system. One inch on your own monitor may look like ten inches on the projector. Real-life measurement units aren't meaningful for the web.

The only time you might use them is if you'll be printing something and you have complete knowledge of how the printer is configured. If that's the case, you're better off using a print-oriented layout tool (like a word processor) rather than HTML.

About This Article

This article is from the book: 

About the book author:

Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].