ওয়েব ডিজাইন এর ক্ষেত্রে সবথেকে বিভ্রান্তিকর যে বিষয়গুলো তার মধ্যে অন্যতম হচ্ছে সিএসএস ফন্ট সাইজ এর (font-size) ইউনিট নির্ধারন। এমন কোন ওয়েব ডিজাইনার নেই যে এই বিষয়টা নিয়ে সমস্যায় ভুগে নাই বা বিভ্রান্তিতে পড়ে নাই। ওয়েব ডিজাইন এ ব্যাবহার করার জন্য ফন্ট সাইজ নির্ধারণের ৫ ধরনের ইউনিট বর্তমান। এগুলো হচ্ছে – px, pt, %(percent), em এবং rem. এই ৫ ধরনের ইউনিটে পরিমাপের বিষয় আলাদা আলাদা। এদের কাজ করার ধরনও আলাদা।

তবে এদের মধ্যে কোন ইউনিট বেশি উপযোগী বা কোন ইউনিটে কাজ করা বেশি ভালো তা নিয়ে তর্ক বিতর্ক এতোটাই বেশি যে নির্দিষ্ট করে কোন ইউনিট বাছাই করা মুশকিল। একেক ডিজাইনার এর মতে এক এক ইউনিট বেশি কার্যকর। তাই বাছাই করার আগে আপনার উচিত সবগুলো ইউনিট এর ব্যাবহার, কর্মপদ্ধতি এবং সুবিধা-অসুবিধা জেনে নেওয়া জাতে আপনার কোডিং টিচার এর শিখিয়ে দেওয়া ইউনিট অন্ধের মত ব্যাবহার না করে আপনি আপনার কাছে যেটা ভালো মনে হয় সেটা বাছাই করে কাজ করতে পারেন। তবে এই ক্ষেত্রে খেয়াল রাখবেন নিজের কাজ করতে সুবিধা এই ধরনের ইউনিট বাছাই না করে বরং সেই ধরনের ইউনিট বাছাই করুন যেটা রেস্পন্সিভ এর ক্ষেত্রে কম সমস্যা  সৃষ্টি করবে। তো চলুন জেনে নেই বর্তমান চলমান ৫ ইউনিট সম্পর্কেঃ

ফন্ট সাইজ এর ৫ ইউনিট (5 units to declare font-size):

px (পিক্সেল ইউনিট):

এটি বহুল প্রচলিত একটি ইউনিট বিশেষ করে ওয়েব ডিজাইন এর জন্য। যারা ডিজাইন থেকে ওয়েবে কনভার্ট করার কাজ করেন ডিজাইনকে পিক্সেল পারফ্যাক্ট করতে এর কোন জুড়ি নেই। কিন্তু এই ইউনিট এর একটা বড় সমস্যা আছে যা খুব কম ডিজাইনার খেয়াল করেন। কিন্তু সমস্যাটা অন্তত আমার কাছে খুব প্রকট মনে হচ্ছে। সমস্যা হচ্ছে –

সবার জানা যে এখনকার প্রায় সব ট্যাব বা এইজাতীয় ডিভাইসের ওয়াইড ১০২৪ পিক্সেল বা কোন কোন ক্ষেত্রে তারও বেশি। কিন্তু জানেন তো ১০২৪ পিক্সেল হচ্ছে ডেক্সটপ এর ছোট মনিটর এর রেজুলশন। এখন কথা হচ্ছে ১০২৪ পিক্সেল এর ডেক্সটপ মনিটর ১৪ ইঞ্চি হয়ে থাকে যেখানে অনেক ট্যাব এর ডিসপ্লে সাইজ ৬ ইঞ্ছি। তারমানে বুজতেই পারছেন এখানে ৬ ইঞ্ছির মধ্যেই ১০২৪ পিক্সেল শো করানো হয়। অর্থাৎ একই রেজুলশন এর জন্য অর্ধেকের থেকেও ছোট সাইজের ডিসপ্লে। এখন ভাবুন তো যদি ১২পিক্সেলের কোন লেখা ১৪ ইঞ্চি এর একটা মনিটরে ভালোভাবে দেখা যায় একটা ৬ ইঞ্চি এর ছোট ডিসপ্লে তে সেটা কিরকম দেখা যাবে। এখনো না বুজে থাকলে একই ডিজাইন দুই মনিটরে ব্রাউজ করে দেখুন, তাহলেই বুজতে পারবেন।

তাই আপনার ডিজাইন পিক্সেল পারফ্যাক্ট করতে বা অন্য কোন কারনে আপনাকে যদি পিক্সেল ইউনিট ব্যাবহার করতেই হয় তাহলে এই বিষয়টির উপর নজর দিন। দেখে নিন বড় মনিটরে কত সাইজের ফন্ট ব্যাবহার করলে ছোট ডিভাইসে তা দেখতে সমস্যা হয় না। আর সম্ভব হলে এমন ফন্ট ব্যাবহার করুন যেটা যত ছোটই দেখাক স্পষ্ট দেখা যাবে। আর এই ফন্ট সাইজ ইউনিট ব্যাবহারের রুল নিম্নরূপঃ

font-size: 14px;

pt (পয়েন্ট ইউনিট):

এটা মুলত প্রিন্ট মিডিয়াতে বেশি জনপ্রিয়। ১ পয়েন্ট হচ্ছে ১ ইঞ্চি এর ৭২ ভাগের ১ ভাগ। এটার মাপটা অনেকটাই পিক্সেলের মত। তবে পিক্সেল থেকে এর পার্থক্য হল এই ইউনিট ব্যাবহার করলে আপনি স্কেল দিয়ে পরিমাপ করতে পারবেন কিন্তু পিক্সেলের ক্ষেত্রে তা নয়। অর্থাৎ আপনি পিক্সেলে করা একটা ইমেজ প্রিন্ট করলে তাতে কত পিক্সেল আছে তা আর পরিমাপ করতে পারবেন না। ট্যাব এর স্ক্রিন নিয়ে পিক্সেল এর ক্ষেত্রে যেই সমস্যার কথা বলছি তা এই ক্ষেত্রেও বিদ্যমান। এই ইউনিটের ব্যাবহার নিম্নরূপঃ

font-size: 14pt;

percent (%) (পারসেন্ট ইউনিট):

px এবং pt এর ক্ষেত্রে ট্যাব বা ছোট ডিভাইস জনিত যেই সমস্যা ছিল সেটা পারসেন্ট ইউনিট এর ব্যাবহারে সল্ভ করা সম্ভব। যেকোনো ডিভাইসের ক্ষেত্রে রুট ফন্টের একটা ডিফল্ট সাইজ থাকে। মানে ধরুন যদি ১০২৪ পিক্সেলের বড় মাপের স্ক্রিনে font-size: 100% মানে ১২ পিক্সেল হয় তবে ছোট ডিভাইসের ক্ষেত্রে তা সাধারনত বেশিই হয়। অর্থাৎ সেই ক্ষেত্রে font-size: 100% হতে পারে ১৪ পিক্সেল। তাহলে আর এই ক্ষেত্রে ট্যাব নিয়ে কোন সমস্যা রইলো না। তবে সবক্ষেত্রে যে রুট ভেলু দিয়েই হিসেব করবে তা নয়। এটি ব্যাবহারে কোন সাব ইলিমেন্ট তার পেরেন্ট ইলিমেন্ট এর সাথেও রিলেশন করে। অর্থাৎ আপনি যদি কোন ul এর ফন্ট সাইজ দেন 120% তবে এটি হয়তো ১৪.৪ পিক্সেল হবে। কিন্তু এর ভেতরে কোন li তে যদি কোন ul থাকে তবে সেই ul এর ফন্ট সাইজ হবে ১৭.২৮ পিক্সেল আবার তার ভেতরে যদি আরেকটা ul থাকে তবে তার ফন্ট সাইজ হবে ২০.৭৪ পিক্সেল। কিভাবে? প্রথম ul ছিল 120%, এখন যদি 100% = 12 px হয় তবে 120% = 1.2*12px = 14.4px. এইবার পরবর্তী ul এর ক্ষেত্রে এটি মূল ফন্টের সাথে তুলনা না করে এর পেরেন্ট ইলিমেন্টের সাথে তুলনা করবে। অর্থাৎ এই ক্ষেত্রে পেরেন্টের ফন্ট সাইজ 14.4px সুতরাং এর ফন্ট সাইজ হবে 14.4*1.2 = 17.28px, এইভাবে পরবর্তীতে আবার 17.28*1.2 = 20.74px; সুতরাং বুজতেই পারছেন, এটিরও সীমাবদ্ধতা আছে। যাই হোক এই ক্ষেত্রে এইভাবে ব্যাবহার করতে হবেঃ

font-size: 120%;

em (ইএম ইউনিট):

ওয়েবে ব্যাবহারের জন্য ইএম হচ্ছে একটা জনপ্রিয় ইউনিট। এটি বহুল ব্যবহৃত। এর কাজের ধরন অনেকটাই পারসেন্টের মত। 1 em = current font size. তারমানে বুজতেই পারছেন ইএম এও পারসেন্টের মত সাব ইলিমেন্ট জনিত প্রবলেম আছে। এর পরেও ইএম বেশ জনপ্রিয় হয়ে উঠেছে। এর জনপ্রিয়তা নিয়ে কোন সন্দেহ ছিল না যদি rem না আসতো। এর ব্যাবহার নিম্নরূপঃ

font-size: 1em;

rem (আরইএম ইউনিট):

ব্যক্তিগতভাবে যদি বলি আমার সবথেকে প্রিয় ইউনিট এটি। কারন এটি আমার সব সমস্যার সমাধান করে। যদিও মাঝে মাঝে আমি ফন্টের ক্ষেত্রে rem এবং em মিক্স করে ব্যাবহার করি। এটির ইউনিট সিস্টেম em এবং % এর মত। শুধু পার্থক্য হচ্ছে এটি সবসময় রুট ফন্ট সাইজের থাকেই সম্পর্ক করে। অর্থাৎ ডিভাইস বা ব্রাউজারের 100% = 1rem. অর্থাৎ এটি আসার পর পেরেন্ট এন্ড চাইল্ড জনিত সমস্যার সমাধান হয়ে গেছে। যদিও অনেক ডিজাইনার এখনো এই ইউনিট সম্পর্কে অবগত নন। rem ইউনিট এ font-size এরকম:

font-size: 1rem;

তো এই পোস্টটি পড়ে থাকলে আপনি অবশ্যই বুজতে পারছেন কোন ফন্ট সাইজ ইউনিট ব্যবহার করা বেশি যুক্তিযুক্ত অথবা কোনটি আপনার জন্য ভালো। আশা করি পোস্টটি আপনার ওয়েব ডিজাইন ক্যারিয়ারের ক্ষেত্রে অনেক কাজে লাগবে। ধন্যবাদ।

পোস্টটি পূর্বে এখানে প্রকাশিত।