DEV Community


The importance of relative font sizing

Dev. I love dogs, cookies, and learning new things.
・2 min read

In CSS, there are several ways to set the size of your font. You can choose a fixed size, which will stay uniform regardless of the viewport, or you can choose a relative value and account for your site being used on various devices of different sizes (e.g. desktop and mobile).

Fixed-font sizes can be defined by pixel amounts, among other values:

font-size {
Enter fullscreen mode Exit fullscreen mode

A relative size will adjust based on the size another value. The viewport becomes a unit of measurement in CSS3: one unit = 1%. The uses you’ll see include:

  • vh - viewport height
  • vw - viewport width
  • vmin - viewport min
  • vmax - viewport max

The “em” is another unit of relative size, but rather than tied to the viewport size it is tied to the font size.

  • 1em = the current font-size of the element referenced

Though tied to font size, the em unit can also be used for height, width, and length. One important quality to note about the em: the values cascade. At a basic level - if multiple values are applied to the same element, the one you declared last will be the one used. If you are using em values and things don’t appear as you expected, go back and double check how you declare them in your stylesheet.

A third way to set relative size: using %. The % will be relative to the parent element. It can be especially useful for the sizing of containers and backgrounds.

Why is this important? People are accessing websites via their cell phones more frequently and will expect your design to adjust accordingly - nobody wants to poke at a miniature website shrunk down to a mobile size, or lose the color and design they would get with a desktop version.

For more re: CSS sizing:

Discussion (0)