Zurb的基金會4如何計算印刷術？

我一直在挖掘黃金比例和模塊化規模上的大量文章，試圖瞭解排版在技術層面上的工作原理。我不能說我完全理解它，但我現在更加困惑與Zurb的基金會4.Zurb的基金會4如何計算印刷術？

在他們的docs他們已經表示，他們不再依賴/使用模塊化的比例排版。所以我很想知道他們是如何提出這些數字的，特別是在他們的標題元素中。

如：這是他們的標題是如何寫在他們_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;

我的問題;

他們是怎麼來到這些價值觀，以及如何將它們相互關聯的數學？ Docs似乎沒有說明它是如何工作的。
我想將段落的font-size（base-line？）更改爲18px（1.125em）而不是16px（1em） - 我將如何計算標題元素，以便它們適合/數學上合理的距離分開？
我是否有權假定改變標題大小從選擇身體字體大小開始，然後從那裏計算？

我會非常有關這個主題的感激任何意見，我不是最數學頭腦的人所以..溫柔。

謝謝！

來源

2013-04-08 JCraine

字體大小值不一定是數學完美的一些計算。作者嘗試了一些價值觀並認爲「這看起來不錯」是完全可能的。基於這個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; 
}

Demo

自成立以來確實在EMS的一切，你不需要編輯任何變量。

來源

2013-04-08 14:38:25 bookcasey

非常感謝您提供非常全面和深思熟慮的回覆，這是一個很大的幫助！起初，我對於爲身體添加價值感到有點猶豫，因爲它影響了網格 - 但在該行上添加最大寬度似乎包含了一切都很好。再次感謝！ – JCraine 2013-04-08 15:24:10

jnowland在這裏有最好的答案。 – Graeck 2013-09-13 23:49:09

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

這是一個基礎，用來計算它的「$ EM-基地」的功能應該給你的全球背景。

有一件事我找到Zurb目前的做法是，它並沒有提供足夠的功率/足夠的靈活性，如EM的級聯所以我通常將它修改爲這樣：

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

這允許你告訴一下上下文元素在。

來源

2013-05-28 10:46:51 jnowland

最佳答案。請注意，$ em-base變量設置爲： $ em-base：16px！default; – Graeck 2013-09-13 23:47:59

作者解釋他們的方法在此公告：

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

來源

2013-07-24 21:28:16 camainc

我們仍然採用了模塊化的規模來確定字體大小，我們只是不再使用的模塊化稱重ruby gem以減少依賴性。我們的博客文章中介紹了Foundation 3的排版（zurb [dot] com/article/1000/foundation-3-0-typography），並且使用黃金比例簡單地手工計算（然後四捨五入）和模塊化SCA）。

從向上擴展身體和向上計算開始，是生成字體大小的一種好方法，但我建議使用雙縮放方法，如Tim Brown的文章More Meaningful Typography中所述，因爲它的增加幅度要小得多。

來源

2013-09-13 23:25:53

謝謝Eric，這真的很有幫助。這仍然是基金會5中使用的方法嗎？看來，使用直線上的像素大小，並從他們的計算物，是這種情況？ – IanVS 2014-12-27 04:41:22

Zurb的基金會4如何計算印刷術？

回答

相關問題