Table of contents
No headings in the article.
The ability to specify the size and placement of components on a web page is one of CSS's most crucial functions. For this purpose, CSS offers several units of measurement to specify the length, size, and other parameters of elements.
There are so many units that can be used when assigning values to CSS properties. They include:
Pixels (px)
Percentages (%)
Ems (em)
Rems (rem)
Points (pt)
Viewport units (vw, vh, vmin, vmax)
Centimetres (cm)
Millimetres (mm)
Inches (in)
Picas (pc)
Note: Before using a unit in your CSS, make sure it is compatible with the browser and device you intend to use it on. Not all units are supported by all browsers and devices. Additionally, some units, such as cm, mm, in, and pc, may not be applicable for web design because they are usually used for print stylesheets.
Overall, the most popular CSS units are pixels, percentages, ems, and rems, and it's always better to use the unit that best meets your design requirements and the behaviour you wish to achieve. In this article, we will focus on the main ones and discuss when to use each one.
Pixels (px): In CSS, the pixel (px) is a constant unit of measurement. It is used to specify the size of items on a web page and is referred to as the smallest unit of a digital image. On a display screen, one pixel is equivalent to one dot, and the size of the dot depends on the resolution of the screen.
When you require a set size that is unaffected by the user's screen resolution or font size, pixels are a viable option. For instance, it is frequently preferable to define a button's width in pixels to guarantee that the button will retain the same size regardless of the user's device.
There are some drawbacks to using pixels (px) as the unit of measurement in CSS, including:
Fixed size: Pixels specify a fixed size that is independent of the user's font size or screen resolution. On many devices, this may cause items to look too big or small.
Lack of accessibility: Users with visual impairments may find it challenging to read and navigate a website due to the use of pixels. For instance, items with fixed pixel widths might not adapt if users need to increase the font size to make it readable.
Issues with responsiveness: Because pixels do not react to variations in aspect ratio or screen size, it is difficult to make mobile-responsive designs.
Poor scalability: Pixels do not scale well, especially on high-resolution displays. On larger displays, this may result in small text or other components that are challenging to read.
To address these drawbacks, it is generally recommended to utilize alternative units, such as percentages or ems, to develop more flexible and responsive designs that can adjust to various screen sizes and resolutions. By using these units, you can ensure that your designs are accessible and usable for all users, regardless of their devices or preferences.
Percentages (%): Percentages are a unit of measurement that defines the size of an element relative to its parent element. For example, if you set the width of an element to 50%, it will occupy half the space of its parent element.
When you want an element to change size depending on the user's screen or window, percentages come in handy. For instance, you can use percentages to have a container element grow or shrink proportionally to the size of the screen.
Em: The em is a proportional unit of measurement based on the element's font size. The font size of the element itself is equal to one em. For instance, 1em is equal to 16px if the font size of an element is 16px.
Em units come in handy when you want to make a responsive design that changes depending on the user's preferred font size. For instance, you can adjust an element's padding or margin using em units so that it is proportional to the font size.
Rem: Similar to the em, the rem (root em) refers to the root element's font size rather than the element itself. The font size of the root element will therefore have an impact on all other items on the page.
Rem units come very handy when you want to keep the font size the same throughout your entire website, independent of the size of the individual elements.
In conclusion, the requirements of your design will determine the CSS unit you choose. For fixed-size elements, pixels work best, percentages work best for adjusting to screen size, ems work best for responsive designs based on font size, and rems work best for keeping font size constant throughout a web page. It's crucial to take your design's desired behaviour and your users' demands into account when selecting a unit of measurement.