Default font-size and scalability

So I’m a bit new to web dev but I’ve noticed fairly quickly that using px and pt are a really good way to dig yourself a deep hole that you’ll probably have to dig yourself out of with an all-nighter of eventual recode. I started looking around at the web, reading articles, and etc. to see what the actual default font size was for browsers as it was unbeknownst to me. The consensus is that most browsers have a 16px default font size. Some developers seem to redefine this font-size as such then:

html {
font-size: 62.5%;

This way they can easily just compute rems based on the redefined default size of 10px (16px * .625= 10px). I have a couple questions about this then–

  • Are there any particular disadvantages to redefining the font-size, in described manner, in relation to < html >?

  • Why would anyone ever use ems (having to keep track of the font-size of parent elements), if one could just use rems and always reference the root font-size?

it really depends on the needs of the site being developed, but using EMs on child elements can be rather useful when applying CSS media queries for responsive design.

Such that, one could save themselves the efforts of redefining the font-sizes of child elements for each of the media queries by knowing that those sizes will be relative to the parent’s size, which themselves would likely need to be redefined in each media query.

1 Like

Hmmm, wouldn’t REMs already be scalable when it comes to media queries though?

Well, sure – like I said, it depends on the needs of the site’s design. In any case relying on REMs alone means that everything is relative to whatever the root html element’s font size is set to. That’s not always the most efficient way to do things.

1 Like

Mmk, I guess it might take me a bit longer to run into those different instances to see them firsthand. Thank you for your responses! :slight_smile:

no worries – just wait 'til you start playing with vh/vw on fonts, it gets pretty interesting