Zurb Foundation 4 default body font-size changing causes layout width issue

Question

My requirement is, if a developer type some text anywhere on the web page without a specific tag (<p>, etc) the font size should be same as <p> tag's font-size.

In foundation.css I've changed the html,body { font-size:0.85 }. With this edit, the whole layout (whole site template) is getting shrink. Increasing the size is causing vice-verse.

Is there any other way to introduce our own default body font-size to foundation safely without harming the template?

Is there any suggestions to achieve my requirement without introducing a new font-size attribute to the content wrapping div?

Answer 1

Zurb uses the font size that you have specified in the html, body {} style to calculate the width of the site. Whatever you set the font-size value to becomes 1em throughout the site. If you look further down in the css you will find a definition for .row {} which looks something like max-width: 62.5em.

As you can imagine, when you make the value of 1em smaller, that 62.5em value for rows is going to get smaller as well. I don't know much about modifying it with the css version of zurb as I have always used the sass gem but you can adjust the number of ems for the row width.

Try:

desired site width / body font-size in px = number of ems your row max-width should be.

e.g.

If you want 960 width with a base font size of 12px

960 / 12 = 80

So you would set you row max-width to 80em.

I'm sure someone better qualified will come along and give a better answer but that is how I understand the grid.