CSS Measurement Unit Types

Cascading Style Sheets (CSS) is a markup language that instructs browsers how to size and render the content on the user’s Web page or document printout. The content itself should be written in HTML as it plays the integral role of informing the search

Cascading Style Sheets (CSS) is a markup language that instructs browsers how to size and render the content on the user’s Web page or document printout. The content itself should be written in HTML as it plays the integral role of informing the search engines and the user what each piece of content means while CSS informs the rendering engine how it should appear to the user’s device.

Simply put, there are millions of devices – each with different rendering capabilities and screen sizes. I had attended a conference last year and what was even more amazing than the number of devices currently available (handheld, tablet, desktop, etc.), is the exponential adoption rate of mobile on a global scale. In the United States we had developed the hardware, the software, launched the Internet, and have evolved in somewhat of a pragmatic fashion. According to this one presenter, technology and adoption rate has grown at such a rapid rate that many countries in areas like sub-Saharan Africa will have or already have bypassed the desktop phase altogether and moved straight towards mobile devices with varying levels of capabilities.

Absolute CSS Measurement types:

Traditional web design was based around absolute pre-configured sizes and with it the first batch of CSS measurement types refer to absolute lengths. Absolute lengths  are not ideal for screen but are mainly used for print:

UnitInfo
mmreal world millimeters .
cmreal world centimeters.
ptpoints – 1/72 of an inch.
pcpicas – 1/6 of an inch
ininch

The case of the pixel:

Pixels while not exactly absolute there not exactly relative as well. Pixels are relative to the viewing device. The amount of pixels in a device (or in an inch for that mater) changes from device to device. A pixel is in essence the smallest visible particle on a screen.

UnitInfo
pxpixel. it’s size is relative to the screen/device DPI(depth per inch).

 

Relative or Static Units?

The questions you may be asking are probably along the lines of, “Why? What’s the big deal? What could this possibly have to do with typography?”

The answer is: “With the vast differences in handheld, tablet and desktop devices we need to ensure that our designs render properly on all devices for a pleasant user experience (UX).” Sounds impossible. However, properly rendered, legible typography dependent on relative units of measurement is the cornerstone that will set the stage for a pleasant user experience. It is up to us to write optimal code that allows it to display consistently on all types of devices, or at least allow for graceful degradation.

As a designer that has transitioned from print design to Web design, I can tell you that it is a bit intimidating to analyze code then ask yourself what it means. How on earth could any of the terms in CSS make sense to a human being? How is this different than HTML? The irony is that many of the terms used in CSS are similar to that of print design and typography, yet we are still scared as hell to learn it or even tinker with it. We are afraid because, as a designer, we do not have total control over the final destination, nor do we have as much control over the way the browser renders the content as opposed to creating a project in a native design application such as Adobe Photoshop or Illustrator. But, I digress.

Reeling our way back to CSS, there are two different types of measurement: absolute and relative. Each is somewhat self-explanatory, but as a method of trying to avoid some nebulous definition I will just point to the W3C’s definition so we are all on the same page. The W3C provides a brief excerpt on their page for some clarity (http://www.w3.org/TR/REC-CSS2/syndata.html#length-units).

There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).”

Relative CSS Measurement types:

Relative measurement types enable us to define lengths relatively to other properties. Relative lengths are the key to modern web design and are the heart of responsive web design.

UnitInfo
remrelative to the root font size.
emrelative to the current font size. Please note: it’s relative to the current size wherever the em is sitting.
exrelative to the height of the letter ‘x’ of the current font/font-size.
chrelative to the height of the number ‘0’ of the current font/font-size.
vw, vhrelative to 1% of the current view port (width/height)
vmin,vmaxrelative to 1% of the minimum or maximum size. Example: vmin will always choose the smaller demntion and return 1% of it (width or highet)

 Designers are fixed, it’s time to fix that.

As designers we are used to working with absolute units since our final product is, more often than not, a fixed layout. Absolute units are fixed and will render the same on any device or media from smart phones to printed paper. The downside to using fixed units of measurement on handheld or tablet devices is, depending on the width you have coded, that it may cause the text to run on longer than the screen width of the user’s device. This one brief example that has a negative effect on the user experience and should be avoided if possible since it could disorient the user by making them traverse outside the area that was initially visible within the viewport.

The best way to avoid this negative effect is by relying on relative units of measurement to ensure that we are testing and adhering to the parameters set forth by the users’ devices. If we set the main wrapper to less than 100%, and body type to 100%, then we may rely on relative units such as “ems” by using them as a multiplier to create a visual hierarchy within our HTML document. By not exceeding 100% we are ensuring that the width will not cause the device to scroll vertically in order to read the copy, keeping the page within the visible area of the viewport and mitigating the risk of frustrating the user by disorientation.

From a layout perspective, relative units allow you to establish a hierarchy to scale up based on these units of measurement. This is extremely critical when it comes to creating layouts that are responsive as the experience is somewhat different on tablet devices than it is on handheld devices. The surface area on a tablet is a bit greater so the experience is better suited towards browsing as opposed to micro-tasking. For example, it allows the user to view more products and related content all at once. This allows the user to make an informed decision with less effort than a handheld device due to less dragging and scrolling.

So what’s the best practices?

This is not to say that all absolute units are evil. Rather, if you are certain you know the dimensions of your final medium you should use the unit that is most suitable such as centimeters for an A4 document or inches for an U.S. Letter document to ensure the page prints. The chart below from the W3C shows which units are recommended for each medium depending on use (http://www.w3.org/Style/Examples/007/units.en.html).

CSS Reommended Units

Just like any artist, it is up to the designer to select the right tools (in this case units of measurement) when working with their medium. For an ideal experience, “It’s (almost) all relative”.

 Who wrote this article?

This article was created by Brant Nesbitt. Brant is a talented designer that is focused on you. So if your in need of a web or traditional designer please check him out on his site HybriMedia.

References and further reading:

 

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz