How does Zurb's Foundation 4 calculate Typography?

css, responsive-design, sass, typography, zurb-foundation

Solution

The font size values aren't necessarily some calculation of mathematical perfection. It's entirely possible the authors tried a few values and thought "this looks good." Based on this article, it seems like they originally were using 14px @ 1:1.618, 44px @ 1:1.618 and rounding a lot, and eventually decided to just to use `18px` instead of `16.807`. Using a modular scale is nice, but breaking it isn't illegal.

To answer, your second question, the great thing about `em`s is that they're relative! If you want to scale all of the type proportionally, just change the font-size on the body:

body {
  font-size: 18px;
}

h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

Demo

Since foundation does everything in ems, you won't need to edit any variables.

Problem

I've been digging through a lot of articles on Golden Ratio and Modular Scale trying to understand how typography works on a technical level. I can't say I fully understand it, but I'm even more confused now with Zurb's Foundation 4. In their docs they've stated they no longer depend/use modular scale for typography. So I'm curious to know how they came up with the numbers, particularly in their heading elements. Eg: this is how their headings are written in their _type.SCSS ``` $h1-font-size: emCalc(44px) !default; $h2-font-size: emCalc(37px) !default; $h3-font-size: emCalc(27px) !default; $h4-font-size: emCalc(23px) !default; $h5-font-size: emCalc(18px) !default; $h6-font-size: 1em !default; // Also... $paragraph-font-size: 1em !default; ``` My questions; How did they come to these values, and how to they relate to each other mathematically? The Docs don't seem to specify how it works. I want to change the paragraph font-size (base-line?) to 18px (1.125em) instead of the 16px (1em) - how would I go about calculating the heading elements so they're an appropriate / mathematically-sound distance apart? Am I right to assume changing heading sizes begins with choosing the body font size and then calculating up from there? I'd greatly appreciate any advice on this topic, I'm not the most math minded person so.. be gentle. Thanks!

Original source