Changing Font Size in Foundation

Foundation uses the the browser default text size (font-size:100%). For most desktop browsers, this means 16px. For more mobile browsers, this means 12px.

You will note that throughout Foundation the REM unit is used. This means that the value is based on the root element size or the default body text size. This is great because this means that all of the sizing and spacing will be customized for the device that you are on.

Because so much of Foundation depends on the default text size, I have decided to not make it easy to simply change through a setting in Site Styles.

Many people want to make the size of the text smaller. I strongly recommend against that. Why? Read through the following articles...

• 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake
• The 100% Easy-2-Read Standard
• Responsive Typography: The Basics

Still want to change the font size in Foundation? Fine 😛

Add the following css to your project in either the Page Inspector under the CSS tab or in the Site Wide code area.

body{font-size:16px}

We hope this explains our reasoning for not changing the font size and adding an option for that. Now go forth and make your websites great!