টাইপোগ্রাফি

ওয়েব ফিচার: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max(), and clamp() Viewport units

সামগ্রিক পেশাদার পদ্ধতি

  • ফন্ট-সাইজ ইনহেরিটেন্সের সময় আপেক্ষিক স্কেলিং নিশ্চিত করতে line-height-এর জন্য ইউনিটলেস নম্বর (যেমন, 1.5) ব্যবহার করুন।
  • দীর্ঘ URL-এর জন্য overflow-wrap: break-word (বা anywhere) ব্যবহার করুন।
  • ফন্ট-সাইজের জন্য px ব্যবহার করবেন না। ব্যবহারকারীর ব্রাউজারের ফন্ট-সাইজ সংক্রান্ত পছন্দ (রুট ফন্ট সাইজ) মেনে চলার জন্য rem অথবা প্রাসঙ্গিক সাইজের জন্য em/শতাংশ ব্যবহার করুন।

পাঠযোগ্যতা

  • টেক্সটের দীর্ঘ লাইন এড়িয়ে চলুন: প্যারাগ্রাফ ব্লকের প্রস্থ সর্বাধিক ৮০টি অক্ষরের মধ্যে সীমাবদ্ধ রাখুন।
  • হোয়াইটস্পেসের নদী এড়িয়ে চলুন: text-align: justify এড়িয়ে চলুন কারণ এটি টেক্সট পড়া কঠিন করে তুলতে পারে। আপনাকে এটি ব্যবহার করতে হলে, শব্দের মধ্যে অতিরিক্ত হোয়াইটস্পেস এড়াতে hyphens: auto-এর সাথে এটি ব্যবহার করুন।
  • অলঙ্কৃত ফন্ট ব্যবহার করবেন না: মূল পড়ার কন্টেন্টের জন্য কার্সিভ টাইপফেস বাদ দিন।
  • গুরুত্ব দেওয়ার জন্য সব বড় হাতের অক্ষরে লেখার উপর নির্ভর করবেন না: ভিজ্যুয়াল গুরুত্ব দেওয়ার জন্য বোল্ড করা পছন্দ করুন এবং গুরুত্ব দেওয়ার বিষয়টি শব্দার্থগত হলে <em>/<strong> ব্যবহার করুন।
  • সামগ্রিকভাবে জোর দেওয়ার বিষয়টি সীমিত করুন: সব জায়গায় জোর দিলে তার অর্থ হারিয়ে যায় — শুধুমাত্র সেখানেই এটি প্রয়োগ করুন যেখানে এটি কন্টেন্ট কীভাবে পড়া উচিত তা পরিবর্তন করে।
  • ব্যবহারকারীর জুম সংক্রান্ত পছন্দকে সমর্থন করা: কন্টেন্ট বা কার্যকারিতা না হারিয়ে ব্যবহারকারীদের টেক্সটের সাইজ ২০০% পর্যন্ত ছোট বড় করার অনুমতি দিন।
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

টেক্সট মোড়ানো

  • ভারসাম্যপূর্ণ শিরোনাম এবং শিরোনামের মতো কন্টেন্টের জন্য text-wrap: balance ব্যবহার করুন (যেমন, <th>)
  • দীর্ঘ-ফর্মের বডি টেক্সটের (অনুচ্ছেদ, ব্লককোট ইত্যাদি) জন্য text-wrap: pretty ব্যবহার করুন
  • text-wrap: balance বা text-wrap: pretty ইচ্ছাকৃতভাবে ব্যবহার করুন, *-এ এটি প্রয়োগ করবেন না কারণ এটিতে পারফর্ম্যান্সের খরচ আছে।
  • দৃশ্যমান বক্স (ব্যাকগ্রাউন্ড, বর্ডার, শ্যাডো ইত্যাদি) সহ এলিমেন্টে text-wrap: balance এড়িয়ে চলুন, কারণ এটি কন্টেনারের প্রস্থ পরিবর্তন করে না, এটি শুধুমাত্র সেই প্রস্থের মধ্যে টেক্সট কীভাবে র‍্যাপ করা হবে তা প্রভাবিত করে। এর ফলে কন্টেনারের শেষে খালি জায়গা থেকে যেতে পারে, যা সাধারণত কাম্য নয়।

রেসপন্সিভ টাইপোগ্রাফি

  • clamp()-এ ভিউপোর্ট-রিলেটিভ এবং ফন্ট-রিলেটিভ ইউনিট একত্রিত করুন যাতে ফন্টের সাইজ ভিউপোর্টের সাইজের সাথে স্কেল করা যায় এবং একই সাথে তা যেন কাঙ্ক্ষিত রেঞ্জের মধ্যে থাকে। যেমন, clamp(2rem, 1rem + 5vw, 4rem)। ফন্ট-সাইজ কত দ্রুত পরিবর্তন হবে তা নিয়ন্ত্রণ করতে ভিউপোর্ট-রিলেটিভ ও ফন্ট-রিলেটিভ ইউনিটের অনুপাত অ্যাডজাস্ট করুন।
  • clamp() ছাড়া ফন্ট-সাইজের জন্য শুধু vw ব্যবহার করবেন না, কারণ এটি খুব ছোট বা খুব বড় স্ক্রিনে টেক্সটকে খুব ছোট বা খুব বড় করে দেখাতে পারে।