ज़र्ब फाउंडेशन 4 टाइपोग्राफी की गणना कैसे करता है?

Question

मैं गोल्डन अनुपात और मॉड्यूलर स्केल पर कई लेखों के माध्यम से खुदाई कर रहा हूं यह समझने की कोशिश कर रहा हूं कि टाइपोग्राफी तकनीकी स्तर पर कैसे काम करती है। मैं नहीं कह सकता कि मैं इसे पूरी तरह से समझता हूं, लेकिन अब मैं ज़र्ब फाउंडेशन 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; 

मेरे सवालों का;

1. कैसे वे इन मूल्यों को आया था, और कैसे करने के लिए वे गणितीय एक दूसरे से संबंधित? डॉक्स यह निर्दिष्ट नहीं करता है कि यह कैसे काम करता है।

2. मैं अनुच्छेद फ़ॉन्ट-आकार (बेस-लाइन?) को 16px (1em) के बजाय 18px (1.125em) में बदलना चाहता हूं - मैं शीर्षक तत्वों की गणना करने के बारे में कैसे जाऊं ताकि वे उचित/गणितीय-ध्वनि दूरी अलग?

3. क्या मुझे यह मानने का अधिकार है कि बदलते शीर्षक आकार शरीर के फ़ॉन्ट आकार को चुनने के साथ शुरू होते हैं और फिर वहां से गणना करते हैं?

मैं इस विषय पर किसी भी सलाह की सराहना करता हूं, मैं सबसे गणित दिमागी व्यक्ति नहीं हूं .. नम्र रहो।

धन्यवाद!

Answer 1

फ़ॉन्ट आकार मान आवश्यक रूप से गणितीय पूर्णता की कुछ गणना नहीं हैं। यह पूरी तरह से संभव है लेखकों ने कुछ मूल्यों की कोशिश की और सोचा "यह अच्छा लग रहा है।" इस article के आधार पर, ऐसा लगता है कि वे मूल रूप से 14px @ 1:1.618, 44px @ 1:1.618 का उपयोग कर रहे थे और बहुत गोल कर रहे थे, और आखिरकार 16.807 के बजाय 18px का उपयोग करने का निर्णय लिया। एक मॉड्यूलर पैमाने का उपयोग करना अच्छा है, लेकिन इसे तोड़ना अवैध नहीं है।

उत्तर देने के लिए, आपका दूसरा प्रश्न, em के बारे में अच्छी बात यह है कि वे रिश्तेदार हैं! आप प्रकार के सभी आनुपातिक पैमाने चाहते हैं, बस शरीर पर font-size बदलने के लिए:

body { 
    font-size: 18px; 
} 

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

Demo

के बाद से नींव ईएमएस में सब कुछ करता है, आप किसी भी चर संपादित करने की जरूरत नहीं होगी।

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; 
} 

यह वह कार्य है जो नींव का उपयोग "$ em-base" की गणना करने के लिए करता है, आपको वैश्विक संदर्भ देना चाहिए।

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

यह आपको किस संदर्भ में बताने के लिए अनुमति देता है:

एक बात मैं Zurb के वर्तमान दृष्टिकोण के लगता है कि यह तो मैं आम तौर पर इस के लिए इसे संशोधित पर्याप्त शक्ति/em के झरना के रूप में इतनी छूट नहीं देता है तत्व में है

Answer 3

लेखकों इस पोस्टिंग में अपनी कार्यप्रणाली समझाने:

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

Answer 4

हम अभी भी फ़ॉन्ट आकार निर्धारित करने के लिए एक मॉड्यूलर पैमाने का उपयोग करें, हम बस अब मॉड्यूलर पैमाने ruby gem आदेश निर्भरता कम करने के लिए इस्तेमाल करते हैं। फाउंडेशन 4 में फ़ॉन्ट आकार को सुनहरा अनुपात का उपयोग करके हाथ की गणना (फिर गोलाकार) किया गया था, जैसा कि हमारे ब्लॉग पोस्ट में फाउंडेशन 3 (ज़र्ब [डॉट] कॉम/आलेख/1000/नींव -3-0-टाइपोग्राफी- और-मॉड्यूलर-एससीए)।

शरीर को स्केल करने और ऊपर की गणना करने से शुरू करना फ़ॉन्ट आकार उत्पन्न करने का एक अच्छा तरीका है, हालांकि मैं टिम ब्राउन के आलेख More Meaningful Typography में वर्णित अनुसार दोहरी पैमाने दृष्टिकोण का उपयोग करने का सुझाव दूंगा क्योंकि यह वृद्धि का बहुत कम चरम है ।