CSS text formatting basics

A while back I switched to using rems for text size. After reading various articles, it was this article that made rems make sense to me. It explains how rems should be used functionally, primarily for text sizing since it’s text size that matters for reading accessibility for users to scale using their browser settings.

It also means rems on layout elements should be avoided since they end up messing with the design, and in a lot of cases actually make things worse for reading. This includes on padding and margins for spacing. Though it would make sense to use rems for margins used for spacing between paragraphs.

Managing sizes

The article also gives a few ways to make it easier to manage size properties given the numbers we now have to work with, especially when we’re used to pixel sizes. The method I prefer, and use on this site, is by setting up CSS variables like this:

:root {
  --12px: 0.75rem;
  --14px: 0.875rem;
  --16px: 1rem;
  --18px: 1.125rem;
  --20px: 1.25rem;
  --22px: 1.375rem;
  --24px: 1.5rem;
  --28px: 1.75rem;
  --32px: 2rem;
  --36px: 2.25rem;
}

Your size options would vary based on what your design needs. Here’s a good px to rem conversion tool that may be helpful.

Other considerations

There is a way to autosize fonts for various devices. But I personally prefer to set specific sizes for different breakpoints to make sure each size works well with the overall design. The same goes for line height, though I typically use the same line-height for all screen sizes. And spacing in-between paragraphs, which I tend to use across the board for titles and paragraphs.

h1, h2, h3, p, ul, ol {
  margin-bottom: var(--20px);
}
h1, h2, h3 {
  line-height: 1.2;
}
h1 {
  font-size: var(--36px);

  @media (max-width: 800px) {
    font-size: var(--32px);
  }
  @media (max-width: 480px) {
    font-size: var(--28px);
  }
}
h2 {
  font-size: var(--28px);

  @media (max-width: 480px) {
    font-size: var(--24px);
  }
}
h3 {
  font-size: var(--24px);

  @media (max-width: 480px) {
    font-size: var(--18px);
  }
}
p, ul, ol {
  line-height: 1.4;
}

If you want to look into a way to use autosizing, here’s a good overview of how to get it to work.

For another example of the above approach, check out this boilerplate template that I worked on and use as a starting point for my projects.