How to choose the best CSS units for styling elements in my template?

CSS units are one of the most fundaments aspects of web design. It’s crucial to know how to use them in order to define your website’s font-sizes, measuring spaces, setting width of your images and etc.

Jupiter X represents multiple units of measurement you can use in your theme like PX, REM, EM and Percentage.

In this article we will introduce and describe each of them and show which CSS units recommended to use in your design.

Pixel (px)

The most commonly used unit in designing website. It’s an absolute unit which means it depends on certain absolute value and is not affected by any other units. It also considered the base of measurement for many other units. Despite of its simplicity, the pixel unit is a bad practice for your end users because of its accessibility. Let me show you an example. In most browsers users can set their own default font-size for websites. If you explicitly set the font-size of any element of your website in pixel (For example 24px), the choice of your users doesn’t affect on the size of that element. What if you could consider the choice of your end users in your website. That’s why the relative units matter. 

EM

Em is a relative length and a way of setting font-sizes which depends on the size of the parent font-size element or the document. For example if a parent element has font-size: 16px, then 1em will be measured 16px for all its child. But we don’t suggest you to use this unit. because the font-size of each element depends on its immediate parent’s font-size. If you have multiple nested element, by using the EM unit you quickly lose track of maths and you don’t know what size is what. This is what REM solves.

REM

REM is very similar to EM. It’s a relative unit but size of each element with REM unit always refers back to the root and not its immediate parent. So if you set the font-size of your root element to 18px, a nested element with 2 rem has font-size: 36px. No matter what’s the size of its parent. It always refers to main root element size. therefore REM is very manageable unit and recommended to use it especially in the font-sizes.

Percentage (%)

Percentage is one of the relative and also useful units especially for creating a responsive of fluid layout. 
Percentage is relative to the element’s parent (Just like the EM unit). For instance if you set the width of an element to 50%, that would be 1/2 width of its parent.

Conclusion

Actually there is no best CSS unit for web design, but here is a tip:
Pixel is not very suitable for your end users, but it’s a simple and easy to use for you to create your template without any extra math. REMs is one of the best relative units especially in font-sizes so that we recommend you to use this unit most of the time. Percentage is a good and simple option to create your layout responsive. 

For further information about CSS units we suggest you to read this and this articles.