Universal Design Principles: Units of Measure

 Universal Design Principles: Units of Measure

Surely the term "pixel" is not new to you, it was the most popular unit of measurement in digital products, until Apple introduced the Retina display .

The Retina display changed the way we think about screen or device size , as this technology has twice the number of pixels per inch on the screen. Although they appear to be the same size, if we compare 2 elements on a retina and a non-retina screen, the total number of pixels that make up that element is very different. For example, a button that is 48 pixels tall on a normal display will become 96 pixels tall on a Retina display, due to pixel density.

Since then, many displays with high pixel density “retina display” are in practically all devices. Fortunately, retina displays are defined by the number of pixels per square inch, which in the case of a standard display, has a density of 1 pixel.

The term "pixel" is still used to describe the size of a screen or device, although to avoid confusion, many designers and developers prefer to use the term "dot" or "pt", which describes the size, regardless of pixel density. from the screen. In this way, regardless of whether it is a retina screen or a standard screen, the proportion of the elements in your design will always be the same.

The 8pt grid system

When you work with some design software, such as Illustrator, Photoshop, Sketch, XD, Figma, etc., it is very common to use the grids or columns, it is a way to help you with the alignment and maintain the proportion .

 

The 8pt grid system was introduced by Google's UI, Material Design . This system is made up of 8x8pt squares. In this way you will always have as a result provided elements divisible by 8.

Conclusion

Units of measurement such as "px" or "pt" are key to your designs. Evolving towards "pt" can be a great way to make your designs more scalable, especially with the 8pt system, since the most common screen sizes are divisible by 8.