If you are a person that works in technology or uses digital design software of any kind you are probably familiar with sizing things in pixels or ‘px’. It is the standard unit of measurement when creating digital interfaces. But ‘px’ isn’t the only unit of measurement used when creating user interfaces, work with developers for a while and you may hear terms such as; REM, EM, VW, VH, %, and a few more. It will be helpful as you progress to know what each of these things means and when you should be using them yourself, or at least provide your front-end developers with a quick conversion guide.
Where do I begin?
When developing a website or application you can specify your elements be a set size in pixels (px), this is called absolute sizing. This can be useful if you want to maintain a consistent size for an element across different screen sizes or devices. However, you can run into problems if you do this for users on mobile or very large screens. This is where the other units come into play.
EM, REM, VH, VW, and % are all called relative units. This means they scale in relation to either another element on the screen or the screen itself. Both em and % scale relative to the element they sit inside, this is also called the ‘parent’ element. Rem scales relative to the most top-level element it lives in, this is also called the ‘root’ element. VW scales relative to the device viewport width and VH scales relative to the device viewport height.
Why use relative units?
Because relative units scale, they are better suited to being used when creating a responsive website or app and can help with accessibility by ensuring elements and text aren’t too small on screen. Unless specified otherwise most browsers set the default font size to be 16px. Relative units will use this base as a measurement to work from. If we create an example where the body font size is 16px:
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16px
2rem = 32px
.5rem = 8px
100% = 16px
200% = 32px
50% = 8px
This means that if you want to change your font sizes to be all larger or smaller, all you have to do is change the default body font size from 16px to whatever will work for your new styling.
REMs and EMs
One thing you might have noticed above is that rem and em both have the same sizing, so what is the need for them both? Well, we mentioned it above but they inherit their base sizing from different elements in the code. Rem inherits its base size from the ‘root’ element (HTML) and thus is great at keeping sizes consistent across your site.
Em’s inherit their base size from their parent element. This means you can deviate from the base styles of the rest of your site and have more control over the size of specific elements. Tread lightly here though, it can become difficult to remember everywhere you’ve used em’s and what their parent element sizing is. This can create inconsistencies in your site and make it difficult to update in the future.
VW, VH, and %
VW and VH stand for ‘viewport width’ and ‘viewport height’ respectively and the unit of measurement is from 0-100. So 100vh is 100% of the viewport height. VW and VH are great for responsive design and creating scaling spacing and widths or heights of elements. It’s also great when you want to ensure an element takes up the full width or height of the screen.
Though viewport width and height use percentages to calculate the size of the element they differ from simply using % by itself. Like rem and em they take their base 100% sizing from different elements; VW and VH from the viewport and % from the element it sits inside. Using percentage is useful when you want an element to scale to a container. This is handy for things like modals, drawers or other size constrained elements that may take their own size from the viewport.
Choosing a unit of measurement
What unit you choose will depend on what element it is you are sizing and whether or not you need it to be responsive or not. PX is an absolute unit and should be used sparingly and only for elements you want to remain the same size across all devices and screen sizes. From there it really depends if you are scaling a font or a visual element. EM and REM are mainly used for scaling font sizes, however, they can be used to scale other elements on the screen. The inverse is true for VH, VW, and %.
VH and VW are useful when creating elements you want to take up the full width or height of the screen and so work best for larger elements and backgrounds. But you are free to choose whichever you think suits your needs best at the moment.
Sympli is a Saas company that creates tools for design collaboration, handoff, and version control. With more than 5 years on the market, we had helped thousands of designers and developers work together by providing a single source of truth and reducing back-and-forth communications, resulting in faster delivery.
