For mobile devices, there isn’t really a decision to be made on the main container for our content. For the most part, it just needs to fill up the screen width. For larger screen sizes however, we need to limit our container width.

The reason has to do with how we read text. If the line of text we’re reading is too long, it becomes difficult for us to read and focus on the content. According to accessibility guidelines, a line of text should be no larger than 80 characters in length. This should be what we base our container width on.

CSS ch (character) unit

This is where the ch unit comes in. It scales relative to the width of a single character, or more specifically, the width of the 0 (zero) character. And given the length of text we know to stick within, it makes it easier to set our container width based on using the ch unit.

Here are some examples:

• For this site, I use a starting body font-size of 18px with a container width of 95ch; however, for a single column of text, I reduce it by two columns in size to be narrower (at around 55ch)
• For the Blocks Edit promo site, I use a body font-size of 22px and my container width is 80ch, which comes to 979px
• And for Indie Aisle, I decided to go with a body font-size of 18px and a narrower container of 70ch, which is 701px wide

What about screen resolution?

The original desktop standard container width used to be 960px. This was based on a desktop screen resolution of 1024x768px. As monitors and screen resolutions got larger, the 960px width stuck, primarily because people would tend to keep their browsers in a smaller window instead of fullscreen. Laptops also started to grow in use which had smaller screens.

Now monitors have considerably higher screen resolutions, the minimum at 1366x768px, and the most popular at 1920x1080px. You can still make an argument for browsers still being used in a window, but even then, chances are good that they’re open at a larger size than they used to be.

The right container width

So what container width is ideal? The good old 960px standard. I’m joking. Sort of. If you go with a font-size of 20px and an in-between of 80ch for the container width, it comes to 890px, pretty close to the old standard! So it can still be used as a good desktop starting point (anything above 800px screen resolution width). Just adjust the font size and container width according to your design.

And account for larger screens. You can do it by only adjusting your body’s font size since having a ch unit set on the container would adjust it automatically. This is what I use for both this site and Indie Aisle, and it’s part of my Starter boilerplate template:

body {
  font-size: 1.125rem; /* 18px */

  @media (min-width: 1100px) {
    font-size: 1.25rem; /* 20px */
  }
  @media (min-width: 1200px) {
    font-size: 1.375rem; /* 22px */
  }
}

1200px feels closer to an actual new standard. You can go further from there if you’d like. You’ll also need to adjust font-size for your heading text and other text elements as well.