Skip to main content Skip to main navigation Skip to search Skip to footer
Type to Search Subscribe View Tags

Understanding CSS units

Understanding CSS units
Johnson De Sathya Leo - Technical Lead | August 20, 2014
153 Views

Understanding CSSUnits in CSS are like water containers, giving shape to water.

Just imagine what would have happened if we did not have units for the web? Things would have been arranged in a scattered manner. Each browser would render in its own way and web developers would not dislike lower versions of IE, most importantly IE6.

Fortunately, we have CSS units. An increasing number of CSS units have provided flexibility to web developers but one of the most challenging aspects is choosing the right units for the elements. I hope most UI developers will agree with my statement. What if we use the same units throughout the design? As a matter of fact, in the current age, where websites are viewed through phones and high definition TVs, this would definitely restrict design in many ways.

I was thinking about these things and decided to share my thoughts on units, and when and where to use them.

Meet the CSS Units

In order to choose the right units for your design, you need to understand them better.

CSS units can be classified into two major categories: Absolute and Relative. Absolute units are used in fixed layouts or designs, and relative units are used in responsive or fluid designs. Lets discuss about the units that we use in day-to-day design.

1. Absolute Units

1.1 Pixels (px): Pixels are fixed-size units used in computer screens. 1 pixel is one dot on a computer screen.

Pixels can be used in a fixed layout on digital screens and thin borders, and also for setting the base font size. (Avoid using pixels in the typography of a fluid layout, and in print media).

For example:

.border{ border:1px solid #333; }

1.2 Points and picas (pt and pc): A points is 1/72 of an inch and a pica is 1/6 of an inch.

Points and picas are used only for print media and should never be used in screen media. These units are mainly used for font size in print media.

For example:

h1 { font-size: 24pt; }

1.3 Inches (in) and Centimeters (cm): Defines measurement in inches and centimeters respectively.

Like points and picas, inches and centimeters should be used only in print media. The units 'in' and 'cm' are especially used for page margins.

For example:

@page { margin: 0.5cm; }

2.Relative Units

2.1 Ems (em): 1 em is the computed value of the font-size in the element on which it is used. One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size.

Em can be used in typography for responsive and fluid layouts.


For example:

body{ font-size:1em; }
.heading{font-size:2em;}

In our example, under all screen conditions, the heading text size will be 2 times larger than the body text.

2.2 Rem (rem): 1 rem is the computed value of the font-size property for the documents root element.

This unit can also be used for the same purpose as em and it is more robust. Why is rem more robust than em? To answer this, let's consider the above example. Lets have a span inside the class heading with font-size 2em.


For example:

body{ font-size:1em; }
.heading{font-size:2em;}
span { font-size:2em; }

div class=heading
spanHeading/span
/div

Now in this case text, the span will have 4 times larger text than the body text because em is computed based on the element on which it is used.

When we use rem:


For example:

body{ font-size:1rem; }
.heading{font-size:2rem;}
span { font-size:2rem; }

The size of the text in span will be only 2 times larger than the body text because rem computes value based in the root element. This unit only supports modern browsers.

2.3 Percent (%): Defines measurement as a percentage relative to another value, typically an enclosing element.
Percentage can be used for responsive image and fluid containers.


For example:

img.banner{
width: 100%;
height: auto;
}

2.4 Viewport units (vh, vw, vmin, vmax):

1vw: 1% of viewport width
1vh: 1% of viewport height
1vmin: 1vw or 1vh, whatever is smallest
1vmax: 1vw or 1vh, whatever is largest

IE View

Earlier, setting a container to the width of viewport required JavaScript manipulation, but with Vh and Vw, this becomes very simple.


For example:

.container{ width:100vw; }
p { font-size: 2vmax; }

Font-size change according to the screen, portrait or landscape.

Tablet view1 Tablet view2

Viewport units lack support in IE8.

Final thoughts

The above discussed points are not rules for using CSS units, but suggestions, which may help you use them more effectively. Most of us use px, % and em to design the web, and of course this gets the job done. However, in the future, as the web progresses, we have to get used to Viewport units and functional notations like calc(), toggle(), attr(), which have the ability to change units in a more fluid manner. Let's continue to explore and experiment with these units in our designs as we get ready for the race!

Reference
http://www.w3.org/TR/css3-values/


Contact Us
MAX CHARACTERS: 10,000

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

Sign in to Add this article to your Reading List
Register