1pt 1px के बजाय 1.333px में क्यों बदल जाता है?

CSS में 1pt = 1/72 inch और 1in = 96px होता है, यानी 1pt = 96/72 = 1.333px। हर browser इसी formula से चलता है। Print sizes screen पर number से बड़े दिखते हैं इसी 4/3 multiplier की वजह से।

em और rem में क्या फ़र्क़ है?

rem हमेशा root ( element) के font size को reference करता है। em सबसे नज़दीकी parent के font size को। तो 20px parent में 2em = 40px होगा, लेकिन 2rem हमेशा 2 × root होगा, parent कुछ भी हो।

Base font size setting conversion पर कैसे असर डालता है?

यह 1rem और 1em की px value बदल देता है। Default 16px ज़्यादातर browsers से मेल खाता है, तो 1rem = 16px। Root 18px हो तो 1rem = 18px और 1.25rem heading 20px के बजाय 22.5px हो जाता है। pt absolute होने की वजह से नहीं बदलता।

Stylesheet में px, rem, em में से क्या use करूँ?

Font sizes के लिए rem (ताकि user browser zoom या accessibility settings से control कर सके), borders और छोटे spacings जहाँ exactness चाहिए वहाँ px, और current element के font size से जुड़े spacings (जैसे button का padding) के लिए em।

px base के बराबर हो तब percentage 100% क्यों नहीं दिखाता?

दिखाता है, try करें। अगर px आपके base के बराबर हो (मसलन 16 with base 16), तो % field 100 दिखाएगा। अगर कुछ और दिखे, तो या तो px base के बिल्कुल बराबर नहीं है (किसी और field की rounding की वजह से), या आपने px type करने के बाद base बदल दिया।

टाइपोग्राफी इकाई परिवर्तक

px, em, rem, pt, %, vw और vh के बीच रूपांतरण

लाइव पूर्वावलोकन

16px

तेज़ भूरी लोमड़ी

परिवर्तित करें

त्वरित आकार

आधार फ़ॉन्ट आकार (px)

व्यूपोर्ट चौड़ाई (px)

व्यूपोर्ट ऊंचाई (px)

पिक्सेल (px)

Rem

पॉइंट (pt)

प्रतिशत (%)

व्यूपोर्ट चौड़ाई (vw)

व्यूपोर्ट ऊंचाई (vh)

परिणाम

1em = 1rem = 16px1pt = 1.333333px100% = 16px1px = 0.75pt100vw = 1920px100vh = 1080px

Tailwind CSS क्लास

text-baseइस आकार पर सटीक मेल

CSS स्निपेट

font-size: 1rem; /* 16px · 12pt · 100% */

टाइप स्केल

एक अनुपात और अपने आधार आकार से शीर्षक आकारों का एक संतुलित सेट बनाएं।

स्केल अनुपात

स्तर	px	rem	pt
H1	48.828125	3.051758	36.621094
H2	39.0625	2.441406	29.296875
H3	31.25	1.953125	23.4375
H4	25	1.5625	18.75
H5	20	1.25	15
Body	16	1	12
Small	12.8	0.8	9.6

CSS वेरिएबल

:root {
  --font-h1: 3.051758rem; /* 48.828125px */
  --font-h2: 2.441406rem; /* 39.0625px */
  --font-h3: 1.953125rem; /* 31.25px */
  --font-h4: 1.5625rem; /* 25px */
  --font-h5: 1.25rem; /* 20px */
  --font-body: 1rem; /* 16px */
  --font-small: 0.8rem; /* 12.8px */
}

फ़्लुइड टाइप (CSS clamp)

ऐसा रेस्पॉन्सिव फ़ॉन्ट आकार बनाएं जो दो स्क्रीन चौड़ाइयों के बीच सहजता से बदले।

न्यूनतम आकार (px)

अधिकतम आकार (px)

न्यूनतम स्क्रीन (px)

अधिकतम स्क्रीन (px)

परिणाम

font-size: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);

टाइपोग्राफी इकाई परिवर्तक क्या है?

टाइपोग्राफी यूनिट कन्वर्टर पिक्सल (px), em, rem, पॉइंट्स (pt), प्रतिशत (%) और व्यूपोर्ट यूनिट्स (vw, vh) के बीच कन्वर्ट करता है। बेस फ़ॉन्ट साइज़ और व्यूपोर्ट साइज़ सेट करें और किसी भी फ़ील्ड में वैल्यू टाइप करें, बाकी सभी यूनिट्स तुरंत अपडेट हो जाएँगी।

Conversions CSS standard के मुताबिक होते हैं: 1pt = 96/72 px, em और rem base font size के गुणक हैं, percentage base को 100% मान कर चलता है, और vw तथा vh viewport की चौड़ाई व ऊँचाई के अंश हैं। किसी भी field में बदलाव करते ही बाकी छह live recalculate हो जाते हैं। Base font size default 16px है (आम root वैल्यू), लेकिन इसे 14, 18 या आपके design system के root पर सेट कर सकते हैं, और viewport default 1920×1080 है ताकि vw और vh सटीक रहें।

उपयोग कैसे करें

स्टेप 1 — बेस फ़ॉन्ट साइज़ पिक्सल में सेट करें (डिफ़ॉल्ट 16px) जो यह तय करता है कि em, rem और % जैसी रिलेटिव यूनिट्स कैसे कैलकुलेट होंगी।
स्टेप 2 — सात यूनिट फ़ील्ड (px, em, rem, pt, %, vw या vh) में से किसी में एक नंबर डालें और बाकी सभी यूनिट्स तुरंत अपडेट हो जाएँगी।
स्टेप 3 — किसी भी कन्वर्टेड वैल्यू को कॉपी करें और अपनी CSS, डिज़ाइन स्पेक्स या प्रिंट लेआउट में इस्तेमाल करें।

कब उपयोग करें

Print designer से मिली pt specs को असली CSS pixel values में बदलना जो stylesheet वाकई लागू करती है।
Design system audit: चुने हुए root पर 1.25rem heading वाक़ई 20px आ रहा है या नहीं।
ऐसे parent के अंदर सही em या % चुनना जो inherited font size पहले से बदल चुका है।

परिणाम

एक डिज़ाइनर ने आपको पॉइंट्स में स्पेक्स दी हैं (14pt बॉडी टेक्स्ट)। 16px बेस के साथ pt फ़ील्ड में 14 डालें और तुरंत देखें कि यह 18.67px, 1.167em, 1.167rem और 116.7% के बराबर है — आपकी स्टाइलशीट में उपयोग के लिए तैयार।

अक्सर पूछे जाने वाले प्रश्न

1pt 1px के बजाय 1.333px में क्यों बदल जाता है?: CSS में 1pt = 1/72 inch और 1in = 96px होता है, यानी 1pt = 96/72 = 1.333px। हर browser इसी formula से चलता है। Print sizes screen पर number से बड़े दिखते हैं इसी 4/3 multiplier की वजह से।
em और rem में क्या फ़र्क़ है?: rem हमेशा root (<html> element) के font size को reference करता है। em सबसे नज़दीकी parent के font size को। तो 20px parent में 2em = 40px होगा, लेकिन 2rem हमेशा 2 × root होगा, parent कुछ भी हो।
Base font size setting conversion पर कैसे असर डालता है?: यह 1rem और 1em की px value बदल देता है। Default 16px ज़्यादातर browsers से मेल खाता है, तो 1rem = 16px। Root 18px हो तो 1rem = 18px और 1.25rem heading 20px के बजाय 22.5px हो जाता है। pt absolute होने की वजह से नहीं बदलता।
Stylesheet में px, rem, em में से क्या use करूँ?: Font sizes के लिए rem (ताकि user browser zoom या accessibility settings से control कर सके), borders और छोटे spacings जहाँ exactness चाहिए वहाँ px, और current element के font size से जुड़े spacings (जैसे button का padding) के लिए em।
px base के बराबर हो तब percentage 100% क्यों नहीं दिखाता?: दिखाता है, try करें। अगर px आपके base के बराबर हो (मसलन 16 with base 16), तो % field 100 दिखाएगा। अगर कुछ और दिखे, तो या तो px base के बिल्कुल बराबर नहीं है (किसी और field की rounding की वजह से), या आपने px type करने के बाद base बदल दिया।

टाइपोग्राफी इकाई परिवर्तक

लाइव पूर्वावलोकन

परिवर्तित करें

Tailwind CSS क्लास

CSS स्निपेट

टाइप स्केल

फ़्लुइड टाइप (CSS clamp)

टाइपोग्राफी इकाई परिवर्तक क्या है?

उपयोग कैसे करें

कब उपयोग करें

परिणाम

अक्सर पूछे जाने वाले प्रश्न

संबंधित उपकरण

समय इकाई कनवर्टर

टाइमस्टैम्प कनवर्टर

टॉर्क कनवर्टर

कोण परिवर्तक

क्षेत्रफल कनवर्टर

कपड़ों का साइज़ कनवर्टर

टाइपोग्राफी इकाई परिवर्तक

लाइव पूर्वावलोकन

परिवर्तित करें

Tailwind CSS क्लास

CSS स्निपेट

टाइप स्केल

फ़्लुइड टाइप (CSS clamp)