CSS Font-Size: টেক্সট সাইজিংয়ের সম্পূর্ণ গাইড (px, em, rem, vw, keywords)

CSS font-size প্রপার্টি ওয়েবপেজের যেকোনো টেক্সট এলিমেন্টের ফন্ট সাইজ নির্ধারণ করে। এটি ক্লাস, আইডি, বা এলিমেন্টে প্রয়োগ করা যায়।

ফন্ট সাইজ ইউনিটের ধরন

১. Pixels (px) - tuyệt đối ইউনিট

h1 { font-size: 28px; }
p { font-size: 12px; }

সুবিধা: নির্ভুল নিয়ন্ত্রণ, ব্রাউজার/ওএস-স্বাধীন।
সীমাবদ্ধতা: অ্যাক্সেসিবিলিটি সমস্যা - ব্যবহারকারী ব্রাউজার সেটিংস থেকে ফন্ট সাইজ বড়াতে পারে না।

২. EM - রিলেটিভ ইউনিট (পেরেন্টের সাপেক্ষে)

p { font-size: 1em; }    /* পেরেন্টের ফন্ট সাইজের ১x */
h1 { font-size: 1.5em; } /* পেরেন্টের ফন্ট সাইজের ১.৫x */

পেরেন্টের ফন্ট সাইজ 20px হলে 1em = 20px, 1.5em = 30px। নেস্টেড এলিমেন্টে কম্পাউন্ডিং হয় (প্রতিটি লেভেলে গুণিত হয়)।

৩. REM (Root EM) - রুট এলিমেন্টের সাপেক্ষে

p { font-size: 1rem; }
h1 { font-size: 1.5rem; }

রুট (<html>) এলিমেন্টের ফন্ট সাইজের সাপেক্ষে। ডিফল্ট 16px হলে 1rem = 16px। নেস্টিংয়ের প্রভাব পায় না - সবচেয়ে প্রিডিক্টেবল।

৪. Keywords - কিওয়ার্ড ভিত্তিক

Absolute keywords: xx-small (9px), x-small (10px), small (13px), medium (16px), large (18px), x-large (24px), xx-large (32px)

Relative keywords: smaller, larger (পেরেন্টের সাপেক্ষে)

h2 { font-size: x-large; } /* 24px */
h3 { font-size: large; }   /* 18px */

৫. Viewport Units (vw, vh) - রেসপন্সিভ

h1 { font-size: 4vw; }  /* ভিউপোর্ট প্রস্থের ৪% */
p { font-size: 1vw; }   /* ভিউপোর্ট প্রস্থের ১% */

ব্রাউজার উইন্ডো রিসাইজ করলে ফন্ট সাইজ অটোমেটিক্যালি পরিবর্তন হয়। রেসপন্সিভ ডিজাইনের জন্য আদর্শ।

তুলনামূলক সারসংক্ষেপ

সেরা অনুশীলন

• বেস ফন্ট সাইজ <html>-এ সেট করুন (যেমন: 16px বা 100%)
• প্রধান টাইপোগ্রাফির জন্য rem ব্যবহার করুন
• কম্পোনেন্ট-স্পেসিফিক স্কেলিং için em ব্যবহার করুন
• রেসপন্সিভ হেডিং için clamp() বা vw বিবেচনা করুন
• অ্যাক্সেসিবিলিটির জন্য px এড়িয়ে চলুন

উপসংহার

font-size প্রপার্টি px, em, rem, keywords, vw/vh - সব গ্রহণ করে। আধুনিক ওয়েব ডেভেলপমেন্টে rem ভিত্তিক টাইপোগ্রাফি সিস্টেম সবচেয়ে রোবাস্ট এবং মেইনটেইনযোগ্য।