2011-05-20 13 views
28

मैंने हाल ही में ऑनलाइन कॉन्फ़्रेंस की बात करते हुए कुछ सम्मेलन देखा। स्वर्ण अनुपात के साथ font-size/line-height की गणना के लिए वेब कैलकुलेटर के बारे में कुछ उल्लेख किया गया था। कोई विचार मुझे यह कहां मिल सकता है? या आप अपने हेडर के लिए किस आकार का उपयोग करते हैं?क्या कोई सीएसएस फ़ॉन्ट आकार/रेखा ऊँचाई कैलक्यूलेटर है?

उत्तर

31

सीएसएस संपत्ति 'लाइन-ऊंचाई' वास्तव में एक शुद्ध संख्यात्मक मान स्वीकार करती है, जो फ़ॉन्ट आकार सेट के आधार पर लाइन ऊंचाई को काम करेगी। यदि आप सुनहरा अनुपात (1.618033 99) का उपयोग करना चाहते हैं, तो आप इसे शरीर में रेखा की ऊंचाई के रूप में सेट कर सकते हैं।

 
body { 
    font: 100%/1.618 sans-serif; 
    } 

उदाहरण के लिए, 24px करने के लिए एक एच 1 के font-size की स्थापना 39px की पंक्ति-ऊंचाई का उत्पादन होगा (38.832 से इकट्ठे हो)।

+0

किसी भी फ़ॉन्ट आकार के लिए, लाइन की चौड़ाई बढ़ जाती है क्योंकि रेखा चौड़ाई बढ़ जाती है –

+0

@ टॉम केयर विस्तृत करने के लिए, टॉम? यूनिट-कम मान का उपयोग करना ब्राउज़र को फ़ॉन्ट आकार के अनुसार लाइन ऊंचाई समायोजित करने के लिए कहता है। मुझे यकीन है कि यहां लाइन खेलने की चौड़ाई कहां आती है, लेकिन आपके विस्तारित विचारों में दिलचस्पी होगी। – amustill

+1

चूंकि रेखा चौड़ाई बढ़ी है, पाठ पढ़ने के लिए कठिन हो जाता है क्योंकि चौड़ाई के प्रभाव को ऑफ़सेट करने के लिए रेखा की ऊंचाई में वृद्धि नहीं हुई है। 3 टाइपोग्राफ़िकल आयाम हैं: फ़ॉन्ट आकार, रेखा ऊंचाई, और रेखा चौड़ाई। क्या होगा यदि आप 550px की सामग्री चौड़ाई में 16px फ़ॉन्ट आकार का उपयोग करना चाहते हैं? इस मामले में आपकी समायोजित लाइन ऊंचाई क्या होनी चाहिए? आपके अनुसार 25.88 है, लेकिन इष्टतम 25.00 है। यह सिर्फ एक और पढ़ने है;) –

14

मैं जानता हूँ कि यह एक पुराने सवाल है, लेकिन सिर्फ मामले में किसी को अभी भी संदर्भ के लिए लग रही है, इस (भयानक) Golden Ratio Typography Calculator

+6

लेकिन आप इस ** [awsone लेख] (http://www.pearsonified.com/2011/12/golden-ratio-typography.php) ** को याद करते हैं ** उस अजीब गोल्डन अनुपात कैलकुलेटर –

+0

के लेखक से वर्तमान में मुझे मिल रहा है मेरे कंसोल में एक जावास्क्रिप्ट त्रुटि जो '$' परिभाषित नहीं है - ऐसा लगता है कि वे jQuery या कुछ लोड करना भूल गए हैं। –

0

यह type-scale.com था? मैं इसका उपयोग सभी खानों की गणना के लिए करता हूं। यह फ़ॉन्ट आकार और रेखा-ऊंचाई प्रदान करता है।

0

स्पष्ट स्वर्ण अनुपात साथ line-height स्थापित करने के लिए की तलाश में उन, आप का उपयोग कर सकते हैं:

यह अलग फ़ॉन्ट आकार के साथ ठीक से स्केल करेगा।

संबंधित मुद्दे