টাইপোগ্রাফি স্কেল জেনারেটর

টাইপোগ্রাফি স্কেল জেনারেটর কী?

টাইপোগ্রাফি স্কেল জেনারেটর একটি বেস আকার ও একটি মডুলার অনুপাতকে একটি পূর্ণ, গাণিতিকভাবে সামঞ্জস্যপূর্ণ টাইপ স্কেলে রূপান্তরিত করে, যাতে প্রয়োজন অনুযায়ী যত খুশি বড় শিরোনাম ধাপ ও ছোট ক্যাপশন ধাপ থাকে। কেবল ফন্ট আকার নয়, এটি প্রতিটি ধাপের জন্য মানানসই লাইন-হাইট ও লেটার-স্পেসিং বের করে, সঙ্গে একটি ঐচ্ছিক ফ্লুইড clamp() এক্সপ্রেশন তৈরি করে যা আলাদা মোবাইল অনুপাত ব্যবহার করে মোবাইল ও ডেস্কটপ ভিউপোর্টের মধ্যে ইন্টারপোলেট করে। ডিজাইনার ও ফ্রন্ট-এন্ড ডেভেলপাররা এটি ব্যবহার করেন একটি ডিজাইন সিস্টেমের টাইপ টোকেন বানাতে, আকার সামঞ্জস্যপূর্ণ রাখতে, এবং তৈরি CSS, Sass, Tailwind বা JSON পেস্ট করতে। যেকোনো কাস্টম অনুপাত টাইপ করুন বা ক্লাসিক বাছুন, বেস আকার ও একক (px বা rem) ঠিক করুন, নিজের font-family-তে প্রিভিউ দেখুন, তারপর প্রয়োজনীয় ফরম্যাট কপি করুন।

টাইপোগ্রাফি স্কেল জেনারেটর কীভাবে ব্যবহার করবেন

1. অনুপাত ফিল্ডে যেকোনো কাস্টম অনুপাত টাইপ করুন, অথবা সেটিংসে প্রিসেট ড্রপডাউন থেকে পারফেক্ট ফোর্থ (1.333)-এর মতো ক্লাসিক বাছুন।
2. বেস আকার ঠিক করুন; এটিই বডি টেক্সটের আকার ও স্কেলের ভিত্তি হয়।
3. সেটিংসে বেছে নিন কতগুলো বড় ও ছোট ধাপ তৈরি হবে; ছোট ধাপগুলো ক্যাপশন ও ছোট লেখার জন্য বেসের নিচে থাকে।
4. বেস ও টাইট লাইন-হাইট এবং বড় আকারে লেটার-স্পেসিং সমন্বয় করুন, এবং নিজের টাইপফেসে স্কেল প্রিভিউ দেখতে একটি font-family লিখুন।
5. রেসপনসিভ টাইপের জন্য সর্বনিম্ন ও সর্বোচ্চ ভিউপোর্ট প্রস্থ এবং একটি মোবাইল অনুপাত সেট করে ফ্লুইড clamp() স্কেল বানান।
6. আউটপুট ফরম্যাট CSS ভেরিয়েবল, ফ্লুইড clamp(), Sass, Tailwind কনফিগ ও JSON-এর মধ্যে বদলান, তারপর কোড বা কোনো একক ধাপের আকার কপি করুন।

উদাহরণ

অনুপাত 1.333, বেস 16px, 5 উপরে / 1 নিচে

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

বেস 16px, অনুপাত 1.333, মোবাইল অনুপাত 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

যেকোনো স্কেল, Tailwind এক্সপোর্ট

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

সচরাচর জিজ্ঞাসিত প্রশ্ন

আমি কি শুধু প্রিসেট নয়, কাস্টম অনুপাত ব্যবহার করতে পারি?

হ্যাঁ। অনুপাত ফিল্ডে যেকোনো সংখ্যা টাইপ করুন, যেমন 1.2, 1.5, 1.618 বা 1.45-এর মতো অ-মানক মান। সেটিংসে প্রিসেট ড্রপডাউন কেবল একটি শর্টকাট যা একই ফিল্ড পূরণ করে, এবং প্রিসেটের সঙ্গে না মেলা মান বাছলে শুধু কাস্টম দেখায়।

ছোট (ঋণাত্মক) ধাপগুলো কীভাবে কাজ করে?

স্কেল বেস আকারে (ধাপ 0) নোঙর করা থাকে। বড় ধাপগুলো বেসকে অনুপাত দিয়ে গুণ করে, আর ছোটগুলো ভাগ করে, ফলে বেসের নিচে sm ও xs-এর মতো ক্যাপশন ও ছোট লেখার আকার তৈরি হয়। কতগুলো বড় ও ছোট ধাপ চান তা সেটিংসে ঠিক করুন।

লাইন-হাইট ও লেটার-স্পেসিং কীভাবে হিসাব হয়?

লাইন-হাইট বডি আকারে আপনার বেস মান থেকে শুরু হয়ে লেখা বড় হলে টাইট মানের দিকে যায়, আর লেটার-স্পেসিং বেসে শূন্য থেকে আপনার বড়-আকার মানের দিকে যায়, তাই বড় ডিসপ্লে লেখা একটু টাইট এবং ছোট লেখা একটু ঢিলা হয়। দুটো বক্ররেখাই সেটিংসে সমন্বয়যোগ্য।

ফ্লুইড clamp() স্কেল কী?

এটি প্রতিটি ধাপের জন্য একটি font-size: clamp() বানায় যা সর্বনিম্ন ও সর্বোচ্চ ভিউপোর্ট প্রস্থের মধ্যে মসৃণভাবে বাড়ে, সর্বোচ্চ প্রস্থে আপনার মূল অনুপাত ও সর্বনিম্নে আলাদা মোবাইল অনুপাত ব্যবহার করে। এক্সপোর্ট করতে আউটপুট ফরম্যাট CSS clamp() বাছুন।

আমার কোনো ডেটা কি কোনো সার্ভারে পাঠানো হয়?

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