🔖 টাইপোগ্রাফি (Typography)
একটি ওয়েবসাইটের প্রায় ৯০% অংশই হলো টেক্সট। তাই আপনার ওয়েবসাইটের ফন্ট এবং টাইপোগ্রাফি যদি সুন্দর না হয়, তবে পুরো ডিজাইনই খারাপ লাগবে!
📌 বেসিক টেক্সট প্রপার্টিজ
টেক্সট সাজানোর জন্য আমরা সাধারণত নিচের প্রপার্টিগুলো ব্যবহার করি:
p {
color: #333333; /* টেক্সটের রং */
font-size: 16px; /* ফন্টের আকার */
font-weight: bold; /* ফন্ট কতটা মোটা হবে (যেমন: normal, bold, 400, 700) */
text-align: center; /* টেক্সটের অ্যালাইনমেন্ট (left, center, right) */
line-height: 1.5; /* দুই লাইনের মাঝখানের দূরত্ব (খুবই গুরুত্বপূর্ণ!) */
text-transform: uppercase; /* সব অক্ষর বড় হাতের করা */
text-decoration: underline; /* নিচে দাগ দেওয়া (লিংকে none করা হয়) */
}📌 কাস্টম ফন্ট ব্যবহার করা (Google Fonts)
ওয়েবসাইটে সুন্দর ফন্ট দেখানোর সবচেয়ে সহজ উপায় হলো Google Fonts ব্যবহার করা।
১. Google Fonts ওয়েবসাইটে যান।
২. আপনার পছন্দের ফন্ট (যেমন: Inter বা Roboto) সিলেক্ট করুন।
৩. তাদের দেওয়া <link> ট্যাগটি কপি করে আপনার HTML এর <head> এ বসিয়ে দিন।
৪. CSS এ ফন্টটি অ্যাপ্লাই করুন:
body {
font-family: 'Inter', sans-serif;
}📌 🥷 নিঞ্জা টেকনিক: px vs rem
আমরা সাধারণত ফন্ট সাইজ px (পিক্সেল) এ দিয়ে থাকি। কিন্তু প্রফেশনালরা rem ব্যবহার করে! কেন?
সমস্যা: আপনি যদি font-size: 16px; দেন, তবে এটি ফিক্সড হয়ে যায়। যাদের চোখের সমস্যা আছে এবং তারা ব্রাউজারের ডিফল্ট ফন্ট সাইজ বড় করে রেখেছেন, তাদের ক্ষেত্রেও আপনার ফন্ট ১৬ পিক্সেলই দেখাবে, যা Accessibility এর জন্য খুবই খারাপ!
নিঞ্জা সলিউশন:
rem (Root EM) ব্যবহার করুন! ১ rem মানে হলো ব্রাউজারের ডিফল্ট ফন্ট সাইজ (সাধারণত ১৬ পিক্সেল)।
/* ব্রাউজারের ডিফল্ট সাইজ ১৬ পিক্সেল ধরে */
h1 {
font-size: 2rem; /* 16 x 2 = 32px */
}
p {
font-size: 1rem; /* 16 x 1 = 16px */
}
small {
font-size: 0.875rem; /* 16 x 0.875 = 14px */
}সুবিধা: ইউজার যদি তার ব্রাউজার সেটিংস থেকে ফন্ট সাইজ বড় করে, আপনার ওয়েবসাইটের সব ফন্ট সেই অনুযায়ী আনুপাতিক হারে বড়-ছোট হবে। এটি রেসপন্সিভ এবং অ্যাক্সেসিবিলিটি ফ্রেন্ডলি! 🏆