Responsive Typography

একটি desktop screen-এর জন্য আরামদায়কভাবে size করা একটি heading প্রায়ই একটি phone-এ oversized দেখায়, আর mobile-এর জন্য tune করা একটি size একটি desktop-এ ছোট দেখায়। Responsive typography মানে প্রতিটি breakpoint-এর জন্য আলাদা media query দরকার না হয়ে দুটোর মধ্যে মসৃণভাবে scale করা টেক্সট।

এটা কাজ করে, কিন্তু মসৃণভাবে scale না করে দৃশ্যমান step-এ লাফায়, আর প্রতিটি নতুন breakpoint-এর জন্য একটি নতুন rule দরকার।

vw (viewport width) screen size-এর সাথে ক্রমাগত scale করে, কিন্তু কোনো minimum বা maximum ছাড়াই — চরম size-এ টেক্সট পড়ার অযোগ্য ছোট বা বিশাল হয়ে যেতে পারে।

একটি viewport unit-কে (আগের CSS Function lesson থেকে) clamp()-এর সাথে মেশালে একটি নিরাপদ floor আর ceiling সহ মসৃণভাবে scale করে।

একটি clamp()-এর fixed প্রান্তের জন্য rem ব্যবহার একটি fixed px মানের মতো না, একজন user-এর browser font-size setting-কে সম্মান করে — যে কেউ তাদের default text size বাড়িয়েছে তাদের জন্য একটি আসল accessibility পার্থক্য।