oblaat

a guide to conceiving, creating & publishing your own website

Units of measurement

There are plenty of units of measurements that browsers can understand and interpret, so it is useful to learn what they are and when they are appropriate to use. Some units of measurement are rarely used, some methods of doing things are preferred over others, and some practices are better suited to different scenarios.

Absolute lengths

These are units which do not change based on the condition or style of the elements around them. If you declare the size of something using an absolute length unit, it is expected to always be the same size no matter where the element is located.

centimetres, millimetres, inches & points

Centimetres are marked with cm in shorthand, millimetres are marked with mm, and inches are marked with in. I am sure you have already heard of these three units; they are real life measurements that we use every day.

As for points, if you have ever used a program like Microsoft Word and changed the text size, it was probably measured in points. One point (or 1pt) is equal to 1/72 of an inch. It's an old unit of measurement from back when people actually had to set type for printing presses.

All of these real-world measurements can be useful on the Web, but they are most useful for those preparing HTML documents to be printed out, not for reading online. Don't rely on them for digital displays!

Pixels

Pixels are represented in CSS using the value px. Everyone likes pixel values. They're neat and consistent across displays! There are many strengths to using pixels as a value for measurement, as long as you take the fact that different displays are different sizes into account when designing.

One pixel in CSS may not be the same as a pixel on an actual screen, however. Some people have large computer screens or bad eyes, so they have displays scaled a certain way. Many people use 125%, 150% or even 200% scaling, where 1 pixel in an application—including the browser—corresponds to 1.25, 1.5 or 2 pixels on the actual monitor. 1px on a phone might be big compared to the actual pixel resolution, too.

Relative lengths

Em length & rem length

You may have heard of the em dash, a dash the width of the capital letter M in whichever font you are dealing with: compare the glyphs for M and — on your screen. One em in CSS is the height of the capital letter M, whatever that might be within the current element. If the em value is being used to define font size, this will instead be relative to the font size of the parent element.

The em value can be very useful, and it is great for designing around rather than static px values.

If you set the initial font size to an em value and continue with this trend the entire way down, then the browser's default font size will decide the size of anything using this length. If you set a font size in px, downstream any em values will be calculated relative to that pixel value.

The rem length is similar to em, except it stands for root em. Whatever font height is applied to the html element will be the rem length no matter what.

Consider the following CSS rules:

html { font-size: 1em; }
p { font-size: 1em; }
.growth1 { font-size: 1.5em; }
.growth2 { font-size: 1.5rem; }

What might the following HTML code look like when rendered?

<p>Here is some <span class="growth1"> example text. <span class="growth1"> Spans with the same class are nested inside of themselves. <span class="growth1"> And they just keep going. </span></span></span> </p>

<p>Here is some <span class="growth2"> more text. <span class="growth2"> Spans with the same class are nested inside of thstrongselves. <span class="growth2"> And they just keep going. </span></span></span> </p>


The answer is just like this. The parts of text defined by em are relative to their parent elements, while the parts of text defined by rem remain relative to the root element.

Viewport height & width

The viewport in a browser is the actual space the Web page takes up. Whether this is the entire screen on a mobile phone, the entire screen minus the browser tab bar and bookmarks on a PC, one window on a computer or a small embed inside another Web page, the viewport is not guaranteed to be any size at all.

One vw is 1% of the viewport's width. Likewise, one vh is 1% of the viewport's height. These values don't mean very much on their own, but they are very useful for setting maximums—for example, if you don't want an image to ever be taller than the screen, you could make its maximum width 100vh, 100% of the viewport's height.

Percentages

Percentages are not a unit of measurement, but they are still often used to define lengths easily. They are represented with the humble % symbol as shorthand. When used for length, one percent in CSS is one percent of the parent element

Percentages should be used with a keen eye, due to the unpredictability of font or device sizes. Never use it for the entire layout if there are unknown variables—if your body element has its width set to 90%, this will be massive on an ultra-widescreen monitor!

Percentages can also be used with a + or - sign behind them. If you desire for text to be one quarter bigger than it appears in the parent element, setting its size to +25% is absolutely possible.

Reference table