Menu icon Foundation
Font-size 62.5%

Hello,

Today, I migrated to foundation 5 with Sass files.
However, I've a problem to put in font-size, the value 62.50% to use easily rem.

When I change base-font-size variable, my page becomes very small, it's normal. How can I use font-size:62.5% without break Foundation grid ?

Thanks

remfont-size

Hello,

Today, I migrated to foundation 5 with Sass files.
However, I've a problem to put in font-size, the value 62.50% to use easily rem.

When I change base-font-size variable, my page becomes very small, it's normal. How can I use font-size:62.5% without break Foundation grid ?

Thanks

Rafi Benkual over 5 years ago

The grid layout is tied to the base font size because it is in REMs. You will want to assign a font size to the body in css.

Jérémy over 5 years ago

I tried to assign a font size to the body, but it's not working because html is stronger than body ...

Nobody use 10px as font-size reference to have 1rem equals 10px ?

Thanks.

Rafi Benkual over 5 years ago

You can change the font size here:

line 151 _setings.scss

// We use these to style paragraphs
// $paragraph-font-family: inherit;
// $paragraph-font-weight: normal;
// $paragraph-font-size: 1rem;
// $paragraph-line-height: 1.6;
// $paragraph-margin-bottom: rem-calc(20);
// $paragraph-aside-font-size: rem-calc(14);
// $paragraph-aside-line-height: 1.35;
// $paragraph-aside-font-style: italic;
// $paragraph-text-rendering: optimizeLegibility;

Rafi Benkual over 5 years ago

16 px = 1rem

Alejandro Ferreiro about 5 years ago

Hello Jérémy,

Some months later...

I had the same issue when I tried to use the "font-size: 62.5%" trick. I also like to use rems in a easy way.

I don't use sass but managed (apparently) to solve this by downloading a custom build of Foundation 5 here: http://foundation.zurb.com/develop/download.html

In your customization, you may set some values to revert the grid size decreasing issue:

  • grid max-width = 100em
  • gutter = 2em
  • topbar breakpoint = 94em

Then, you can manually add "font-size: 62.5%" to the HTML tag and all the grid should look as if you where using the default build of Fondation. And you can style your font elements using rems like you wanted. For example, use 1.5rem to get 15px font-size.

At least, this is what I've just done. I tested and it appears to go well. I'll let you know if I'm missing something.

Best,