Get started
Get the right tools
/>
Get inspired
Get help
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.

Pixels (px)

De meest gebruikte eenheid in webdesign is pixel. Een pixel staat voor een stipje op je website. In die zin is de pixel heel exact. Een element op één plek van de website van 100 pixes en een ander element op een totaal andere plek op de website van ook 100 pixels breed zijn even breed. Altijd.

Het feit dat pixels zo voorspelbaar zijn maakt ze eenvoudig in gebruik. Net als een centimeter altijd een centimeter is. Er zitten echter ook een nadeel aan. Niet elk scherm bestaat uit evenveel pixels. Veel computerscherm zijn tegenwoordig een kleine 2000 pixels breed, terwijl een smartphone niet ver boven de 600 komt. Een element wat 1000 pixels breedt is, is op een computer slechts de helft van het beeld. Op een smartphone past deze echter niet op het scherm. Dat maakt dat pixels bij een responsive website soms danig in de weg kunnen zitten.

Percentage (%)

Een andere manier om de grote van iets aan te geven is het opgeven van een percentage. Als je een percentage opgeeft, bedoel je daarmee een percentage van het element waar dit element in zit. Bij Webanizr websites is dit altijd het direct omliggende element. Schrijf je ruwe html en css is het het eerst omliggende element dat de positie-eigenschap absoluut, relatief of vast heeft.

Percentage is een populaire eenhoud voor responsive websites omdat de inhoud schaalt naar de grootte van het scherm. Mits het gebruik van percentages consequent is doorgevoerd.

Em

Em is een eenhoud dit vaak wordt gebruikt bij tekst, in veel geval om regelhoogte aan te geven. Oorspronkelijk gaf de eenheid de grootte van de letter M aan, vandaar de naam. Nu geeft het grofweg de hoogte van een tekstregel aan. Met de grootte 2 em bedoel je dus eigenlijk 2 regels.

Rem

Rem ligt heel dicht bij de eenheid em. Er is echter een klein verschil. Em is een eenheid om basis van de huidige standaard. Op het moment dat je bijvoorbeeld de regelhoogte op 2 em zet en daarbinnen wederem een element plaatst met een regelhoogte van 2 em dan wordt hierbij de regelhoogte wederom 2 keer zo groot.

De grootte van Rem is niet gebaseerd op de al aanwezige regelhoogte. maar op de grootte van het gebruikte font en fontgrootte. 2 rem is dus letterlijk 2 regels, gebaseerd op het font en de grootte van het font. Dit maakt rem wat voorspelbaarder.

Point (pt)

Point is een eenheid uit de drukwereld. Een punt in drukwerk is ruwweg vergelijkbaar met de definitie van een pixel voor beeldschermen. Bij beeldschermen wordt een point omgezet in een aantal pixels. Het is dus ook een vaste eenheid net als pixels. Het omzetten gebeurd op basis van de instellingen van de computer. Dat maakt point een wat onvoorspelbare eenheid. In webdesign wordt daar om bij voorkeur de pixel gebruikt als vaste eenheid.

Viewport width (vw) en viewport height (vh)

De viewport width en viewport height zijn relatieven nieuwe eenheden. Beide zijn een percentage van het huidige scherm, respectievelijk van de breedte en de hoogte. In die zin zijn ze vergelijkbaar met percentage. De afmeting wordt echter altijd gebaseerd op de grootte van het scherm, ongeacht hoe veel elementen binnen elkaar worden geplaatst. De viewport width en viewport height worden door oude browser niet ondersteund.