Home About Services Pricing Demos Blog Resources Contact

Novia Media

Web Design & Digital Marketing Services for Artists & Small Businesses

Why get a website?

Your overall design is old or outdated

Current site has a poor user experience

Current site lacks responsive design

To rebrand yourself or your business

Your competitors have modernized their sites

You have a hobby/business and require a website

A graphic of a woman standing beside a webpage appearing to place an image on the page.
A graphic of a webpage with HTML and CSS in large bolded letters.

Font sizes in CSS

Setting responsive font sizes can become confusing when working with CSS. Here is a basic breakdown on how they operate:

A rem unit refers to the root font size. Web browsers will assign this value automatically, but it's good practice to define this as a pixel (px) value on the body or html elements.

An em unit refers to the closest parent with a font size declaration.

For example:

  • body {font-size: 16px;}
    • this sets the default font size to 16px
  • .card {font-size: 0.75em;}
    • this sets the font size for any container with the .card class
    • 16px * 0.75 = 12px | 16px comes from closest parent (body)
  • .card-em {font-size: 1.5em;}
    • sets the font size for any element with the .card-em class
    • 12px * 1.5 = 18px | 12px comes from closest parent (.card)
  • .card-rem {font-size: 1.5rem;}
    • sets the font size for any element with the .card-rem class
    • 16px * 1.5 = 24px | 16px comes from the root (body)

So, what's the takeaway? Well, rem units are much more predictable due to the fact that they use the same base value for any operation. Setting a font size of 16px and knowing that 1.25rem will be 20px every time helps avoid bugs or errors. It also makes it much easier to set a responsive font scale. By simply reducing the root font size, everything in turn is reduced to match. This means setting a root font size once for each viewport (mobile, tablet, desktop, etc) and the text scales accordingly, rather than having media queries for each header and section of text.