Design, CG Graphics & Inspiration
Choosing the Best Measurement Units for Coding

Choosing the Best Measurement Units for Coding

In this post I would like to share some information on how to choose the units of measurement when coding. There are two categories of length units: the absolute and relative.

To the absolute we refer:

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

In terms of specifications css 1pt = 1/72in, and 1pc = 12pt. In the property font-size assignment of negative value in units of length, for example-25cm, is unacceptable. Why absolute? Because there is a certain real value in the physical world they correspond to, ie the standards.

Output unit, which has an actual physical size, deals with these units, for example we will use such units when printing. But for monitors those units have no meaning at all, there is a certain condition, but it’s really just a condition. To the relative units we refer:

• em (point type)
• x-height (ex)
• px (pixels)

Percentage (%) it is a value that should be always discussed separately. It is so important that the W3C placed it in a separate column. It means that you can write% not with all rules, but only with some of them, and when you write %, you should understand where do you get it from.

Pixel is the smallest dot that can be installed on the computer screen. Why pixel is a relative value? We take the physical monitor which has a diagonal – this is a real physical quantity. But we can set any resolution, right? The value of a pixel can change, depending on the resolution we set. That is why the pixel is a relative value. Ie on different monitors px has different size. Em unit refers to the size of a standard font that is installed in global browser settings.

font-units in Choosing the Best Measurement Units for Coding

In the table there are some important font sizes. Most of them are not useful to us, but we still need to know about some of them. Number 4 denotes the baseline elements of fonts, and number 13 – font-size, em. So, em unit defines the proportion of a given letter’s width and height with respect to the point size of a given font (and is frequently expressed in decimal notation as, for example, .7em).

And what is ex? This is the height of a lowercase letter. This relation has different values for various fonts. But not all browsers support this relation. For example, Microsoft has offered to assume 1em = 2ex for all types of fonts. That’s because the ex can be different in different browsers, so it’s better not to use it. Some browsers do count ex correctly, and some, like IE in half of em. But in reality it may be 0.46, in small fonts such discrepancy is unnoticed, and at large there might be a significant difference. Now, regarding the use of pt, pc, in on the websites. If we indicate the size of the element on the website in pt, it still will have to be to be taken from somewhere.

So how does the browser resolves this issue? At the dawn of computers, monitors’ sizes were of a small range. And Microsoft has offered to take 96px = 1in for definiteness, and this will be the resolution of our devices: 1in = 96px and Apple said no:) Let’s focus on printing industry and take: 1in = 72pt, but in practice were as follows: the lower the resolution, the less there is an opportunity to place the information.

So Apple changed its mind and made 1in = 96px, but it’s all nonsense, since the actual physical resolution of your device ranges from about 60 – 600px / in. But still the value of 96 is decisive for the calculation. This means that if you write the size of 10pt, the browser will do the following: 96 / 72 * 10.

That’s the story in terms of pt in px. In practice, I would not recommend to use absolute units on the monitors. On the monitor it does not make any difference, but when printing it is desirable to use them. When printing it is necessary to make sure that all is outputted in pt.

To read original article in Russian click here

  • Dark_Knight,
  • August 15, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • I’ve been trying to use more and more percentage and em in my sites using px only for minimum and maximum values.

  • I’ve been trying to use more and more percentage and em in my sites using px only for minimum and maximum values.