menu

Units of measurement in web design

Units of measurement in web design

If you want to indicate on a website what size something is, there are countless options for units of measure to choose from. Some are well known, such as pixel or percentage, others few have heard off. This gives you great flexibility, but is your knowlegde up to date.

Pixels (px)

The most used unit in web design is pixel. A pixel represents a dot on your website. In that sense the pixel is very exact. An element in one place on the website of 100 pixes and another element in a totally different place on the website of 100 pixels wide are aqual in size. Always.

The fact that pixels are so predictable makes them easy to use. Just like an inch is always an inch. However, there is also a disadvantage. Not every screen consists of the same number of pixels. Many computer screens are nowadays are over 2000 pixels wide, while a smartphone measure around 600 pixels. An element that is 1000 pixels wide is only half of the image on a computer. However, it does not fit on a smartphone screen. This means that pixels at a responsive website can be a bit of an burden.

Percentage (%)

Another way to indicate the size of something is use percentages. If you specify a percentage, define it to be a percentage of the element that contains this element. At Webanizr websites this is always the directly surrounding element.

Percentage is a popular unit for responsive websites because the content scales to the size of the screen. Provided the use of percentages has been implemented consistently.

Em

Em is a unit that is often used with text, in many cases to indicate line height. Originally the unit indicated the size of the letter M, hence the name. Now it roughly indicates the height of a text line. So with the size 2 em you actually mean 2 lines.

Rem

Rem is very close to the unit em. There is, however, a slight difference. Em is a unit based on the current standard. For example, when you set the line height to 2 em and again place an element with a line height of 2 em, then the line height is again twice as large.

The size of Rem is not based on the already existing line height. but on the size of the used font and font size. 2 rem is literally 2 lines, based on the font and the size of the font. This makes a rem more predictable.

Point (pt)

Point is a unit from the printing world. A point in printed copy is roughly comparable with the definition of a pixel for screens. In the case of screens, a point is converted into a number of pixels. It is therefore also a fixed unit like pixels. The conversion is done based on the settings of the computer. That makes point a somewhat unpredictable unit. In web design. The pixel is preferably used as a fixed unit.

Viewport width (vw) and viewport height (vh)

The viewport width and viewport height are relatives new units. Both are a percentage of the current screen, respectively of the width and height. In that sense, they are comparable to percentage. However, the size is always based on the size of the screen, regardless of how many elements are placed inside each other. The viewport width and viewport height are not supported by the old browser.