Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
CSS Measurements
Introduction
Whilst learning to create websites using CSS you might well find yourself having to make a decision around what measurements to use for certain page elements. There are a number of different options when it comes to defining length, size, width and height and various recommendations on the way they are used. Below is a list of the most common CSS measurement units and how and where they should be used in a website design.
CSS: Pixels (px)
Pixels are the tiny squares that make up a computer screen. You may be more familiar with pixels (or mega-pixels) when we talk about digital cameras but the principal is the same. In the case of cameras, the higher the number of mega-pixels, the better the quality of image is when you enlarge it. If you stretch out an image wider and wider, eventually the pixels will start to show and an image will become grainy or 'pixelated'.
When we talk about pixel measurements in CSS then we are referring to the amount of pixels an element will take up and they are written as 'px'. Imagine you have a border that is 5px wide. It will take up 5 of the squares on the computer screen. This makes pixels perfect for accurately positioning elements of your page such as columns, headers, navigation etc.
If you want your layout to be 'fixed width' i.e. it stays the same size no matter what happens to the browser window, then pixels are for you and your website.
If you want your website to be accessible to those viewers with visual impairments then setting font sizes in pixels is not a good idea. If a user wants larger text and selects to increase font size then pixel defined font sizes will not increase as a pixel is a pixel...if you see what I mean? I'll come back to this in a moment.
CSS: Percentages (%)
Percentage widths can be a little more tricky to handle when it comes to layouts. We should all be familiar with precentages from school and CSS percentages work in exactly the same way. Say your website 'wrapper' is defined as 100% wide. If you put a div tag inside that and say it is 60% wide then it will be exactly that. Now think about using the button on your browser that reduces the window size (or 'Restore Down'). A fixed width layout will stay the same but a layout created with percentages will shrink with the browser window. As 100% width gets less then so does 60% of it. This is what is commonly referred to as a 'liquid layout'.
CSS: Ems (em)
You may have seen 'ems' in layouts and wondered what on earth they are as they are not as commonly known outside of design and, in particular, typography as pixels and percentages. An em is defined as the height of a capital 'M' in the default font size. So an em can be relative to the viewer's default font size or to the default font size of the parent element. I hope you are keeping up with this but here is a small example to help you out;
In the example you are seeing the effect of giving the parent div a fixed font size of 25px and then stating ems as a decimal of that initial value. See how the font sizes get smaller as the ems value gets smaller. Ems work in decimals and act very much like percentages.
Something to take particular note of here is accessibility. Remember we discussed resizing text earlier? If you want scalable text in your web pages for users with visual impairments then use ems for text sizes. However you must remember to use all ems, even for your base font size, for text to be truly scaleable. It is good practice to set a base size on the body tag using CSS and then all of the ems font sizes in the rest of your page can be resized by the user.
I think that it is worth mentioning the new crowd of browsers that are now available for download. Most Mozilla based browsers (Firefox, Opera, Flock etc.) and most Webkits based browsers (Chrome, Safari etc.) are equipped with a 'zoom' function to enable pixel based font sizes to be increased. However, this can't be relied upon if you have accessibility in mind for your design.
CSS: Exs (ex)
Exs are similar to ems apart from a size of 1ex represents the size of an 'X' in the default font size. Most browsers tend not to support exs so I would strongly discourage their use in online design.
CSS: Points (pt) and Picas (pc)
Very much reserved for print design, points and picas are units of measurement that relate to a an inch. 1pt is equal to 1/72 of an inch. A pica represents 1/6 of an inch. Like exs, those designers dealing in digital media would be best advised giving points and picas a wide berth. This is because a browser, for instance, will have to guess how big an inch should be on the screen and this can have some bizarre and unwanted effects!
Conclusion
Hopefully this has shed some light on CSS measurements. The upshot is that you really have three to choose from. If you want a fixed width website then you should use pixels for your main layout elements. If you want a flexible or liquid layout that will resize with the user's browser then you should use percentages for these elements. One word of caution, mix these two up only when you have a really good idea what you are doing. I have seen some badly 'broken' designs in my time just because the designer has mixed px and % widths. Also make sure that you keep looking at your designs at different screen resolutions and browser window sizes to check it is all holding together.
Where you have text, you can use all three types of measurement but remember that your viewers may not be able to resize the text on your page if you have chosen to use pixels for all of your font sizes or if you have based your ems or % sizes on a fixed pixel size.
