Should I use px or rem value units in my CSS?

TL;DR: use px.

The Facts

  • First, it’s extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi.
  • Sizes specified in ems are relative to the parent element. This leads to the em‘s “compounding problem” where nested elements get progressively larger or smaller. For example: body { font-size:20px; } div { font-size:0.5em; } Gives us: <body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25px
  • The CSS3 rem, which is always relative only to the root html element, is now supported on 99.67% of all browsers in use.

The Opinion

I think everyone agrees that it’s good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it’s easier to read.

In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as ems). This is because the browser’s font size menu simply changed the root font size. Thus, if you specified font sizes in px, they wouldn’t scale when changing the browser’s font size option.

Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.

Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that’s a very esoteric way of going about it and I’d wager nobody1 does it. (In Chrome, it’s buried under the advanced settings, Web content, Font Sizes. In IE9, it’s even more hidden. You have to press Alt, and go to View, Text Size.) It’s much easier to just select the Zoom option in the browser’s main menu (or use Ctrl++/-/mouse wheel).

1 – within statistical error, naturally

If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It’s much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don’t have to worry about compounding. (“I was told there would be no math” – there’s dealing with having to calculate what 1.5em actually works out to.)

One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don’t have to worry about unexpected font sizes from breaking your layout.

So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you’ll have to use ems anyway.

Related Posts:

  1. Open source social media icons to download and use on website? [closed]
  2. CSS calc width and height values
  3. Center image using text-align center?
  4. See answer keys in Google Form (quiz) source page?
  5. CSS Background Opacity [duplicate]
  6. CSS Background Opacity [duplicate]
  7. How do I vertically align text in a div?
  8. Why does z-index not work?
  9. How do I vertically center text with CSS?
  10. Center image horizontally within a div
  11. Failed to load resource: the server responded with a status of 404 (Not Found) css
  12. How do I vertically center text with CSS?
  13. Remove CSS class from element with JavaScript (no jQuery) [duplicate]
  14. Set cookie and get cookie with JavaScript
  15. Prevent line-break of span element
  16. How to align iframe always in the center
  17. How do I auto-resize an image to fit a ‘div’ container?
  18. Expected RBRACE, but the bracket is there?
  19. How to make an image center (vertically & horizontally) inside a bigger div
  20. How to center text with Markdown?
  21. CSS `height: calc(100vh);` Vs `height: 100vh;`
  22. Disable Scrolling on Body
  23. Darken CSS background image?
  24. CSS no text wrap
  25. Responsive image map
  26. How to wrap text around an image using HTML/CSS
  27. Bootstrap 4 Sticky Footer Not Sticking
  28. How to change css property using javascript
  29. How to make a whole ‘div’ clickable in html and css without JavaScript?
  30. How (and why) to use display: table-cell (CSS)
  31. Vertical Text Direction
  32. How to darken a CSS background image?
  33. How can I create a marquee effect?
  34. How can I make a CSS glass/blur effect work for an overlay?
  35. Maintain the aspect ratio of a div with CSS
  36. What is the difference between id and class in CSS, and when should I use them?
  37. How to set Helvetica font?
  38. right align an image using CSS HTML
  39. Indent starting from the second line of a paragraph with CSS
  40. CSS Background Image Not Displaying
  41. jQuery.addClass not working
  42. what’s the easiest way to put space between 2 side-by-side buttons in asp.net
  43. Vertically centering a div inside another div
  44. How to move image with css/html
  45. CSS list-style-image size
  46. html not linking css
  47. How to style the option of an html “select” element?
  48. CSS pick a random color from array
  49. Removing border from table cells
  50. Adding background image to div using CSS
  51. How to display hr horizontally with flex?
  52. Center a DIV horizontally and vertically
  53. how to overwrite css style
  54. How can I move this text up using CSS?
  55. Target a css class inside another css class
  56. CSS float right not working correctly
  57. How can I vertically align elements in a div?
  58. How to give spacing between buttons using bootstrap
  59. How can I override Bootstrap CSS styles?
  60. Space between two rows in a table?
  61. Styling an input type=”file” button
  62. Make a div fill the height of the remaining screen space
  63. How to stick footer to bottom (not fixed) even with scrolling
  64. Setting table row height
  65. How do I disable the resizable property of a textarea?
  66. How to change the background-color of jumbrotron?
  67. Add image in title bar
  68. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  69. What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
  70. How to display a gif fullscreen for a webpage background?
  71. Padding a table row
  72. vertical-align with Bootstrap 3
  73. How to add image that is on my computer to a site in css or html?
  74. How do I align in my image to move it vertically up?(CSS,HTML)?
  75. How to use PHP inside css file
  76. Setting a max character length in CSS
  77. Bootstrap Columns Not Working
  78. How to center an unordered list?
  79. Align an element to bottom with flexbox
  80. How can I change the thickness of my
    tag
  81. How to make div appear in front of another?
  82. PHP Include Nav-bar For Every Page Techniques?
  83. External CSS not working
  84. How to exclude particular class name in CSS selector?
  85. How to create spoiler text?
  86. How do I center text in a span?
  87. HTML/CSS–Creating a banner/header
  88. text-align justify not working
  89. Change hover color on a button with Bootstrap customization
  90. Alternate table row color using CSS?
  91. How to make a div 100% height of the browser window
  92. How to create a hidden in JavaScript?
  93. How to resize an image to fit in the browser window?
  94. How to make a DIV not wrap?
  95. CSS “and” selector – Can I select elements that have multiple classes?
  96. HTML / CSS table with GRIDLINES
  97. CSS: Background image and padding
  98. Layout a flex box similar to a table?
  99. Firefox CSS Animations Broke [closed]
  100. How can I insert a disclaimer in a WordPress site?

Leave a Comment

tech