Geek asks and answers

How does Zurb Foundation 4 calculate typography?

I have been digging a lot of articles about Golden Ratio and the modular scale, trying to understand how typography works on a technical level. I cannot say that I fully understand this, but now I am even more confused with Zurb Foundation 4.

In their docs, they stated that they no longer depend on a modular typography scale. So I'm curious to know how they came up with numbers, especially in heading elements.

For example: this is how their headers are written in _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 do they relate mathematically to each other? Documents do not indicate how this works.

  • (base-line?) 18px (1.125em) 16px (1em) - , /- ?

  • , ?

, , ... .

!

+5
4

. , " ". article, , 14px @1:1.618, 44px @1:1.618, , 18px 16.807. , .

, , em , ! , :

body {
  font-size: 18px;
}

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

ems, - .

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

, , "$ em-base" .

, Zurb, , / , em , :

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

, .

+6

, , . Foundation 4 ( ) , Foundation 3 (zurb [dot] com/article/1000/foundation-3-0-typography- --).

, , , , .

+1
source

The authors explain their methodology in this publication:

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

0
source

More articles:


All Articles