Designers out there that are new to the UX/UI world, REM, VH and VW may seem completely confusing and impossible to understand but they’re actually quite easy to master once you get the basics.
What they are:
Pixel (px)
A pixel or picture element is one of the most commonly used adjustable unit points, which means it is the smallest editable unit of an image on a screen.
Pixels are the building blocks of visual design. They allow us designers to manipulate pixels to produce a desired result.
Pixel size is very important to consider pixilation and slow loading times. The three most important things to look at are image height, width and the pixels per inch.
(PPI is the number of pixels per square inch of your image, a higher PPI means a higher resolution image)
One might be quick to assume that a high PPI is always desirable. Sadly, it is not because the bigger your file, the bigger your PPI, and the slower your web loading time will be.
There is an optimum point in terms of PPI. I A large image with a low PPI will render highly pixelated. The most used PPI is 72 pixels however, it is recommended to export an image at differing PPI increments in order to see which (increment) renders most appropriately.
REM (root em)
Personally as a young new designer, I had no idea what rem is. I had no idea what rem was, so I asked one of our full stack developers to provide me with a simple explanation. Here’s what he said, “rem is relative to your browser settings whereas pixels are absolute, meaning no matter what settings you have 10px is always 10px, but 10 rems could be equivalent to 160px. 1 rem is 16px by default”. The rem unit means “The root element’s font-size”.
Rem is used to make a design more responsive; think about looking at your grandparents phone, their font size set to the max, almost giving you a fright it’s so oversized but that is not the way they see it, using REM allows for that type of function to happen. Dont think of rem as a unit, think of it as a multiplier, 1 rem is usually 16 px, so if you need 3 rem, it’d be 16x 3 to give you 48.
The same would work if you change the root element font size to be 50 px, 1 rem would be 50 and 3 rem would be 150.
Viewport Height (vh) & Viewport Width (vw):
VH and VW are best used for large elements or backgrounds — things that’ll take up a lot of space on your screen.
Viewport measurements are always a percentage of the size of your screen. So, if you set your VH to 50%, it’ll take up 50% of your screen, regardless of the device being used.
One example where Viewport units are helpful is if developers want to create a hero section that takes up the exact width or height of the screen.
Vmin and vmax fall into VH and VW, vmin is the minimum percentage you can get between the dimensions of your screen, this is not a concept I grasped easily so I went back to the developers for help.
The simplest way I could put it is that vmin is always a percentage of the smallest measurement of your screen. This example that helped me wrap my brain around as it:
Picture your screen is 1440px by 800px
You set the value of vmin to 80%, it would be 80% of 800. Vmin always takes the smallest dimension so in this scenario it will be, 80% of that dimension to determine your size.
Vmax works in the opposite way.
If you set your width of your vmax at 80% it would be 80% of 1440.
Now that you’re fully competent regarding these measurements (or totally lost), let us do a quick recap:
- Use pixels when you want an element’s measurement to remain consistent, regardless of the browser or device. Pixels are absolute.Meaning that no matter what device you are on, 16px will always stay 16px.
- Rem is best used when developing with responsiveness in mind. Valid usage of rem is massively beneficial during web development; measurement relativity is crucial and will alleviate many hair-pulling scenarios. Example: on a mobile device the root font size may be 12px (as opposed to the default of 16px on a PC browser), by using rem throughout, measurements will scale appropriately. If px (and other absolute) measurements were mindlessly slapped in, a developer is going to have a nightmare of a task defining media breakpoints to adjust measurements appropriately. And there could be hundreds of locations in a large project requiring breakpoints.
- Viewport height and viewport width, work very well for developing large, responsive objects. These units produce maximum utility when the measurements of an item must consider the dimensions of the viewport. Examples of where they can be used are hero sections, background images and headlines.
References:
Pixels — https://xd.adobe.com/ideas/principles/web-design/what-is-a-pixel/#:~:text=A%20pixel%2C%20al
so%20known%20as,range%20of%20shapes%20and%20images.
https://mockitt.wondershare.com/dictionary/what-is-pixel.html
REM -
VH & VW -
https://alligator.io/css/viewport-units/#:~:text=vh%20%26%20vw,when%20the%20viewport%20is%20resized.
https://blogs.perficient.com/2022/01/05/how-to-understand-viewport-units-in-css/
