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

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.

Answer 2

// 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 3

We still use a modular scale to determine the font sizes, we just no longer use the modular scale ruby gem in order to reduce dependencies. The font sizes in Foundation 4 were simply hand calculated (then rounded) using the golden ratio, as described in our blog post about the typography for Foundation 3 (zurb [dot] com/article/1000/foundation-3-0-typography-and-modular-sca).

Starting with scaling up the body and calculating upward is a good way to generate the font sizes, though I'd suggest using the dual scale approach, as described in Tim Brown's article More Meaningful Typography as it is much less extreme of an increase.

Answer 4

The authors explain their methodology in this posting:

http://zurb.com/article/1000/foundation-3-0-typography-and-modular-sca