1

My question why would I ever NOT use percentage for sizes? got some good feedback, some good comments and some good answers.

They told my why not to always use percentages, and even when certain others should be used.

But, what I am still missing, as a relative beginner is some sort of checklist of when to use which units and for which purposes, maybe with use-cases / priorities. I am sure that I am not alone in this.

I am open to suggestions for a book or course, or some coding standards from a canonical source, such as W3C, maybe Google, or Facebook.

But, maybe it's just best if answers try to explain "user px for this, em/rem for that, etc", in a way that leaves little or no room for ambiguity.

4
  • IMO this question is too broad for a Q&A format. There are too many variables in play as it depends on the design, use case, and preferences of the teams. Sep 19 at 20:32
  • Thanks, Julian. Can it be migrated? Sep 20 at 5:38
  • @zach whether consciously or unconsciously, those teams when trough some sort of decision making process. I am looking for a book/course/answer which can lead me through the process. Everyone had to learn somehow. How did they learn? Or, what are some Google / FB, etc, guidelines that I can use? There is rationale. How do I acquire it (and "with experience" is a cop out :-) Sep 20 at 5:43
  • There are certainly opinionated blog pieces out there for reference, but a fairly neutral examination of the exact mechanics of each can be found at CSS-Tricks. However, since this is an implementation-focused question, I'm afraid it's off topic on UX.SE. Sep 20 at 20:43
1

This will be just a general answer just as a guideline, not as absolute truth.

And allow me to make an unofficial category list based on the Mozilla list.


When designing things you have two starting points, your overall "canvas". Your canvas could be a small screen on an old brick cellphone, or the facade of a building if you want, but you have some boundaries.

On printed media, these boundaries are well defined. Letter-size, A4, 2m long, etc.

On electronic devices, we have a problem tho. Historically display devices did not declare the pixel density at all. You could not have a monitor at all, and the OS would not notice it. It is only recently that devices, especially all in one, including cellphones that, as they have attached the display, they can declare the pixel density to the OS. Ony here we can have a direct conversion to absolute units.

Absolute unit => Pixel density => Specific size

And you have individual elements, the main one is text, but you have some elements related to it, probably a button or some other input elements.


1. Absolute units

1.1 Common lenght units: cm, mm, in

Specifically when you are sending something to be printed. This unit is used the same as you would use it in a word processor. To measure margins, column widths, or the size of some graphics.

1.2 Tipography related unit: pt

This is the common way to measure the size of typography. It does not measure specific chars, but the overall height of the family. It is mainly used on printed media.

1.3 No one use them: pc

Sorry.

1.4 WTF: Q

This is an aberration of the International System of Units. The SI is, with some exceptions, decimal. https://en.wikipedia.org/wiki/International_System_of_Units#Prefixes the Q prefix for ANY length unit, does not exist.

1.5 Px

There is much to unpack here. I will probably edit this part several times and many of my comments will be subject to some controversy.

Px is NOT an absolute unit. It is relative to the pixels displayed by a device. Back in the days where we had CRT monitors, there was a slight correlation between monitor size and resolution. We somehow have still that correlation on general use desktop monitors. In those days the myth of 72PPI for images for electronic devices was born. (This needs a more comprehensive historical review)

One problem was generated when the so-called retina device arrived. The pixels were too small to be used as a unit, for example, text, so a conversion factor needed to be applied. That is when the 2x or 3x conversion factor for images was introduced.

Px so, needed to be somehow detached from the display units, and a common pixel density, defined by Windows of 96 PPI on screens is applied as a base for pixel size. But still, Px is not, and can not be absolute.

One example is an image on a projector. If you put it further or closer, the unit will still be Px, but the physical size will change.

I will call this Px unit as CSSpx, because the pixel is in reality a raster image-related unit. A pixel has no physical dimension, it is in reality a spot on a matrix of values.

Px It is also used as a display unit, but my neologism for this is "dixel" (display-unit) and on capture devices, like a camera, a term used is "sensel". They are not the same.

2. Relative sizes

2.1 Small to big: em, rem, lh

These are again, typography-related. But relative to what? If you do not define the base unit first, they are related to the default size unit of fonts, defined by the font itself and the device.

Even here we have more relative than relative.

rem will relate to the base size. em will relate to the parent container. lh to the element itself.

2.2 No one use them: ex, ch

Probably some specialized usage like data display.

2.3 Forgotten ones:

font-size: xx-small | x-small | small | medium | large | x-large | xx-large

font-size: smaller | larger

You let the device decide, without being specific.

2.4 Big to small: Viewport related

Normally you can use these to define overall sections. For example, you could have a background texture on a section. IF you want it to cover the full screen, but as soon as the user scrolls down a bit, you use vh 100. If you want them to know there is more than just the "hero" section, use vh 90 for example.

I am mentioning backgrounds because you do not really care if the image is shown complete or cropped. You only use this for overall sections, because if you use them on individual elements you have the risk of overlapping things.

2.5 Percentages

You can use big to small or small to big. You can use them to define font size related to the base size of the font, similarly to rem or em. They can be equivalent:

font-size: 100% = 1em.

Or as a fraction of the space, the parent element leaves you. This is for block-related stuff. Paragraphs, images, diagrams.


There are many units, but you do not need to use them all, but you need to use them logically, if you need them. You need to "preview" the possible scenarios of your elements.

One common case is to fit an image, you could use with 100%, height 100%. Yes, it will fit surely. But could be deformed, or too small, or humungous depending on the user's device.


I will probably edit later the answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.