Why get a website?
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.