![css inherit font size and make larger css inherit font size and make larger](https://i0.wp.com/bootstrapcreative.com/wp-bc/wp-content/uploads/2018/05/Screen-Shot-2018-05-03-at-5.09.57-AM.png)
The default font size is given by the browser and device you're site is viewed on (e.g. 16px) * 1.5 = 24px I'm not good at math, give me a hint! Therefore it is always calculable.ġ.5rem = Default Font Size (e.g.
![css inherit font size and make larger css inherit font size and make larger](https://user-images.githubusercontent.com/918903/53773223-48e17200-3e9e-11e9-9344-2fd523b75888.jpg)
html) font size as the base size instead of the inherited one. The cool thing about this CSS3 unit is, that it always uses the root (e.g. This leads to problems, because it might become complex to know the inherited font size from within the CSS. The factor is multiplied with the font size inherited from their parent elements. The unit em is used to calculate the size relative given as a factor (e.g. What's the difference between px, em and rem? With em/rem sizing, you can change just the base font size for a specific viewport to decrease or increase all font sizes, while keeping proportions between the different styles. This is where relative font sizes become useful. It takes time to recalculate every pixel value to the new base font size. Think of generally smaller or larger font sizes on mobile phones. Especially, if you're designing for multiple resolutions with responsive design. Therefore it's good to know about font sizing techniques anyway. But why do we need them instead of working with pixels? Should designers care about this? But, why should I use relative font sizes?įirst of all, I think it's good for every designer to know a little bit about CSS3. Another unit people are talking about is rem.