There are many alternatives but these are probably the most useful:
|Unit||What it is||Why use it||Example|
|px||A pixel in CSS is the smallest dot on your screen which can be seen and used to draw clear straight lines. It is not necessarily a physical pixel on a screen or printer (especially if the display (or printer ) is very high resolution). A CSS pixel might be made up of a number of physical dots on the screen but will always be the same number of dots when that device is used (the number chosen by the device to be clear and consistent so is beyond your control).||Allows you to control size precisely and in an understandable way but also allows for readable fonts on any display as pixel sizes will vary depending on the device and so should present (say) 16px at a readable size always on every device. Objects defined in whole number pixels will always be clear because the device has chosen the pixel size and guarantees to be able to draw a dot where a dot needs to be.||16px|
|em||Based on the current font size (originally it was the width of a capital M but now not) which initially will be set by the browser and is probably 16px but can be changed in CSS. When you then use em to set a size it will be based on the main font size.||The default font size is set by the browser and hopefully allows for the size and type of screen being used. Using em bases your other sizes on that font-size and objects should be an appropriate size on any screen. It does mean that a large font will mean large objects and a small font small objects (e.g. margins, div sizes) which you might not want. Also relative sizes may result in slightly fuzzy borders/objects/fonts as they might require a dot where the display cannot draw a dot (between two of the physical pixels on the screen).||0.9em|
|rem||The same as em but always based on the original font size set in the root element (html) and not the current one.||Using em as a size can cause trouble as it uses the current font size for the element so if you have three div elements inside each other and set the font in each to 0.8em the third one will be 0.8x0.8x0.8 or 0.512em. However, rem always bases sizes on the font in the html element so no need to allow for inherited sizes. It is a great development but is fairly new and so may not work on all browsers (when it does it may take over).||0.9rem|
|%||Based on a percentage of the parent element for widths so if used in a rule to set the width of a div to 50% the div will be half the size of whatever it is inside. For font sizes it is a percent of the font-size set previously so if that was 20px and you said 80% it would be 16px.||Allows layout to adapt to different window sizes so that layout can be made to stay the same on many systems but often at the cost of usability because, unlike em it is based on viewing area not on a size suitable for the user (on a big monitor objects/fonts may be enormous and on a small one tiny.||78%|
|vh/vw||A percentage but always based on a percent of the height or width of the browser window and not on the parent element. So if a screen is 1280 pixels by 1024 pixels, the browser is in full screen mode and you have a div set to 50vh it will be 512 pixels high regardless of any other things on the screen||As with percent it allows you to keep everything in proportion and make sure everything fits but again possibly at the expense of readability. It is also quite new so may not work properly in all browsers.||78vh|
|vmax/vmin||Takes the largest or smallest of the two dimensions height and width but otherwise the same as vh and vw. So a div of 50vmax will be 640 pixels on the screen mentioned above.||As above but allows for screens or printed pages with strange proportions.||78vmin|
Pixels and ems are the only two recommended for all uses but anything is acceptable if you want. Many experienced developers set the font size in body as 62.5% of the default. As the default will usually be 16px this then becomes 10px. 1em now equals 10px so it is easy to swap between those two and use both in the page without difficult calculations.
In a few years rem is probably the single one to use for usability and vmin for precise layout but for now you would need to allow for older browsers which do not recognise those units.
All of this is opinion so you are free to have your own but to have an opinion you should have tried the different methods. Do this to get started:
- create a page called sizes.html
- create at least 8 identical paragraphs with just over a line of text in each one
- give each paragraph a unique id (you will be using the 8 ways to set size from the table above - the bottom two rows have two methods in each row)
- in the external style sheet add a rule for each of those paragraphs using the id
- in each rule set the font-size and the margin of one paragraph using the one of the units in the table above (use the same units for font and margin e.g. font-size:20px; margin:10px;)
- put a heading above each paragraph (or change some of the paragraph text) saying what sizing method has been used for each one
- try the page and then adjust the size of the browser window, zoom the page (ctrl scroll on a PC) and if possible changing the screen resolution (or viewing on a second device)
The percentage one should be the only one where the margin changes as the window size changes. The font size changes between resolutions on the same screen is the most interesting change. Pixels (and em which is based on the font-size in pixels) will look too big on a lower resolution (where pixels are bigger). On the other hand vm and vw will adapt better being based on a percentage of the screen pixels rather than the size of those pixels.
To illustrate the difference between em and rem you put those two paragraphs in a div and set the font-size in em for the div. The em paragraph will be smaller.