{"id":5971,"date":"2020-10-25T20:02:00","date_gmt":"2020-10-25T20:02:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5971"},"modified":"2020-11-22T20:12:31","modified_gmt":"2020-11-22T20:12:31","slug":"taking-a-look-at-css-units-pixels-em-and-percentage","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/taking-a-look-at-css-units-pixels-em-and-percentage\/","title":{"rendered":"Taking a look at CSS Units: Pixels, EM, and Percentage"},"content":{"rendered":"\n

Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage<\/strong>.<\/p>\n\n\n\n

In this post, we are going to run through these units to get further insight into these units of measurements.<\/p>\n\n\n\n

PX<\/h2>\n\n\n\n

Pixel is a fixed unit measurement and the smallest unit on screen measurement but don\u2019t confuse this with the Pixel that defines screen resolution. The Pixel in CSS has nothing to do with the screen resolution.<\/p>\n\n\n\n

When we try viewing a web page fixed at 1024px<\/strong> width say on a tablet with 1024px by 480px<\/strong> screen resolution, the web page will not fit in the screen.<\/p>\n\n\n\n

I\u2019ve been experiencing this issue in the past and found out that the Pixel in CSS is actually not a linear unit \u2013 it is in fact a radial measurement.<\/p>\n\n\n\n

Basically, the Pixel in CSS measures the length of the display area instead of the screen resolution, so the 1024px screen resolution does not mean that the screen is also 1024px<\/strong> of the length.<\/p>\n\n\n\n

More On PX<\/h2>\n\n\n\n

I\u2019m not an expert on the technicalities in this matter but if you know Trigonometry<\/a>, and want to find out more, check out the following explanation from Sean B. Plamer<\/strong>: CSS px is an Angular Measurement<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Finding the Display Area<\/h2>\n\n\n\n

So, how do we find the actual display area of a device? Luckily, there is a handy special calculator to\u00a0roughly estimate<\/strong>\u00a0the display area in format of Pixel, CM to PX<\/a>.<\/p>\n\n\n\n

We simply need the length of the device in cm<\/code> and the PPI (Point Per Inch) \/ DPI (Dot Per Inch) which you can get these from the device box. With this, it turns out that the tablet I used is merely 953px<\/code>in length.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Pixels Font Size in Photoshop<\/h2>\n\n\n\n

When working on Photoshop, we will find that the font size is by default set to Pt (Points)<\/strong>. The Pt unit is ideal for print styles.<\/p>\n\n\n\n

To not confuse this with px<\/code> when we are translating it to Web documents, we can change the units from the following menu: Edit > Preferences > Units and Rulers<\/strong>.<\/p>\n\n\n\n

There, you get a window option as shown in this screenshot below. Choose \u2018pixels\u2019 for the Type unit.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And, we have px for the font size.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

EM<\/h2>\n\n\n\n

EM is a relative measurement. In CSS, EM refers to the multiplication of the default font size from the device or the document itself, that is why I personally word EM as EMphasize<\/strong>, but of course don\u2019t take my word for it.<\/p>\n\n\n\n

Here is an example; let\u2019s say in a document, the font size is assigned for is 16px<\/code>. 1em<\/code> is equal to 16px<\/code>, 2em<\/code> is equal to 32px<\/code> and so on.<\/p>\n\n\n\n

Although EM is traditionally used for font sizing and in fact it is the standard unit used in browser styles for measuring font size, we can also use EM to define an element\u2019s length.<\/p>\n\n\n\n

The only constraint when working with EM unit is it is not quite intuitive, but there are two practical ways we can handle this. First, we can use this calculator, PX to EM<\/a>; it\u2019s a handy calculator that I use often.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Another way is to set the document pixel base to\u00a010px<\/code>, so we can calculate it more easily; for instance, setting\u00a015px<\/code>\u00a0at\u00a01.5em<\/code>. Well, I hope you get the basic idea with this example.<\/p>\n\n\n\n

Percentage<\/h2>\n\n\n\n

It is more straightforward with percentage, which measures relatively to the parent length. When the parent width is\u00a0800px<\/code>\u00a0then\u00a050%<\/code>\u00a0would become\u00a0400px<\/code>. In recent years, as\u00a0Responsive Design<\/strong>\u00a0starts becoming the web design standard<\/strong>, percentage unit is adapted more frequently in the wild.<\/p>\n\n\n\n

Alright, let\u2019s take a look at the following example; this code below defines .container<\/code> and .main<\/code> class selector with 60%<\/code> for the width, but these classes refer to different parents thus they generate different lengths.<\/p>\n\n\n\n

The .container<\/code> will take 60%<\/code> of the browser viewport width, whilst the .main<\/code> will take .container<\/code> width as its direct parent.<\/p>\n\n\n\n

.container {<\/code>width<\/code>: <\/code>60%<\/code>;<\/code>margin<\/code>: <\/code>100px<\/code> auto<\/code>;<\/code>background-color<\/code>: <\/code>#eaeaea<\/code>;<\/code>padding<\/code>: <\/code>1%<\/code>;<\/code>height<\/code>: <\/code>250px<\/code>;<\/code>font-family<\/code>: <\/code>Arial<\/code>;<\/code>text-align<\/code>: <\/code>center<\/code>;<\/code>}<\/code>.main, .aside {<\/code>line-height<\/code>: <\/code>253px<\/code>;<\/code>}<\/code>.main {<\/code>width<\/code>: <\/code>60%<\/code>;<\/code>height<\/code>: <\/code>100%<\/code>;<\/code>float<\/code>: <\/code>left<\/code>;<\/code>background-color<\/code>: <\/code>#ccc<\/code>;<\/code>}<\/code>.aside {<\/code>width<\/code>: <\/code>40%<\/code>;<\/code>height<\/code>: <\/code>100%<\/code>;<\/code>background-color<\/code>: <\/code>#aaa<\/code>;<\/code>float<\/code>: <\/code>left<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Thus, it will give us the following nice result:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As percentage is also a relative unit, so it has a similar constraint like the EM unit as well. It is not obvious how much a percentage 15px<\/code> is of 500px<\/code>? This generally happens when we translate px<\/code> unit from the design stage to web document in many cases.<\/p>\n\n\n\n

There are two ways we can take to this matter, either we do it traditionally with a calculator or if you are comfortable with using CSS Pre-processor, you can utilize the percentage()<\/code> function from Sass<\/a>.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

There are many discussions on the best practices of using units in web design. But ideally the PX unit should be used when the properties generally need to be precise e.g. the border-radius<\/code> and box-shadow<\/code> horizontal or vertical offset, whilst for the EM unit as suggested by W3C is better used for font sizing<\/a>. Percentage is the ideal unit to use on responsive layouts.<\/p>\n","protected":false},"excerpt":{"rendered":"

Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage. In this post, we are going to run through these […]<\/p>\n","protected":false},"author":2,"featured_media":5978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,77],"tags":[25,56,94,146,116,73,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/css-units.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1yj","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5971"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5971"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5971\/revisions"}],"predecessor-version":[{"id":5979,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5971\/revisions\/5979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5978"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}