Menu icon Foundation
Changing Foundation 4 Font size

Hello,
I've been trying to figure this out and searching for answers online but decided to reach out to you for help since I'm getting nowhere.

I found this gist:
https://github.com/zurb/foundation/commit/e2111e945f8b1d830fa1f3f15c30fc7e7b796bc0

- do we replace the _global.scss and _foundation.scss with these files? Where do I change the font-size:20px or font-size:2ems?

Sorry - been going around trying to find a step by step solution for this.

We'd like to use rems for the fonts and need to set up the settings to match this.
html {
    font-size:62.5%
}
body {
	padding:0;
	margin:0;
	color:#252525;
	background:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-size:2rem;
	line-height:1.2em;
	min-width:280px
}

In the _settings.scss file, it says:
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16px !default;

- I'm not clear on what I need to do next.  Do I replace $em-base: 16px !default; with $base-font-size ($em-base: $base-font-size;) - where do I change the $base-font-size?

What are the next steps for this section:
// Maybe you want to create rems with pixels
// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
// @function rem-calc($pxWidth) {
//   @return $pxWidth / $rem-base * 1rem;
// }

            

         

base-font-sizedefaultfont-sizesettings

Hello,
I've been trying to figure this out and searching for answers online but decided to reach out to you for help since I'm getting nowhere.

I found this gist:
https://github.com/zurb/foundation/commit/e2111e945f8b1d830fa1f3f15c30fc7e7b796bc0

- do we replace the _global.scss and _foundation.scss with these files? Where do I change the font-size:20px or font-size:2ems?

Sorry - been going around trying to find a step by step solution for this.

We'd like to use rems for the fonts and need to set up the settings to match this.
html {
    font-size:62.5%
}
body {
	padding:0;
	margin:0;
	color:#252525;
	background:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-size:2rem;
	line-height:1.2em;
	min-width:280px
}

In the _settings.scss file, it says:
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16px !default;

- I'm not clear on what I need to do next.  Do I replace $em-base: 16px !default; with $base-font-size ($em-base: $base-font-size;) - where do I change the $base-font-size?

What are the next steps for this section:
// Maybe you want to create rems with pixels
// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
// @function rem-calc($pxWidth) {
//   @return $pxWidth / $rem-base * 1rem;
// }