CSS: measurement values

Tweet

Have you ever wondered what pc stands for in a CSS file?
Measurment values in CSS can be different and they usually have different use.
It is quite normal to use pixels or percentage and I believe we all consider them the most important. However, when for example we are working on a fluid or responsive layout, we might even need other kind of measurment values.

Let's see them!

The list
Here is the list of all possibile measurement CSS values.

% - Percentage
It is most used when we need to have responsive layouts. Especially in tables and, generally for containers, when we want a fluid layout, we set widths or heights in percentage.

in - inches
cm - centimeters
mm - millimeters
They are not very often used. However if you think about a printable page, they might become very handy.

em
These values are quite tricky. Anyway...
1em is equal to the actual font size. Therefore 2em is twice the actual font size.
Just follow this example: we have an element displayed with font size set to '14pt'. For the same element, '2em' will be '28pt'. Simple as that...

ex
Another tricky one, even if less than ems. 1ex is the x-height of a font. Normally it represent half the size of a font. I wonder when and where we should use it...

pt - points
Personally I don't really like points. In any case... 1pt is 1/72 inch... if anyone is really interested.

pc - picas
Ok, another obscure one. One pica is 12 points... - never used!

px - pixels
That's the one we use most (together with percentage). We all know what a pixel is, don't we? For those who have just left their moon base, a pixel is the smallest dot on a screen. Just put your face really near your monitor... see those small dots? No? Well... you have to believe me, there are small dots there! Every small dot is a pixel.

According to what is our need, we have a really large set of possible measurement values. In my opinion the list is even too long. I don't know your experience on the matter, but personally I have never used most of them. Not that I don't want to... just because I have never needed them.
If you had personal situation where you used for example ex or picas, please do share your ideas.

Well, that's all for today. See you next time...