Menu icon Foundation
how to change base-font-size

Hi there!

1) in _settings.scss starting at line 16 zurb explain how to change the base font-size they say:

"If you want your base font-size to be different and not have it affect the grid breakpoints,
set $rem-base to $base-font-size and make sure $base-font-size is a px value."

so I did: (in _settings.scss)
$base-font-size: 12px;
$rem-base: $base-font-size;

this breaks everything and get this error from compass:

"error scss/app.scss (Line 36 of _vertical_rhythm.scss: Incompatible units: 'px' and '%'.)"

so whats wrong here??? How do I do it?

foundation5typographysettingsbase-font-sizefont size

Hi there!

1) in _settings.scss starting at line 16 zurb explain how to change the base font-size they say:

"If you want your base font-size to be different and not have it affect the grid breakpoints,
set $rem-base to $base-font-size and make sure $base-font-size is a px value."

so I did: (in _settings.scss)
$base-font-size: 12px;
$rem-base: $base-font-size;

this breaks everything and get this error from compass:

"error scss/app.scss (Line 36 of _vertical_rhythm.scss: Incompatible units: 'px' and '%'.)"

so whats wrong here??? How do I do it?


Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran almost 6 years ago

There's a reference to _vertical_rhythm.scss in your error. This isn't a part of foundation. Is there something in that file that is trying to use percentages in rem-calc like Julian asked?

I changed the instructions on a fresh project install and it seemed to be working:
http://cl.ly/image/0e3t1C1Z142N

Julian Ćwirko almost 6 years ago

are you trying to do something like this: rem-calc(10%) ?
this isn't right param for that function

Roman almost 6 years ago

I've done the same and experiencing the same problems. Anyones how to make the global font size smaller, like it is on the zurb foundation site?

Ghaida Zahran almost 6 years ago

There's a reference to _vertical_rhythm.scss in your error. This isn't a part of foundation. Is there something in that file that is trying to use percentages in rem-calc like Julian asked?

I changed the instructions on a fresh project install and it seemed to be working:
http://cl.ly/image/0e3t1C1Z142N

Francesco Pensabene almost 6 years ago

@ghaida sorry for the delay

yes I tryed on a fresh install and it works.

the problem is when you add Compass framewrok to it... So who should make changes? :-)

Bye
Francesco

Tom Lambert over 5 years ago

The reason I got the incompatible units error is because line 36 of the vertical rhythm compass file makes a calculation based on $base-font-size and $base-line-height: 24px

$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;

-- see https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/...

So if you're using different units of those two variables, it doesn't like it and, even with "compass" loaded after "foundation.

Everything works fine, however, if you set both variables to the same unit (doesn't matter - px, em, whatever, they all work).

Daniel Reed over 5 years ago

I am using the foundation 5.0.2 gem with a RAILS project. I am including the foundation_and_overrides.scss file. I have modified it like:;

$base-font-size: 14px;
$rem-base: $base-font-size;

The size of the font on the pages does not change, but the grid gets wider.

If I change to 10px, grid gets very wide and fonts are larger.

I am not using compass or any other 3rd party scss/css, just some of my own styles.

Thoughts?