SOLVED: Root font size set to 65%

Another quick one - the root html font size is set to 65% in the core code, so rem doesn’t work too well without adding the following to your style sheet:

html {font-size: 100%;}

Maybe there’s a reason for this, but 100% is always preferable for accessibility reasons

Just read this…

"That’s a good question. I’ve seen the 65% pattern in use quite a bit and actually had to do a bit of digging to suss out a reason for it.

As I understand it’s kind of a throw back to when browsers’ zooming ability was based on scaling text. Doing 65% was a way to peg the base font size at 10px without preventing font scaling (allegedly; I haven’t tested this) thereby not taking an accessibility tool away from the user. Not letting somebody zoom is pretty rude if they can’t see well.

That’s not really a big deal any more since zoom is handled by scaling the whole page pixel-wise instead of just scaling the font. It’s a brave new world, and you can use whatever font size you want.

As for 1em, I can say that my idea is to have Skeleton respect the default font size of the browser. I don’t see the point of starting at 10px. Further, the point of Skeleton is to provide a jumping off point for your own css, so I we expect people to set their own font size.

The rest of the layout and typography css is based on that value using rems, so if a given dev user does want to change the base font size of their layout, they just overwrite the html font size and everything should just fall in line.

Dipping into historical crap about the web always feels a little fuzzy to me so forgive me if this rationale is a bunch of hoo haa, and feel free to throw in your two cents if you know another side to the story.

For reference, here’s a pretty decent article by Die Atwood about it:

It’s actually 62.5% font size , which allows for rems to be easily calculated to 1rem = 10px, so for example 32px size is 3.2rem

This use of rem then truly allows for accessibility in the browser as the rem unit will scale to the browser font size setting - ref Guide: EM vs REM vs PX. Which should you use?

2 Likes

Yeah but even that says:

The ideal scenario would be to leave the HTML font-size as 100%

Which would be my preference to be honest. No need for additional fiddling with something as core as that. I see no great hardship in using a relative PX to REM converter. I just don’t like the idea of doing anything to adulterate the default scaling of 100% tbh

Hi Pete,

I don’t know exactly if the font size has ever been 65%, but since I’ve been using Bricks it’s been 62.5% and that’s a good thing, as @neilig has explained very well. We’ll stick with it :wink:

You can of course override the root font size as you wish with custom CSS.
I will mark this post as solved because I can’t understand the bug (anymore).

Best regards,
timmse

That’s fine - as long as its creating good sites I’m happy. I thought it was a mistake initially. The article I posted seemed to be the definitive answer on it.