How does Zurb's Foundation 4 calculate Typography?

Question

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;

1. 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.

2. 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?

3. 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!

Answer 1

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

This is the function that foundation uses to calculate it the "$em-base" should give you global context.

One thing I find with Zurb's current approach is that it doesn't give enough power/flexible enough as em's cascade so I usually modify it to this:

@function emCalc($target, $context:16) {
    @return $target / $context * 1em;
}

This allows you to tell what context the element is in.

Answer 2

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 ems 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.