ফন্ট সাইজ আর স্পেসিং সেট করার সময় em, rem, px বেছে নেওয়া অনেক বড় একটা বিষয়, কারণ এটা ঠিকভাবে বুঝতে পারলে আপনার ডিজাইন হবে responsive, flexible আর accessible। চলুন, সহজভাবে দেখি কোনটা কখন কাজে লাগে।
1. px (পিক্সেল) – পুরনো ধাঁচের নির্দিষ্ট মাপ
px মানে একদম fixed size—মানে এটা একবার সেট করলে সেটা বদলায় না, স্ক্রিন সাইজ বা ইউজারের সেটিংসের ওপর কোনো প্রভাব পড়ে না। এটা ব্যবহার করা সহজ, কিন্তু responsive ডিজাইনের জন্য একদমই ভালো না। বড় স্ক্রিন, ছোট স্ক্রিন, zoom-in বা zoom-out—সব ক্ষেত্রেই এটা এক জায়গায় আটকে থাকে।
2. em – প্যারেন্টের সাথে বড়-ছোট হয়
em হলো parent element-এর ফন্ট সাইজের উপর নির্ভরশীল। ধরো, একটা div-এর ফন্ট সাইজ 20px, আর তার ভেতরের কোনো টেক্সটে যদি 1.5em দাও, তাহলে সেটার সাইজ হবে 30px (20 × 1.5)। যদি parent-এর সাইজ বদলায়, তবে child-এরও সাইজ বদলাবে।
এই কারণে em nested design-এর জন্য দারুণ, কিন্তু অনেক সময় ঝামেলা হয়ে যায়—যেমন একাধিক লেভেলে em ব্যবহার করলে parent-এর সাইজের প্রভাব child-এ পরে, আর হিসাব রাখা কঠিন হয়ে যায়।
3. rem – পুরো ওয়েবসাইট জুড়ে consistency
rem একদম html (root) ফন্ট সাইজের উপর নির্ভরশীল। সাধারণত browser-এর default root font size 16px হয়। যদি তুমি কোনো টেক্সটে 2rem দাও, তাহলে সেটা 16 × 2 = 32px হবে।
em-এর মতো parent-এর উপরে নির্ভরশীল না বলে rem অনেক predictable, পুরো ওয়েবসাইটে uniform scaling রাখতে সহজ হয়। এজন্য বেশিরভাগ modern responsive design-এ rem বেশি ব্যবহার করা হয়।
তাহলে কোনটা ব্যবহার করবো?
rem – যখন চাইবে পুরো ওয়েবসাইটের ফন্ট সাইজ consistent ও সহজে নিয়ন্ত্রণযোগ্য হোক।
em – যখন চাইবে কোনো component বা section তার parent-এর সাথেই স্কেল করুক (বেশিরভাগ ক্ষেত্রে buttons, cards ইত্যাদির জন্য ভালো)।
px – একদম প্রয়োজন না হলে এড়িয়ে যাও, কারণ এটা responsive design-friendly না। তবে কিছু fixed layout বা pixel-perfect UI-এর ক্ষেত্রে লাগতে পারে।
ছোট্ট টিপস:
- পুরো ওয়েবসাইটের base font size 62.5% (10px) সেট করলে rem হিসাব করা সহজ হয়। কারণ 1rem = 10px হয়ে যাবে।
- ফন্ট সাইজের জন্য rem আর spacing-এর জন্য em ব্যবহার করলে ভালো ফল পাওয়া যায়।
সঠিক ইউনিট ব্যবহার করলে ডিজাইন শুধু সুন্দর না, responsive ও user-friendly হয় এটাই মূল ব্যাপার!