Booklet

author

Fullstack HQ

Development

What Font Size Unit Should You Use?

DIFFERENCES BETWEEN REM, EM, PX, VW, VH
What Font Size Unit Should You Use?

Root Emeters (rem) units are relational to the font-size value of the HTML tag. For example, if the font size of the HTML tag is 16px (the default size for an html document), then 1 rem unit is equal to 16px. That makes .5rem=8px, 2rem=32px, etc.
You can set your root HTML to font-size: 100% (which translates to 16px for default browser settings).

Emeters (em) units are similar to rem units, but whereas a rem unit always references the HTML tag, an em unit is relational only to it's nearest defined parent element.

VW & VH
The viewport width (vw) unit represents a percentage of the root element width. One vw is equal to 1% of the viewport width.

VW & VH
The viewport height (vh) unit represents a percentage of the root element height. One vh is equal to 1% of the viewport height.

Viewport units are inherently responsive, but they are also absolute units like PX, meaning their size is not dependent on a parent element. If you use viewport units alone, you take away your user's ability to zoom text in and out. But combining it with a fixed unit using calc() e.g. font-size: calc(16px + .3vw); restores that ability and works just fine.

Pixel (px) are what we've all become accustomed to over the years. PX is an absolute measurement of font, will be same to desktop, tablet or mobile. So for example, 20px will be literally 20 pixels on any screen.lf a monitor is of and you set an element's height to 200px, the element will take 200 pixels out of that. Try to avoid PX when you want to have a fluid design, unless you want to make a bunch of changes in your media queries.

More booklets by Fullstack HQ

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets