Modern Typography Standards (Click to Copy)
| Element | CSS Clamp Value | Line-height |
|---|---|---|
| Heading 1 | clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem) |
1.1 |
| Heading 2 | clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) |
1.15 |
| Heading 3 | clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem) |
1.2 |
| Body Text | clamp(1rem, 0.95rem + 0.25vw, 1.125rem) |
1.8 |
Learn the best practices for website font sizes, site width, and padding. Discover how to use CSS Clamp values to make your WordPress site fully responsive and accessible without manual adjustments for mobile or tablet.”
ওয়েবসাইটের জন্য সেরা Font Size:
CSS clamp() দিয়ে Responsive Typography
একটি CSS ফাংশন দিয়ে সব ডিভাইসে সুন্দর টাইপোগ্রাফি — কোনো Media Query ছাড়াই।
Clamp কী?
clamp() হলো CSS-এর একটি ফাংশন যা তিনটি ভ্যালু নেয়: সর্বনিম্ন, পছন্দের, এবং সর্বোচ্চ সাইজ। ব্রাউজার স্ক্রিনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে সঠিক সাইজ বেছে নেয়।
font-size: clamp(ন্যূনতম, পছন্দের, সর্বোচ্চ);
/* বাস্তব উদাহরণ */
font-size: clamp(16px, 2.5vw, 32px);
এই কোডের অর্থ: ফন্ট সাইজ কখনো 16px-এর নিচে যাবে না, কখনো 32px-এর বেশি হবে না — মাঝখানে স্ক্রিন অনুযায়ী ফ্লুয়েন্টলি পরিবর্তন হবে।
কোথায় কোথায় ব্যবহার করবে?
পেজের মূল হেডিং (h1, h2, h3)
হিরো সেকশনের বড় টেক্সট
বডি টেক্সট — ছোট স্ক্রিনে 14px, বড় স্ক্রিনে 18px
Padding এবং Margin-এও clamp() চলে
Card বা Container-এর width-এও ব্যবহার করা যায়
/* টাইপোগ্রাফি স্কেল উদাহরণ */
h1 { font-size: clamp(28px, 5vw, 64px); }
h2 { font-size: clamp(22px, 3.5vw, 48px); }
h3 { font-size: clamp(18px, 2.5vw, 32px); }
p { font-size: clamp(14px, 1.5vw, 18px); }
প্রো টিপ: মাঝের ভ্যালুতে vw ইউনিট ব্যবহার করলে সবচেয়ে ভালো ফলাফল পাওয়া যায়। 2.5vw মানে স্ক্রিনের চওড়ার ২.৫%।
৪টি মূল সুবিধা:
সম্পূর্ণ Responsive — সব ডিভাইসে কাজ করে
কোড অনেক কম — Media Query-র ঝামেলা নেই
পাঠযোগ্যতা ভালো — মসৃণ পরিবর্তন
Accessibility ঠিক থাকে — জুম করলেও সমস্যা নেই
(Why Choose Me?)
একজন ৫ বছরের অভিজ্ঞ ডেভেলপার হিসেবে আমি কেবল একটি ওয়েবসাইট তৈরি করি না, বরং একটি দীর্ঘস্থায়ী ডিজিটাল সমাধান প্রদান করি। আমার কাজের মূল লক্ষ্য থাকে আপনার ব্র্যান্ডকে এক ধাপ এগিয়ে রাখা।
আমি যখন কোনো ওয়েবসাইট ডিজাইন করি, তখন আমি এই গ্লোবাল স্ট্যান্ডার্ডগুলো (যেমন CSS Clamp এবং Fluid Typography) মেনে চলি। এতে আপনার সাইটটি:
শুধু সুন্দর দেখায় না, বরং টেকনিক্যালি অনেক বেশি শক্তিশালী হয়।
এটি হয়ে ওঠে ফিউচার-প্রুফ, অর্থাৎ ভবিষ্যতে নতুন কোনো ডিভাইস বা স্ক্রিন সাইজ আসলেও আপনার সাইটের লেআউট বা ফন্ট ভেঙে যাবে না।
সুপার রেসপন্সিভ পারফরম্যান্স নিশ্চিত করে, যা ডেস্কটপ থেকে মোবাইল—সবখানেই ইউজারকে সেরা অভিজ্ঞতা দেয়।
আপনার ব্যবসার অনলাইন যাত্রাকে পেশাদার এবং বৈশ্বিক মানের করে তুলতে আমি সর্বদা প্রতিশ্রুতিবদ্ধ।
