Skip to main content

A Beginner's Guide to CSS | Part Six - CSS and the Units of Measurement

Submitted by helen on Saturday, April 17, 2010 - 22:06; Modified on Thursday, August 18, 2016 - 11:09

In CSS, when you assign a numerical value to an element (be it width, height, padding, border) you must specify a unit of measurement, otherwise the browser won't know what to do with that specific property. If you tell the browser, I want this div to be 1 high, the browser will say (if it could talk, of course) - one what?. There is no default value that kicks in should you not specify a unit of measurement — unless you're assigning 0 to something, in which case a unit of measurement isn't necessary.

Zooming in

In most modern browsers, when you resize the page, everything on the page resizes in relation to everything else. If the width of your layout is 750 pixels, upon resizing your page, the width may seem to have increased, but it hasn't. The magnification has changed. Not your dimensions. Your width is still 750 pixels, just the order of magnification is greater than before.

Zooming in and out seems to have taken the place of resizing fonts, over the last several years, but most browsers still enable you to resize fonts independently of zooming in and out of the page.

Screen Resolution

Before we touch on the units of measurement, I should explain how screen resolution affects the display of a website. Resolution is determined by the amount of horizontal and vertical pixels that make up a screen (we will touch on pixels units of measurement below). A common resolution for computer screens is 1900x1080. This translates as 1900 pixels wide and 1080 pixels high.

Resolution plays a vital role in the rendering of your website because the number of pixels available dictates the quality of the image on screen. For instance, a large resolution (i.e., more pixels) will result in a clear crisp image; a lower resolution (i.e., fewer pixels) will result in a less sharp and possibly blurry image.

Relative Length Units

Relative length units specify a length relative to another property, be it a font size (in the case of ems) or the user's resolution (in the case of pixels). They are useful as they scale well between different mediums, which means you can attain consistent results, regardless of the size of your screen.

Pixels

We touched on pixels above, when we discussed screen resolution. When you use pixels, in your CSS, they are rendered based on the amount of pixels available on the screen, with one pixel being equal to one pixel on the screen that is used to view your site. This means that pixel layouts are not dependent on the size of the window, but, rather the resolution of the viewing medium; should you resize your browser window, for example, a pixel layout will not resize along with the window. Another example: if your div is 750 pixels wide, it will always take up exactly 750 pixels of the horizontal screen space; the width will never change.

The drawback to this is that, if you set your width to a certain fixed value, it might look fine for people with say, 1024x768 resolution, but for people with large monitors, gaps will appear on either side of your layout; conversely, people browsing your site on mobile phones or tablets, may have to scroll to read all of the page, which is why you should optimise your CSS for smaller screens (which I will show you how to do later on in the series).

Pixels have their issues in versions of IE7 and below but only when used to size fonts. If you set your font size in pixels, the text won't resize when zoomed in and out, which can lead to accessibility issues. Again, this is only when using pixels to size fonts in versions of IE below 8, and shouldn't deter you from using pixels for your font size.

How to specify pixel units in CSS

Pixels are written using the abbreviation px.

CSS Code:

p {
  font-size:12px;
  background-color:#F63;
  padding:8px;
}

div {
  width:60px;
  height:60px;
}

(X)HTML Code:

<p>Some test text.</p>
<div>A test square.</div>

Result:

Some test text.

A test square.

In the first of our above examples, we're using the font-size property to give our paragraph, denoted by the p element, a font size of 12px. In the second example, we're specifying a width and a height of 60px for our div. If you zoom in and out, the font will appear to increase and decrease and the box will grow and shrink. But the paragraph will always have a font size of 12px and the box will always take up 60 pixels by 60 pixels of screen space.

You may have noticed that the font in the blue box is a similar size to the font in the red paragraph, despite no font size being set on the box. This is because that example is affected by my stylesheet, which has a font of 80%, which just so happens to roughly equal 12px. We will talk more about this below in the sections for Em Units and Percentage Units.

Ems

Em units are another relative unit but, unlike pixels, which resize according to resolution, ems resize according to font size. This means that, if you set a font-size on an element using ems, that value will be relative to the font-size value it inherits from its parent element or any ancestor element. Assigning a value of 1em will set the font to the same size as the parent or ancestor, .5em will be half of the parent/ancestor value, 2em double, and so on. Therefore, if you set a font size of 1.25em on your body, and you give an element within the body (which is hard not to do because all renderable elements should be within the body) a value of 2em, this element will have a font size of double the size on the body — obviously, because 2 is twice the size of 1. Given ems are relative units, we can't specify a fixed em figure for the resulting font size other than that it is double the font assigned to the body element.

If you haven't specified a font-size on a parent or ancestor element, then the em value is relative to the default font-size of the browser, where 1em equals the browser's default font-size. Usually, the default font size for a browser is around 16px, but this can fluctuate and also doesn't take into consideration whether a user has increased or decreased the font size.

It is worth knowing that, like pixels and unlike percentages, em units don't resize when you resize the window.

How to specify em units in CSS

Ems are written using the abbreviation em.

CSS Code:

div.parent {
  font-size:2em;
  width:11em;
  height:4em;
  background-color:#CF6;
  padding:5em;
}

div.child { 
  font-size:1em;
  width:11em;
  height:2em;
  border:2px solid #933;
  line-height:2em;
  margin-top:5em;
}

(X)HTML Code:

<div class="parent">
  The parent element.
  <div class="child">
    The child element.
  </div>
</div>

Result:
The parent element.
The child element.

In the example above, we have a parent element with a font size of 2em and a child element with a font size of 1em. The font size of 2em on the parent element sets it to double the font size set for the document, which is 80% (roughly 12px), as defined in my stylesheet. If you wanted to put it in terms of a fixed size, you could use pixels (which, as we discussed don't change relative to anything on the page) and say that the text in the parent element is 24px because 12px x 2 = 24, so the 2em doubles the font on the parent and makes it 24px.

The child element has a font size of 1em, which will set it to the font size on the parent element — thus both parent and child produce text of the same size.

That's why ems are referred to as relative, because there isn't a constant global value. You can't say 1em will always equal, say, 12px, because that isn't going to be the case. In this example, the 2ems on the parent element do equal 24px, but that is because the example is affected by my stylesheet, in which I set the font on the body element to 80%, which roughly looks the same as 12px.

Percentages

Percentage units are calculated relative to the percentage value of some other element. This can be either a parent element or an ancestor element.

An example of percentage units

Supposing you set a font size of 80% on your body. You then create some styles for links and decide you want them to be slightly bigger than the body text. You would think that, giving them a font size of 100% would make them bigger, as 100% is greater than 80%. But in fact, 100% sets the links to the same value as the body font size, because they are children or ancestors of the body. Giving them a font size of 100% tells them to be 100% the size of the font value specified on the body — so they come out looking the same size as before you applied your font size to them.

To accomplish what we want, we can give our links a font size of 120%. This makes them 20% bigger than the text in the body. This is the crux of using percentages: to set the value you want for a specific property, you need to consider that same property cascading down to your element (if any), which will determine which percentage value you use to achieve your desired effect. Once you know that you have to consider the percentage units on elements nested above yours in the document tree, you'll find percentages easy to use.

Percentages and heights

When you apply a percentage height to an element, the percentage is calculated relative to the contents of the element, but only when it is 100%. Any other percentage value you specify will have the same effect as 100%, unless there is a percentage height set on the html and body elements. If you apply a percentage height to the html and body, this changes how the percentage height is calculated and causes it to be calculated based on the height of the viewport, not the content inside it. We will talk more about this in a later instalment, when we cover CSS layouts.

How to use percentages units in CSS

Percentages are written using the % symbol.

CSS Code:

p {
  font-size:120%;
  padding:3%;
  background-color:#0F9;
}

Result:

Some test text.

It is worth noting that, while you can give padding, margins and font size, a percentage value, you cannot give a percentage value to borders. It won't work because borders are not calculated in this way and the concept of a percentage border thickness does not apply.

Exes

Exes are a relative unit of measurement where 1ex is equivalent to the x-height of the current font. This is often the height of the lowercase letter x in that particular font, although, despite this, exs are defined for fonts without the letter x.

Like em units, when the window is resized, ex units stay the same and do not resize along with the window.

How to specify ex units in CSS

Exs are written using the abbreviation ex.

CSS Code:

div.parent {
  width:25ex;
  height:4ex;
  padding:.5ex;
  font-size:4ex;
  background-color:#CF6;
}

div.child { 
  font-size:1.75ex;
  width:25ex;
  height:2ex;
  line-height:2ex; 
  margin-top:5ex; 
  background-color:#9FC;
}

(X)HTML Code:

<div class="parent">
  The parent element.
  <div class="child">
    The child element.
    </div>
</div>

Result:
The parent element.
The child element.

Because the current font size is fairly small, we have to specify large ex units to make our text legible and to give the parent and child elements a suitable width.

Absolute Length Units

Absolute length units are fixed units that resize in relation to each other, not the viewing medium. They are not recommended for webpage design, as they don't produce consistent results, but I have included them here, for your reference.

Picas and points

Picas and points are an absolute unit of measurement, used in the print industry. They aren't intended for web page design and will vary depending on the user's dpi, producing results that are too inconsistent for it to be worth your while using them.

How to write picas and points in CSS

Picas are written using the abbreviation pc. Points are written using the abbreviation pt.

CSS Code:

div.pica {
	width:16.6pc;
	height:2px;
	font-size:1pc;
	background-color:#C60; 
	padding:.5pc;
}

div.point {
	width:200pt;
	height:20pt; 
	font-size:12pt;
	background-color:#399;
	padding:6pt;
}

(X)HTML Code:

<div class="inch">An example of picas.</div>
<div class="millimetre">An example of points.</div>

Result:
An example of picas.
An example of points.

Inches and millimetres

Inches and millimetres are an absolute unit of measurement. Like picas and points, they aren't intended for web page design, as they can vary greatly between the various mediums and resolutions.

How to write inches and millimetres in CSS

Inches are written using the abbreviation in. Millimetres are written using the abbreviation mm.

CSS Code:

div.inch {
	width:2.3in; 
	height:.5in; 
	font-size:.16in; 
	background-color:#6C3; 
	padding:.1in; 
}

div.millimetre {
	width:60mm; 
	height:10mm; 
	font-size:.4mm;
	background-color:#C93; 
	padding:2mm;
}

(X)HTML Code:

<div class="inch">An example of inches.</div>
<div class="millimetre">An example of millimetres.</div>

Result:
An example of inches.
An example of millimetres.

What units should I use?

You're probably wondering, what units should I use for my website? Well, with regard to font, the World Wide Web Consortium (W3C for short) the organisation responsible for creating web standards, recommend percentages, em units and pixels, because they produce consistent results that resize accordingly - which is a must when it comes to accessibility.

With regard to the dimensions of your website, what you use depends on the type of layout you're going for and your personal preference. When working with definite widths, and layouts which need to have elements in certain positions, use pixels; if you want a fluid layout that doesn't need elements to be in specific places, and changes to adapt to the size of the window, use percentages. If you want a layout that resizes purely based on the size of the font - otherwise known as an elastic layout - use em units.

Don't worry if the words elastic and fluid don't mean anything to you. These are names for the various types of CSS layouts (and there is one more called fixed). We will cover these in a later instalment.

Conclusion

Out of all the units of measurement on this page, there are only four that are suitable for web page design: pixels, percentages, ems and exs. Inches, millimetres, picas and points really should be avoided at all costs. I personally don't use exs — but that's just personal preference. It's up to you if you wish to use them or not.

You will be pleased to know that this is the last tutorial which contains blocks and blocks of text. From here on out, we'll be focusing on practical examples. In the next chapter, I'll show you how to style paragraphs with CSS and after that, we'll move onto the CSS font properties.