rem vs em vs px: हर CSS property के लिए कौन सी unit

rem vs em का फ़र्क इस पर है कि साइज़ किससे तय होता है। rem root element के font size के सापेक्ष होता है, इसलिए पेज पर हर जगह 1rem का मतलब एक ही है। em उस element के अपने font size के सापेक्ष होता है (और font-size पर इस्तेमाल हो तो parent के सापेक्ष), इसलिए वह component-दर-component बदलता है। px एक निश्चित CSS pixel है, जो उपयोगकर्ता की font size पसंद को नज़रअंदाज़ करता है। एक व्यावहारिक डिफ़ॉल्ट: font sizes और पेज की spacing के लिए rem, उन चीज़ों के लिए em जो अपने ही text के साथ बढ़नी चाहिए (button का padding, icon का आकार), border और shadow के लिए px, और media queries में em या rem।

em बनाम rem: हर unit कैसे गिनी जाती है

तीनों units का फ़र्क सिर्फ़ संदर्भ बिंदु में है। MDN का length reference इन्हें इस तरह परिभाषित करता है (अक्टूबर 2026 में देखा गया):

16px आँकड़ा एक आम browser default है, कोई स्थिर मान नहीं। MDN बताता है कि उपयोगकर्ता की पसंद इसे बदल सकती है, और text के लिए सापेक्ष units को प्राथमिकता देने का यही पूरा कारण है।

किसी component में:

html { font-size: 100%; }      /* browser defaults पर 16px */

.card { font-size: 1.25rem; }  /* 20px */
.card h2 { font-size: 1.5em; } /* 1.5 × 20px = 30px */
.card p  { font-size: 1.5rem; }/* 1.5 × 16px = 24px, card से कोई फ़र्क नहीं */
.card .tag { padding: 0.5em; } /* tag के अपने font size का आधा */

em वाला heading इस पर निर्भर है कि वह कहाँ रखा गया है। उसे .card से बाहर ले जाएँ, तो वह 24px हो जाएगा। rem वाला paragraph हर जगह 24px रहता है।

em क्यों जुड़ता जाता है

क्योंकि font-size पर em parent के आकार से गुणा होता है, nested elements फिर से गुणा होते जाते हैं:

li { font-size: 0.875em; }

तीन स्तर गहरी सूची अंत में आधार आकार के 0.875 × 0.875 × 0.875 ≈ 0.67 पर पहुँचती है: 16px root से लगभग 10.7px। 0.875rem से हर स्तर 14px पर रहता है। इसी जुड़ते जाने की वजह से font sizes के लिए rem ज़्यादा सुरक्षित है, और em वहीं रखें जहाँ स्थानीय text के साथ scale होना ही मकसद हो।

हर CSS property के लिए कौन सी unit

unit इस सवाल से चुनें कि साइज़ किसका अनुसरण करे: उपयोगकर्ता की text पसंद, component के अपने text का, या किसी का नहीं। ये सिफ़ारिशें हैं और डिज़ाइन का फ़ैसला हैं; कोई specification इन्हें ज़रूरी नहीं बनाता:

जब चौड़ाई screen के साथ बदलनी चाहिए, text के साथ नहीं, तब layout की चौड़ाई px में रखना ठीक है। 1px का border, तय 44px का avatar या 1200px का page container font size के साथ बढ़ने की ज़रूरत नहीं रखते। पर उन boxes के भीतर का text बढ़ना चाहिए।

Spacing पर फ़ैसला विवेक का है। rem में spacing उपयोगकर्ता के text बढ़ाने पर पेज की लय text के साथ बनाए रखती है। px में spacing बड़े text पर छोटी screen पर ज़्यादा content रखती है। 360px चौड़े फ़ोन पर यह समझौता जल्दी दिखता है, इसलिए इसे टेस्ट करना उपयोगी है (आखिरी हिस्सा देखें)।

font size के लिए rem बनाम px और accessibility

font sizes के लिए rem (या %, या medium जैसे keywords) इस्तेमाल करें, क्योंकि px font sizes browser में उपयोगकर्ता के चुने default font size को नज़रअंदाज़ करते हैं। desktop Chrome में यह सेटिंग Settings > Appearance > Font size में है, और अधिक विकल्प Customize fonts में (Chrome Help)। जो उपयोगकर्ता इसे default से 20px तक बढ़ाता है, उसे 1rem से 20px का body text मिलता है, जबकि 16px से अब भी 16px।

Browser zoom अलग तरीके से काम करता है। zoom सब कुछ scale करता है, px समेत, इसलिए Ctrl और + दबाने पर px वाला layout भी बड़ा होता है। font size सेटिंग वही मामला है जहाँ rem और px अलग व्यवहार करते हैं, और कम दृष्टि वाले लोग इसी सेटिंग पर निर्भर करते हैं जब वे बिना horizontal scroll वाले पेज पर बड़ा text चाहते हैं।

WCAG 2.2 का success criterion 1.4.4 Resize Text (level AA) कहता है कि text 200 प्रतिशत तक बिना content या functionality खोए बढ़ाया जा सके। इसकी sufficient techniques में font sizes के लिए em units का इस्तेमाल शामिल है। सापेक्ष units इस criterion को पूरा करना आसान बनाती हैं; गारंटी नहीं देतीं, क्योंकि निश्चित ऊँचाई वाला box बढ़ा हुआ text फिर भी काट सकता है।

फ़ोन और system text size

फ़ोन पर तस्वीर बदल रही है। Chrome 146 (स्थिर संस्करण 10 मार्च 2026) ने एक opt-in meta tag जोड़ा, जिससे root font size operating system और browser की text scale सेटिंग का अनुसरण करता है (Chrome 146 release notes):

<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">

tag के साथ, MDN के text-scale reference के अनुसार rem, em और font-size keywords system सेटिंग के साथ scale होते हैं, और px font sizes नहीं होते। अक्टूबर 2026 तक MDN इस tag को सीमित उपलब्धता वाला experimental बताता है, और चेतावनी देता है कि mobile text scale 200% से 300% से ज़्यादा तक जा सकता है, इसलिए जो पेज इसे चुनता है उसे उन आकारों पर टेस्ट करना होगा। tag के बिना, Android पर Chrome में Settings > Accessibility के तहत Default zoom slider है, जो पूरे पेज को zoom करता है (Chrome Help), इसलिए वहाँ px और rem साथ बढ़ते हैं।

आज rem font sizes के लिए यह सबसे मज़बूत तर्क है: rem में बनी साइट एक meta tag जोड़ते ही system text scaling के लिए तैयार है।

root font size और 62.5% की चाल

root font size को छोड़ दें, या उसे प्रतिशत में रखें। html { font-size: 16px; } लिखने से पूरे पेज पर उपयोगकर्ता की पसंद रद्द हो जाती है, क्योंकि अब हर rem एक निश्चित 16px की ओर इशारा करता है।

प्रसिद्ध 62.5% चाल html { font-size: 62.5%; } लिखती है, ताकि default पर 1rem 10px हो और 1.6rem 16px। यह उपयोगकर्ता का scaling बनाए रखती है, क्योंकि प्रतिशत उपयोगकर्ता के default पर लागू होता है। इसकी कीमत यह है कि 16px rem के लिए लिखा गया कोई भी third-party component अपने तय आकार का 62.5% दिखता है। आसान गणित चाहिए तो Sass function या CSS custom property root बदले बिना रूपांतरण कर सकती है।

px से rem रूपांतरण तालिका

default root font size पर, rem = px / 16:

form fields को 16px (1rem) या उससे बड़ा रखें: जिन fields का text छोटा होता है, उन पर iOS Safari input के समय zoom करता है।

media queries में em, rem या px

media query की शर्तों में em या rem इस्तेमाल करें, क्योंकि तब breakpoints उपयोगकर्ता के default font size के साथ खिसकते हैं। media queries में दोनों units का अर्थ एक ही है: Media Queries Level 4 specification कहती है कि वहाँ सापेक्ष units शुरुआती font size पर आधारित हैं, जो user agent या उपयोगकर्ता की पसंद तय करती है, आपकी stylesheet के html नियम पर नहीं।

/* 16px default पर 48em = 768px, 20px default पर 960px */
@media (min-width: 48em) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

उदाहरण के लिए एक tablet portrait में 820px चौड़ा viewport लें (820x1180 StatCounter के सितंबर 2026 के आँकड़ों में दुनिया भर के tablet resolutions का 5.06% था)। default सेटिंग पर दो-column layout 768px पर चालू होता है, इसलिए tablet को दो columns मिलते हैं। 20px default वाले उपयोगकर्ता को 960px तक single column मिलता है, जो उसके बड़े text में भी फिट बैठता है। min-width: 768px query उस पर दो columns थोप देती और text को दबा देती।

breakpoint मान पहले कैसे चुनें, यह responsive breakpoints कैसे चुनें में है, और query का syntax CSS media queries गाइड में।

फ़ोन की चौड़ाई पर units जाँचें

यह देखने के लिए कि आपकी units उपयोगकर्ता के text आकार पर प्रतिक्रिया देती हैं या नहीं, default font बड़ा करें और पेज को छोटी फ़ोन चौड़ाई पर देखें:

1. desktop Chrome में Settings > Appearance > Font size खोलें और बड़ा आकार चुनें, या Customize fonts में सटीक आकार तय करें।
2. पेज को 360px चौड़े फ़ोन viewport पर खोलें। Mobile View Extension tab को mobile user agent और screen size वाले फ़ोन की तरह दोबारा लोड करता है; कोई preset चुनें, या custom resolution के रूप में 360 × 800 लिखें। DevTools device mode भी काम करता है।
3. जाँचें कि body text बढ़ा है या नहीं। अगर नहीं बढ़ा, तो कुछ px font size या px root size तय कर रहा है।
4. ऐसे text को देखें जो buttons से बाहर निकल रहा है, निश्चित ऊँचाई वाले boxes में कटा हुआ label, और navigation जो दो लाइनों में टूट रहा है।
5. सेटिंग को default पर लौटाएँ और दोनों स्थितियों की साथ-साथ तुलना करें।

यह सिर्फ़ desktop font size सेटिंग को टेस्ट करता है। preview desktop Chrome में mouse के साथ चलता है, इसलिए यह फ़ोन की system text size, Safari के rendering या Android पर text-scale meta tag को दोहरा नहीं सकता। इनके लिए असली फ़ोन या emulator इस्तेमाल करें और वहाँ system font size बढ़ाएँ।

इन units से fluid layouts कैसे बनते हैं, इस पर और responsive web design क्या है में है।

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

font size के लिए rem या px इस्तेमाल करूँ?

font size के लिए rem। px font size उपयोगकर्ता के browser में चुने default text size को नज़रअंदाज़ करता है, जबकि rem उसका अनुसरण करता है; और फ़ोन पर Chrome का text-scale meta tag भी rem font sizes को ही scale करता है।

rem की जगह em कब इस्तेमाल करूँ?

जब साइज़ को element के अपने text का अनुसरण करना हो: button और badge का padding, text के भीतर icons, letter spacing, और media query की शर्तें। nested font-size मानों में em से बचें, क्योंकि वह जुड़ता जाता है।

क्या 1rem हमेशा 16px होता है?

नहीं। 1rem root element के font size के बराबर है, और यह केवल आम browser default पर 16px होता है। उपयोगकर्ता की सेटिंग, html पर प्रतिशत, या text-scale meta tag उसे बदल सकते हैं।

क्या media queries में em और rem अलग व्यवहार करते हैं?

नहीं। media queries में दोनों browser और उपयोगकर्ता की सेटिंग से तय शुरुआती font size पर आधारित होते हैं, इसलिए 48em और 48rem एक ही breakpoint देते हैं। आपकी stylesheet में html पर लिखा font size इन्हें प्रभावित नहीं करता।