বেসলাইন সিএসএস বৈশিষ্ট্য সহ প্রতিক্রিয়াশীল এবং তরল টাইপোগ্রাফি

Miriam Suzanne

প্রকাশিত: ১৬ ডিসেম্বর, ২০২৫

রেসপন্সিভ ওয়েব ডিজাইন হল এমন একটি ওয়েবসাইট তৈরির পদ্ধতি যা দেখতে সুন্দর এবং বিভিন্ন ব্রাউজার, ভিউপোর্টের মাত্রা, ডিভাইস এবং ব্যবহারকারীর পছন্দের উপর ভালোভাবে কাজ করে। টাইপোগ্রাফির ক্ষেত্রে প্রয়োগ করা হলে, কেন্দ্রীয় উদ্বেগ প্রায়শই ব্রাউজারের প্রস্থের উপর ভিত্তি করে font-size সামঞ্জস্য করা হয় - যা line-height এবং margin মতো ব্যবধানের মানের উপরও প্রভাব ফেলতে পারে।

ডিজাইনার হিসেবে, ব্রাউজারে কত জায়গা আছে তা ভেবে দেখা এবং সেই অনুযায়ী আপনার টাইপোগ্রাফি সামঞ্জস্য করা যুক্তিসঙ্গত। এটাও মনে রাখা গুরুত্বপূর্ণ যে বিভিন্ন ব্যবহারকারীর বিভিন্ন ডিভাইসে বিভিন্ন font-size চাহিদা থাকবে, যা আপনার নাগালের বাইরে বা সচেতনতার বাইরে ব্যক্তিগত পরিস্থিতির উপর নির্ভর করে। তাই এমন কিছু করা বিপজ্জনক যা চূড়ান্ত ফলাফলের উপর ব্যবহারকারীর নিয়ন্ত্রণ কেড়ে নেবে। ওয়েব ব্রাউজ করার সময় ফন্ট সাইজিং প্রভাবিত করার জন্য লোকেরা দুটি প্রাথমিক ইনপুট ব্যবহার করতে পারে:

• সমস্ত ওয়েবসাইট জুড়ে একটি ডিফল্ট font-size পছন্দ প্রদান করা হচ্ছে।
• সাইট অনুসারে জুম ইন বা আউট করা।

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

ব্যবহারকারীর পছন্দের উপর ভিত্তি করে একটি বেসিক font-size নিয়ে আলোচনা করুন

অনলাইনে যেকোনো টাইপোগ্রাফি সংজ্ঞায়িত করার প্রথম ধাপ হল ব্যবহারকারীর font-size পছন্দের উপর ভিত্তি করে প্রাথমিক ফন্ট সাইজ নির্ধারণ করা। এটি পৃষ্ঠার বেশিরভাগ লেখার জন্য এবং শিরোনামের মতো অন্যান্য ফন্ট সাইজের জন্য ভিত্তি হিসেবে ব্যবহার করা হবে। এখানে সবচেয়ে সহজ বিকল্প হল 1em ব্যবহার করে ব্যবহারকারীকে সম্পূর্ণ নিয়ন্ত্রণ দেওয়া, কোনও সমন্বয় ছাড়াই। যখন আপনি অন্য কোনও font-size মান সেট করেন না, তখন 1em ব্যবহারকারীর পছন্দকে বোঝায়। অন্যদিকে, পিক্সেল বা অন্যান্য পরম ইউনিট (এবং এমনকি ভিউপোর্ট-সম্পর্কিত ইউনিট) তে font-size সেট করা ব্যবহারকারীকে সম্পূর্ণরূপে ওভাররাইড করবে, যা এড়ানো উচিত।

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

বিকল্প এক: অনুমানের উপর ভিত্তি করে একটি গুণক গণনা করুন

একটি সাধারণ আপস হল ব্যবহারকারীর ডিফল্ট font-size এর সাপেক্ষে em অথবা % ইউনিটে একটি সামঞ্জস্যপূর্ণ ফন্ট- font-size নির্ধারণ করা। সাধারণত, এই পদ্ধতিটি এই ধারণা দিয়ে শুরু হয় যে ব্রাউজারগুলি 16px ডিফল্ট প্রদান করে এবং বেশিরভাগ ব্যবহারকারী সেই ডিফল্টটি রেখে দেয়। যদি আপনি মনে করেন যে 20px ফন্ট সাইজ আপনার সাইটের জন্য আরও ভালো কাজ করবে, তাহলে 1.25em অথবা 125% font-size সাধারণত আপনার পছন্দসই ফলাফল দেবে:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

গণিত দেখানোর জন্য আপনি এখানে একটি calc() ফাংশনও ব্যবহার করতে পারেন, তবে আপনাকে এখনও সমীকরণটি জানতে হবে—লক্ষ্যের আকার, প্রত্যাশিত আকার দ্বারা ভাগ করা, 1em দ্বারা গুণ করা:

html {
  font-size: calc(20 / 16 * 1em);
}

যাদের পছন্দ বেশি বা ছোট, তাদের ফলাফলের উপর কিছুটা প্রভাব ফেলতে পারে, কারণ আপনার ডিফল্ট এখন তাদের পছন্দের তুলনায় - এই ক্ষেত্রে তাদের পছন্দের ১.২৫ গুণ। কিন্তু, এটা অদ্ভুত হতে পারে যদি আপনি এবং ব্যবহারকারী উভয়ই 20px ডিফল্ট অনুরোধ করেন এবং ফলাফল 25px হয় - তাদের সামঞ্জস্যপূর্ণ ডিফল্ট সময় আবার ১.২৫ - এমন একটি আকার যা কেউ জিজ্ঞাসা করেনি।

বিকল্প দুই: clamp() কে কাজটি করতে দিন

আরও সূক্ষ্ম পদ্ধতিতে CSS তুলনামূলক ফাংশন ব্যবহার করা হয়, কোনও গণিত ছাড়াই! 1em কে 16px এর সমান ধরে নেওয়ার পরিবর্তে এবং px থেকে em এ অবিশ্বাস্য রূপান্তর করার পরিবর্তে, আপনি 1em একটি চলক হিসাবে ভাবতে পারেন যা ব্যবহারকারীর পছন্দকে নির্দেশ করে। 1em যে পিক্সেল মানই উপস্থাপন করুক না কেন, max(1em, 20px) এর একটি font-size সর্বদা আপনার ডিজাইন পছন্দ ( 20px ) এবং ব্যবহারকারীর পছন্দ ( 1em ) এর বৃহত্তরটি ফেরত দেবে। এটি ব্যবহারকারীকে বৃহত্তর, কিন্তু ছোট ফন্ট আকার নির্বাচন করতে দেয় না।

একটি clamp() ফাংশনে স্যুইচ করে, আপনি ব্যবহারকারীকে উভয় দিকেই স্কেল করার অনুমতি দিতে পারেন, যখন তাদের পছন্দের আকার আপনার নির্বাচিত ডিফল্ট থেকে অনেক দূরে চলে যায়। উদাহরণস্বরূপ, clamp(1em, 20px, 1.25em) এর একটি font-size ডিফল্টভাবে 20px হবে, যতক্ষণ না এটি ব্যবহারকারীর ডিফল্টের চেয়ে বড় হয়, কিন্তু তাদের ডিফল্টের 125% এর বেশি নয়।

এটি আপনার ডিজাইনকে ব্যবহারকারীর পছন্দের কাছাকাছি থাকাকালীন অগ্রাধিকার দেওয়ার সুযোগ দেয়, কিন্তু ব্যবহারকারীর পছন্দ নির্দিষ্ট সীমার বাইরে থাকাকালীনও অগ্রাধিকার থাকে। এতে কোনও রূপান্তর গণিত জড়িত নেই, ব্যবহারকারীর পছন্দের আকার সম্পর্কে কোনও অনুমান নেই এবং ডিজাইনার এবং ব্যবহারকারীর মানের গুণনের কোনও প্রয়োজন নেই।

html এলিমেন্টে এটিকে রুট font-size হিসেবে সেট করে, আপনি এখন সাইটের যেকোনো জায়গায় 1rem আলোচনার ভিত্তিতে বেস সাইজ হিসেবে উল্লেখ করতে পারবেন।

প্রতিক্রিয়াশীলতা যোগ করুন

এই font-size ভিউপোর্টে রেসপন্সিভ করার জন্য, একটি বিকল্প হল মিডিয়া কোয়েরি (অথবা কন্টেইনার কোয়েরি) ব্রেকপয়েন্ট যোগ করা। উদাহরণস্বরূপ, আপনি স্ক্রিনের আকারের উপর নির্ভর করে ক্ল্যাম্পড মান পরিবর্তন করতে পারেন:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

অন্য বিকল্পটি হল স্ট্যাটিক বেস ভ্যালুতে ভিউপোর্ট বা কন্টেইনার ইউনিট যোগ করা:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

vw (ভিউপোর্ট প্রস্থ) অথবা vi (ভিউপোর্ট ইনলাইন আকার) ইউনিট মোট ভিউপোর্টের ১% প্রতিনিধিত্ব করে—ব্রাউজারের সেই অংশ যা আপনার সাইটকে রেন্ডার করে। একইভাবে, cqw এবং cqi ইউনিট পৃষ্ঠার একটি ইনলাইন-আকারের কন্টেইনারের ১% প্রতিনিধিত্ব করে। আরও বিস্তারিত জানার জন্য কন্টেইনার কোয়েরি এবং ইউনিট ডেমো দেখুন।

এই পদ্ধতিটিকে প্রায়শই ফ্লুইড টাইপোগ্রাফি বলা হয়, কারণ মিডিয়া বা কন্টেইনার ব্রেকপয়েন্টে font-size পরিবর্তন ভিউপোর্টের প্রস্থের একটি পরিসরে স্থির থাকে, এক মান থেকে অন্য মানয় লাফানোর পরিবর্তে। তবে, ট্রানজিশনের মসৃণতা দেখে বিভ্রান্ত হবেন না—এই পার্থক্যটি সাধারণত শুধুমাত্র পরীক্ষায় দৃশ্যমান হয়, যদি আপনি উইন্ডোর আকার মসৃণভাবে সামঞ্জস্য করেন। ব্যবহারকারীরা এই প্রভাব খুব কমই (যদি কখনও হয়) দেখতে পান। যদিও ব্যবহারকারীরা নিয়মিত ব্রাউজারের আকার—অথবা জুম স্তর পরিবর্তন করতে পারেন—তবে ব্রেকপয়েন্ট এবং ভিউপোর্ট ইউনিটের মধ্যে পার্থক্য লক্ষ্য করার জন্য তাদের ধীর এবং তরল পদ্ধতিতে এই সমন্বয়গুলি করতে হবে। এটি শুধুমাত্র ট্রানজিশনকে প্রভাবিত করে, আকার পরিবর্তনের পরে ফলাফলকে নয়।

ফ্লুইড ফন্ট সাইজিংয়ের প্রধান সুবিধা হল এটি ম্যানুয়ালভাবে ব্রেকপয়েন্ট গণনা বা নির্দিষ্ট করার প্রয়োজন দূর করে, যেকোনো আকারে একটি ইন্টারপোলেটেড ফলাফল প্রদান করে। আপনি শুধুমাত্র শুরুর বিন্দু ( 16px ) এবং পরিবর্তনের হার ( 0.25vw ভিউপোর্টে প্রতি 100px বৃদ্ধির জন্য font-size 0.25px বৃদ্ধি প্রদান করবে) এবং সম্ভবত সর্বনিম্ন এবং সর্বোচ্চ মান সেট করেন। যখন ভিউপোর্ট 1000px প্রশস্ত হয়, তখন font-size 16px + 2.5px বা 18.5px হবে — তবে সেই গণনাটি সম্পূর্ণরূপে ব্রাউজার দ্বারা পরিচালিত হয়। ডেমোতে এই পদ্ধতিটি ব্যবহৃত হয়, কন্টেইনার-ভিত্তিক প্রতিক্রিয়াশীলতা দেখানোর জন্য cqi ইউনিট ব্যবহার করা হয়। রুট ( html ) উপাদানে ব্যবহার করা হলে, যেখানে কোনও সংজ্ঞায়িত কন্টেইনার নেই, cqi ইউনিটগুলি এখনও ভিউপোর্টের আকারকে নির্দেশ করে।

যদি আপনি নির্দিষ্ট ভিউপোর্ট আকারে নির্দিষ্ট font-size দিক থেকে চিন্তা করতে পছন্দ করেন, তাহলে আরও সরাসরি মিডিয়া কোয়েরি পদ্ধতি ব্যবহার করার কথা বিবেচনা করুন, যা আরও স্পষ্ট। যখন আপনি ইচ্ছাকৃত ব্রেকপয়েন্টের উপর ভিত্তি করে ভিউপোর্ট ইউনিট গণনা করার চেষ্টা করেন তখন জিনিসগুলি জটিল হয়ে ওঠে। অনেকে তৃতীয় পক্ষের সরঞ্জামগুলি থেকে মানগুলি অনুলিপি এবং পেস্ট করে এটি করেন, তবে ফলাফল কোডটি সরাসরি বোঝা বা পরিবর্তন করা অনেক বেশি কঠিন। সাধারণভাবে CSS এর ক্ষেত্রে, সেরা বিকল্পটি হল সেই বিকল্প যা আপনার উদ্দেশ্যগুলি সবচেয়ে স্পষ্টভাবে প্রকাশ করে।

সতর্কতা: ভিউপোর্ট পরিবর্তন সবসময় একই জিনিস বোঝায় না!

যদিও মিডিয়া কোয়েরি এবং vi ইউনিট বিভিন্ন উপায়ে প্রয়োগ করা হয়, উভয় পদ্ধতিই ভিউপোর্টের একই পরিমাপের উপর ভিত্তি করে। যদি ভিউপোর্টটি 600px প্রশস্ত হয়, তাহলে 100vw হবে 600px এর সমান, এবং ( width > 500px ) মিডিয়া কোয়েরির ভিতরের স্টাইল প্রয়োগ করা হবে।

কিন্তু ভিউপোর্ট 600px চওড়া হওয়ার অর্থ কী? বাস্তবে, পিক্সেল একটি নির্দিষ্ট আকার নয় যার সকল পরিস্থিতিতে একটিই অর্থ থাকে। যদিও কম পিক্সেল চওড়া একটি ভিউপোর্ট ছোট স্ক্রিনে (যেমন একটি ফোন), অথবা একটি সংকীর্ণ ব্রাউজার উইন্ডোতে থাকা স্বাভাবিক বলে মনে হয়, এটি একটি নির্ভরযোগ্য ধারণা নয়। প্রকৃতপক্ষে, জুম ইন এবং ব্রাউজার উইন্ডো ছোট করা উভয়ই পরিমাপ করা ভিউপোর্ট প্রস্থের উপর একই প্রভাব ফেলবে। একটি ক্রিয়া (জুমিং) একটি পিক্সেলের আকার পরিবর্তন করে, অন্যটি (আকার পরিবর্তন) ব্রাউজারের আকার নিজেই পরিবর্তন করে - তবে উভয়ই ব্রাউজারের প্রস্থ জুড়ে পিক্সেলের সংখ্যা পরিবর্তন করে। ভিউপোর্ট পরিমাপ থেকে আমরা যা পাই তা হল বর্তমান পিক্সেল আকার এবং বর্তমান ব্রাউজার উইন্ডোর মধ্যে সম্পর্ক ।

ব্যবহারকারীর জন্য, জুম এবং রিসাইজ করার প্রতিটি উদ্দেশ্যই ভিন্ন। যে ব্যবহারকারী জুম লেভেল পরিবর্তন করেন তিনি পৃষ্ঠার বিষয়বস্তু বড় বা ছোট করার চেষ্টা করেন, কিন্তু যে ব্যবহারকারী ব্রাউজারটি রিসাইজ করেন তিনি কেবল বিভিন্ন স্ক্রিন জুড়ে স্থান পরিচালনা করেন। ব্যবহারকারীর উদ্দেশ্য ভিন্ন হলেও, CSS পরিমাপের ফলাফল একই। উইন্ডো ছোট হওয়ার সাথে সাথে বা পিক্সেল বড় হওয়ার সাথে সাথে ব্রাউজারের প্রস্থে কম পিক্সেল থাকে।

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

ভিউপোর্ট-রিলেটিভ ইউনিটের মান 1vw অথবা 100vw তে পরিবর্তন করলে ফন্ট সাইজ এবং ভিউপোর্টের মধ্যে সঠিক সম্পর্ক বদলে যাবে। 1vw ফন্ট প্রতি 100px ভিউপোর্ট সাইজের জন্য 1px বৃদ্ধি পাবে, যেখানে 100vw ফন্টের আকার ভিউপোর্টের সমান হবে। ব্রাউজারের সাথে তুলনা করে ফন্টটি আরও ধীরে বা দ্রুত বৃদ্ধি পেতে আপনি এই মানটি পরিবর্তন করতে পারেন। কিন্তু ব্যবহারকারী জুম ইন বা আউট করলেও যেকোনো ভিউপোর্ট-রিলেটিভ মান স্থির থাকবে—ব্যবহারকারীর নিয়ন্ত্রণের প্রতি সম্পূর্ণরূপে প্রতিক্রিয়াশীল নয়।

একইভাবে, 1vw বা 100vw কোনটিই ব্যবহারকারীর ডিফল্ট font-size জন্য দায়ী নয়।

font-size জন্য ভিউপোর্ট বা কন্টেইনার-রিলেটিভ ইউনিটগুলি তাদের নিজস্বভাবে ব্যবহার করা সর্বদা ব্যবহারকারীর জন্য প্রতিকূল। যখন একটি font-size তার কন্টেইনারের প্রতি সম্পূর্ণরূপে প্রতিক্রিয়াশীল হয়, তখন এটি ব্যবহারকারীর ডিফল্ট বা সমন্বয়ের প্রতিও প্রতিক্রিয়াশীল হতে পারে না। সর্বোত্তম উদ্দেশ্য এবং সুরক্ষা ব্যবস্থা থাকা সত্ত্বেও, ব্যবহারকারীদের কাছ থেকে চূড়ান্ত font-size নিয়ন্ত্রণ কেড়ে নেওয়া এড়ানো উচিত। এটি কেবল একটি খারাপ ব্যবহারকারীর অভিজ্ঞতাই নয়, বরং আইন দ্বারা প্রায়শই প্রয়োজনীয় অ্যাক্সেসিবিলিটি নির্দেশিকাও লঙ্ঘন করতে পারে। বিশেষ করে, ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি নির্দেশিকাগুলির ধারা 1.4.4-এর জন্য "সহায়ক প্রযুক্তি ছাড়াই টেক্সটের আকার 200 শতাংশ পর্যন্ত পরিবর্তন করা যেতে পারে" প্রয়োজন।

font-size মানগুলি জুমের জন্য প্রতিক্রিয়াশীল কিনা তা কীভাবে নিশ্চিত করবেন

একটি viewport-relative font-size জুমের জন্য প্রতিক্রিয়াশীল কিনা তা নিশ্চিত করার জন্য, viewport-relative মানটি অন্য কোনও মানের সাথে সমন্বয় হিসাবে প্রয়োগ করতে হবে। CSS-এ calc() ফাংশন বা অন্য কোনও গণিত ফাংশন ব্যবহার করে এটি সম্ভব যা গণনা গ্রহণ করে—যেমন min() , max() , এবং clamp() । calc(16px + 1vw) এর একটি font-size ভিউপোর্ট আকার এবং একটি পিক্সেলের বর্তমান (zoom-relative) আকার উভয়ের উপর ভিত্তি করে। যদিও vw ইউনিট জুম দ্বারা প্রভাবিত হবে না, বেস মান হবে।

ফলাফল হল একটি font-size যা ভিউপোর্টের আকার এবং ব্যবহারকারীর জুম সেটিংস উভয়ের সাথেই সাড়া দেয়। যদি ব্যবহারকারী 200% জুম করে, তাহলে বেস মান দ্বিগুণ বড় ( 32px ) রেন্ডার হবে, যখন রেসপন্সিভ মান অপরিবর্তিত থাকবে। একটি 1000px ভিউপোর্ট প্রাথমিকভাবে আপনাকে 16px + 10px = 26px এর font-size দেবে, কিন্তু 200% জুমে, ফন্টের আকার কেবল 42px এ বৃদ্ধি পাবে, যা 160% এরও বেশি। এটি একটি চরম সমস্যা বলে মনে নাও হতে পারে, তবে আপনার font-size যত বেশি ভিউপোর্টের উপর ভিত্তি করে তৈরি করা হবে, তত কম কার্যকর জুম হবে।

ছোট স্ক্রিনে, font-size মূলত বেস পিক্সেল মান থেকে আসবে এবং জুমের প্রতি ভালোভাবে সাড়া দেবে। কিন্তু বড় স্ক্রিনে, ভিউপোর্ট-সাইজিং রেন্ডার করা ফন্ট সাইজের একটি বড় ভগ্নাংশ হয়ে যায়, যার ফলে জুম কম কার্যকর হয়। এটি বিশেষভাবে বিপজ্জনক হয়ে ওঠে যখন 500% জুম (বেশিরভাগ ব্রাউজারে সর্বোচ্চ) WCAG 1.4.4 দ্বারা প্রয়োজনীয় 200% ফন্ট-সাইজ বৃদ্ধি করতে পারে না—কিন্তু সেই বিন্দুর আগেও, জুম অকার্যকর হয়ে পড়া হতাশাজনক হতে পারে।

গ্রাফের বাম প্রান্তে ( 0 ভিউপোর্ট প্রস্থ), 500% জুম সম্পূর্ণরূপে কার্যকর। তবে, ব্রাউজারের আকার বৃদ্ধির সাথে সাথে সেই কার্যকারিতা দ্রুত হ্রাস পায় এবং (আনজুমযোগ্য) ভিউপোর্ট ইউনিটগুলি font-size ক্ষেত্রে একটি বৃহত্তর ফ্যাক্টর হয়ে ওঠে। যখন ব্রাউজারটি 2040px প্রস্থের হয়, তখন সর্বাধিক 500% জুম ফন্ট-সাইজ কেবল 200% বৃদ্ধি অর্জন করতে সক্ষম হয়। এর পরে, 200% কার্যকর ফন্ট-জুম আর সম্ভব নয়।

এই গণনাটিকে একটি clamp() ফাংশনে স্থানান্তর করে, ন্যূনতম এবং সর্বোচ্চ মান সহ, আপনি এমন সীমানা প্রয়োগ করতে পারেন যা জুমযোগ্য পাঠ্য নিশ্চিত করে। ম্যাক্সওয়েল বারভিয়ানের মতে:

যদি সর্বোচ্চ ফন্ট সাইজ সর্বনিম্ন ফন্ট সাইজের ২.৫ গুণের কম বা সমান হয়, তাহলে টেক্সটটি সর্বদা WCAG SC 1.4.4 পাস করবে, অন্তত সকল আধুনিক ব্রাউজারে।

যেহেতু @media এবং @container কোয়েরিগুলি vw এবং cqw ইউনিটের মতো একই পরিমাপের উপর ভিত্তি করে তৈরি, তাই ফন্টের আকার পরিবর্তন করার জন্য ব্রেকপয়েন্ট ব্যবহার করার সময় একই যুক্তি প্রযোজ্য। যখন আকার বৃদ্ধি খুব বেশি নাটকীয় হয়, তখন জুম অকার্যকর হয়ে যায়। আপনি নিম্নলিখিত ভিজ্যুয়ালাইজেশনে এই মানগুলি কীভাবে ইন্টারঅ্যাক্ট করে তা পরীক্ষা করতে পারেন:

ব্যবহারকারীর ডিফল্ট মানগুলির প্রতি font-size মানগুলি কীভাবে প্রতিক্রিয়াশীল তা নিশ্চিত করবেন

কিন্তু calc(16px + 1vw) এখনও ব্যবহারকারীর ডিফল্ট ফন্ট সেটিংসের প্রতি সাড়া দেয় না। এটি অর্জনের জন্য, আপনি px পরিবর্তে em বা rem ইউনিট ব্যবহার করে একটি বেস—অথবা min এবং max মান—সেট করতে পারেন। সবকিছু একসাথে রাখলে, আপনি লিঙ্ক করা ডেমোর সাথে মেলে এমন একটি পরিচিত ফলাফল পাবেন:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

মনে রাখবেন যে:

• সর্বনিম্ন এবং সর্বোচ্চ উভয়ই em ইউনিট ব্যবহার করে, যা ব্যবহারকারীর পছন্দের উপর ভিত্তি করে (এবং জুমের প্রতি প্রতিক্রিয়াশীল)।
• অতিরিক্ত vw মান ন্যূনতম রাখা হয়েছে, যাতে জুম খুব বেশি প্রভাবিত না হয়।
• সর্বোচ্চ আকার ( 1.125em ) সর্বনিম্ন ( 1em ) এর 2.5 গুণেরও কম, যা নিশ্চিত করে যে 200% কার্যকর font-size মান সর্বদা সম্ভব।

pow() সহ টাইপোগ্রাফিক স্কেল

বেশিরভাগ ডিজাইনে একাধিক ফন্ট সাইজ ব্যবহার করা হয়! একটি টাইপোগ্রাফিক স্কেল একাধিক ফন্ট সাইজের মধ্যে সম্পর্ক বর্ণনা করে। এটিকে একটি বেস সাইজ এবং অন্যান্য সাইজ গণনা করার জন্য একাধিক গুণক হিসেবে প্রকাশ করা যেতে পারে। CSS medium কীওয়ার্ডের সাথে সম্পর্কিত একটি অন্তর্নির্মিত টাইপোগ্রাফিক স্কেল প্রদান করে, যা ব্যবহারকারীর ফন্ট সাইজের পছন্দ বা 16px এর ডিফল্ট নির্দেশ করে। সম্পূর্ণ কীওয়ার্ড স্কেল হল:

• xx-small : ৩/৫ (০.৬)
• x-small : 3/4 (0.75)
• small : ৮/৯ (০.৮৯)
• medium : ১ (অন্যদের সাথে গুণিত ভিত্তি আকার)
• large : ৬/৫ (১.২)
• x-large : ৩/২ (১.৫)
• xx-large : ২/১ (২)
• xxx-large : ৩/১ (৩)

এই স্কেলটি রুট font-size পরিবর্তে ব্যবহারকারীর ডিফল্টের সাথে সম্পর্কিত, তাই আপনার সাইটের রুট font-size পরিবর্তন করার পরে এটি ভালভাবে কাজ করে না। বেশিরভাগ লেখক কাস্টম বৈশিষ্ট্য সহ একই ধরণের স্কেল পুনরায় তৈরি করেন - কখনও কখনও একই টি-শার্ট আকারের নাম ব্যবহার করেন, এবং কখনও কখনও গাণিতিক স্কেলের ধাপগুলি উপরে এবং নীচের দিকে পছন্দ করেন। সাধারণ অনুপাতের উপর ভিত্তি করে এই স্কেলগুলি তৈরি করার জন্য অনেক তৃতীয় পক্ষের সরঞ্জাম রয়েছে, বেশিরভাগই পশ্চিমা সঙ্গীত স্কেল থেকে ধার করা হয়েছে:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

কিন্তু CSS-এ নিজস্ব স্কেল তৈরি করতে বাইরের কোনও সরঞ্জামের প্রয়োজন নেই—নতুন pow() ফাংশনটি আপনার জন্য আপনার স্কেল তৈরি করতে পারে—1 1rem আপনার নিজস্ব বেস সাইজ দিয়ে!

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

স্কেল সামঞ্জস্যপূর্ণ রাখার জন্য আপনাকে সম্পূর্ণ ধাপ ব্যবহার করতে হবে না। আসলে, সাধারণ 12pt টাইপোগ্রাফি স্কেলে প্রতি ধাপে মোটামুটি 5টি ভগ্নাংশ ব্যবহার করা হয়। যদিও এখানে বড় আকারের স্কেলে সম্পূর্ণ ধাপ ব্যবহার করা হয়, ছোট আকারের স্কেলে ধীর গতিতে স্কেল করার জন্য ভগ্নাংশ ব্যবহার করা হয়।

CSS মিক্সিন এবং ফাংশনগুলি সেই লজিকটিকে আরও ঘনীভূত করা সম্ভব করে, অন্যদিকে progress() এর মতো অন্যান্য অন্তর্নির্মিত সরঞ্জামগুলি এমন স্কেল তৈরি করা সহজ করে তোলে যা এক মান থেকে অন্য মানকে তরলভাবে সামঞ্জস্য করে। কিন্তু এই বৈশিষ্ট্যগুলি এই ডেমোর জন্য সুযোগের বাইরে।

ইন-পেজ কন্টেইনারের আকারের উপর সাড়া দিন

আপনি vw অথবা vi এর পরিবর্তে cqi ইউনিট ব্যবহার করে কন্টেইনার কোয়েরিতে এই সমস্ত গণনা কার্যকর করতে পারেন, তবে এটি html এলিমেন্টে ব্যবহারকারীর font-size স্থানে রাখতেও সাহায্য করে, যাতে প্রতিটি টাইপ-সেটিং কন্টেইনার সেই ব্যবহারকারীর পছন্দকে 1rem হিসাবে উল্লেখ করতে পারে। ডেমোতে, আপনি দেখতে পাবেন যে গ্লোবাল টাইপের জন্য রুট html এলিমেন্টের পরিবর্তে পুরো টাইপ স্কেলটি body প্রয়োগ করা হয়েছে, এবং তারপর type-set অ্যাট্রিবিউট সহ প্রতিটি এলিমেন্টের জন্য কন্টেইনারের আকারের উপর ভিত্তি করে রিসেট করা হয়েছে।

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

রেসপন্সিভ টাইপোগ্রাফি এবং টাইপোগ্রাফিক স্কেল ডিজাইনারদের জন্য দুর্দান্ত হাতিয়ার হলেও, প্রয়োজন না হলে জিনিসগুলিকে আরও জটিল করার কোনও প্রয়োজন নেই। ব্যবহারকারীর ডিফল্ট এবং বিল্ট-ইন টাইপ স্কেলও একটি দুর্দান্ত বিকল্প! কিন্তু আপনি যদি রেসপন্সিভ (অথবা ফ্লুইড) টাইপোগ্রাফি বেছে নেন, তাহলে বিভিন্ন ব্যবহারকারীর ডিফল্ট এবং জুম সেটিংসের সাথে সম্পর্কিত ফলাফলগুলি কীভাবে আচরণ করে তা পরীক্ষা করে দেখুন। উপভোগ করুন!