I'm a Systems Reliability and DevOps engineer for Netdata Inc. When not working, I enjoy studying linguistics and history, playing video games, and cooking all kinds of international cuisine.
All of them are usable interchangeably. In fact, you can even mix them in calc() calls and it will work correctly (a lot of CSS frameworks do this to properly account for padding and borders when computing sizes).
In general though:
Inches, points (1/72 of an inch, or roughly 0.353mm), millimeters, and centimeters should all be avoided unless you need to (try) and have a 'real size' or properly scaled image. In CSS, they get computed from pixel counts based on the pixel size of the display. The problem is that this is unreliable except for print media (printers pretty much always know their dot-pitch), as modern displays may have different pixel sizes in the horizontal and vertical axis, and many displays lie about their DPI/DPM.
Pixels should only be used when you need very thin lines (for example, borders) or are trying to set the exact size of an image to prevent it from getting scaled (though the second case doesn't work reliably, and should use one of the other physical units instead when dealing with print media (1px in print media for most CSS implementations is equal to 1pt). They aren't responsive, aren't consistent, and sometimes interfere with zoom functionality.
Viewport units should be used sparingly for things like overlays that need to scale only based on the size of the display. Even then, they're tricky to get right and can cause issues (if not used correctly, they will cause problems at non-default zoom levels). They also have a number of odd quirks that vary from browser to browser (for example, everything but Firefox implements 100vw incorrectly (they include the scrollbar width, but should not)). You almost never want to use them for things like font sizes, as they can exhibit some really unexpected behavior there for users (imagine the font size changing when the user resizes the browser window or switches into or out of full-screen mode).
Percentages should be used when you need to scale a property based on the value of the same property in the parent element (or what the computed value for that property is for the parent element). For example, controlling how big sidebars are in text, or helping set some default number of elements per row/column in a flexbox layout. Percentages technically work for font sizes, but I would advocate avoiding using them for that, as EM's and REM's work just as well and behave in a slightly more logical manner for most people.
EM's should be used when you need to scale a property off of the font size of the element (or the font size of it's parent if you're using them to set the element's font size). Usually this is just used for tweaking the font-size of small sections of text. An example use case would be the pages that some sites have with a big list of tags, with each tag's text size based on it's popularity. Many such sites use a single <span> element for each tag, and change the font-size of that using EM units.
REM's should be used for almost everything else. They work like EM units, but scale off of the font size of the document root element (so the <html> or <body> element in most cases), which means that they're consistent regardless of where they are being used in the hierarchy (IOW, 1rem is always the same size, no matter where it shows up in the hierarchy), and, as a result, are easier for most people to reason about.
All of them are usable interchangeably. In fact, you can even mix them in
calc()calls and it will work correctly (a lot of CSS frameworks do this to properly account for padding and borders when computing sizes).In general though:
1pxin print media for most CSS implementations is equal to1pt). They aren't responsive, aren't consistent, and sometimes interfere with zoom functionality.100vwincorrectly (they include the scrollbar width, but should not)). You almost never want to use them for things like font sizes, as they can exhibit some really unexpected behavior there for users (imagine the font size changing when the user resizes the browser window or switches into or out of full-screen mode).<span>element for each tag, and change the font-size of that using EM units.<html>or<body>element in most cases), which means that they're consistent regardless of where they are being used in the hierarchy (IOW,1remis always the same size, no matter where it shows up in the hierarchy), and, as a result, are easier for most people to reason about.I really appreciate your answer taking your time to explain each of them! It really helps. Thanks!