Menu icon Foundation
Working with rem unit in Foundation

In foundation the html and body tags have a font size of 100%. Usually you'll get 16px with 1rem this way.

As this article explains http://snook.ca/archives/html_and_css/font-size-with-rem
Using html/body font size of 62.5% will drop the default font size of 16px down to 10px, thus using 1rem equals 10px, 1.6rem is 16px. Instead of having 0.9375rem for the 15px padding on columns that foundation uses now it would be 1.5rem.

I just want to know if there is a good reason that they have kept the html font size at 100%. It's a lot easier for me at least to work with rem the way the article talks about it.

rem

In foundation the html and body tags have a font size of 100%. Usually you'll get 16px with 1rem this way.

As this article explains http://snook.ca/archives/html_and_css/font-size-with-rem
Using html/body font size of 62.5% will drop the default font size of 16px down to 10px, thus using 1rem equals 10px, 1.6rem is 16px. Instead of having 0.9375rem for the 15px padding on columns that foundation uses now it would be 1.5rem.

I just want to know if there is a good reason that they have kept the html font size at 100%. It's a lot easier for me at least to work with rem the way the article talks about it.

Rafi Benkual over 4 years ago

This is an interesting topic.

In my opinion it's better to get used to using REM's in 100% size where it's 16 pixels. The example in the article used 62.5% so that people who think in px can easily use rems.

Luckily, this is an easy setting in the _settings.scss about line 66
// $base-font-size: 100%;

I think it would be cool to teach people the trick from that article, but not to set it as a default.

Rafi Benkual over 4 years ago

I would be interested in hearing other peoples thoughts on this.

Dret over 4 years ago

Hi.

I love the REM technique exposed in http://snook.ca/archives/html_and_css/font-size-with-rem

Would be great if Foundation would adopt it, even only as possible option in configuration page !!!

+1