تایپوگرافی واکنش‌گرا و روان با ویژگی‌های CSS پایه

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 برای سایت شما بهتر عمل می‌کند، font-size 1.25em یا 125% معمولاً نتیجه دلخواه شما را می‌دهد:

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 چه مقدار پیکسلی را نشان می‌دهد، یک font-size با max(1em, 20px) همیشه بزرگترین ترجیح طراحی شما ( 20px ) و ترجیح کاربر ( 1em ) را برمی‌گرداند. این به کاربر اجازه می‌دهد اندازه فونت بزرگتری را انتخاب کند، اما نه کوچکتر.

با تغییر به تابع clamp() ، می‌توانید به کاربر اجازه دهید وقتی اندازه دلخواهش از مقدار پیش‌فرض انتخابی شما خیلی دور شد، هر دو جهت را مقیاس‌بندی کند. برای مثال، font-size clamp(1em, 20px, 1.25em) به طور پیش‌فرض روی 20px تنظیم می‌شود، البته تا زمانی که از مقدار پیش‌فرض کاربر بزرگتر باشد، اما نه بیشتر از 125% مقدار پیش‌فرض.

این به طرح شما اجازه می‌دهد وقتی به ترجیح کاربر نزدیک است، اولویت داشته باشد، اما وقتی ترجیح کاربر خارج از محدوده مشخص شده باشد، همچنان اولویت دارد. هیچ محاسبه تبدیل ریاضی، هیچ فرضی در مورد اندازه ترجیح کاربر و هیچ ضربی بین مقادیر طراح و کاربر وجود ندارد.

با تنظیم این مقدار به عنوان font-size ریشه در عنصر html ، اکنون می‌توانید 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; }
}

گزینه دیگر، اضافه کردن واحدهای viewport یا container به مقدار پایه استاتیک است:

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

واحدهای vw (عرض نمای دید) یا vi (اندازه درون‌خطی نمای دید) نشان‌دهنده ۱٪ از کل نمای دید هستند - بخشی از مرورگر که سایت شما را رندر می‌کند. به طور مشابه، واحدهای cqw و cqi نشان‌دهنده ۱٪ از یک کانتینر با اندازه درون‌خطی در صفحه هستند. برای جزئیات بیشتر، به دموی کوئری‌ها و واحدهای کانتینر مراجعه کنید.

این رویکرد اغلب به عنوان تایپوگرافی سیال شناخته می‌شود، زیرا تغییر font-size در طیف وسیعی از عرض‌های نمایشگر ثابت است، نه اینکه در نقاط شکست رسانه یا کانتینر از یک مقدار به مقدار دیگر پرش کند. با این حال، از روان بودن انتقال غافل نشوید - این تمایز معمولاً فقط در آزمایش قابل مشاهده است، اگر اندازه پنجره را به آرامی تنظیم کنید. این اثر به ندرت (اگر نگوییم هرگز) توسط کاربران دیده می‌شود. در حالی که کاربران ممکن است مرتباً اندازه مرورگر - یا سطح بزرگنمایی - را تغییر دهند، باید این تنظیمات را به روشی آهسته و روان انجام دهند تا متوجه تفاوت بین یک نقطه شکست و یک واحد نمایشگر شوند. این فقط بر انتقال تأثیر می‌گذارد، نه نتیجه پس از تغییر اندازه.

مزیت اصلی اندازه فونت سیال این است که هرگونه نیاز به محاسبه یا تعیین نقاط شکست را به صورت دستی از بین می‌برد و در هر اندازه مشخص، نتیجه‌ای درون‌یابی شده ارائه می‌دهد. شما فقط نقطه شروع ( 16px ) و نرخ تغییر ( 0.25vw به ازای هر 100px افزایش در نمای دید، 0.25px افزایش در font-size ایجاد می‌کند) و احتمالاً حداقل و حداکثر مقادیر را تنظیم می‌کنید. وقتی نمای دید 1000px عرض داشته باشد، font-size 16px + 2.5px یا 18.5px خواهد بود - اما این محاسبه کاملاً توسط مرورگر انجام می‌شود. این رویکردی است که در نسخه آزمایشی استفاده شده است، با استفاده از واحدهای cqi برای نشان دادن واکنش‌گرایی مبتنی بر کانتینر. هنگامی که در عنصر ریشه ( html ) استفاده می‌شود، جایی که هیچ کانتینر تعریف شده‌ای وجود ندارد، واحدهای cqi همچنان به اندازه نمای دید اشاره می‌کنند.

اگر ترجیح می‌دهید بر اساس font-size مشخص شده در اندازه نمایشگر مشخص فکر کنید، از رویکرد پرس و جوی رسانه‌ای مستقیم‌تر استفاده کنید که کمی واضح‌تر است. وقتی سعی می‌کنید واحدهای نمایشگر را بر اساس نقاط شکست مورد نظر محاسبه کنید، اوضاع پیچیده‌تر می‌شود. بسیاری از افراد این کار را با کپی کردن و چسباندن مقادیر از ابزارهای شخص ثالث انجام می‌دهند، اما درک یا تغییر مستقیم کد حاصل بسیار دشوارتر است. به طور کلی با CSS، بهترین گزینه، گزینه‌ای است که به وضوح منظور شما را بیان کند.

هشدار: تغییرات Viewport همیشه به یک معنا نیستند!

اگرچه مدیا کوئری‌ها و واحدهای vi به روش‌های مختلفی اعمال می‌شوند، اما هر دو رویکرد بر اساس اندازه‌گیری یکسانی از viewport هستند. اگر عرض viewport 600px باشد، آنگاه 100vw برابر با 600px خواهد بود و استایل‌های درون مدیا کوئری ( width > 500px ) اعمال می‌شوند.

اما منظور از عرض 600px برای نمایشگر چیست؟ در واقعیت، یک پیکسل یک اندازه ثابت با یک معنی واحد در همه شرایط نیست. اگرچه طبیعی به نظر می‌رسد که یک نمایشگر با پیکسل‌های کمتر در صفحه نمایش کوچکتر (مانند تلفن) یا در یک پنجره مرورگر باریک باشد، اما این یک فرض قابل اعتماد نیست. در واقع، بزرگنمایی و کوچکتر کردن پنجره مرورگر هر دو تأثیر یکسانی بر عرض نمایشگر اندازه‌گیری شده دارند. یک عمل (بزرگنمایی) اندازه یک پیکسل را تغییر می‌دهد، در حالی که عمل دیگر (تغییر اندازه) اندازه خود مرورگر را تغییر می‌دهد - اما هر دو تعداد پیکسل‌ها را در عرض مرورگر تغییر می‌دهند. چیزی که از اندازه‌گیری نمایشگر به دست می‌آوریم، رابطه‌ای بین اندازه پیکسل فعلی و پنجره مرورگر فعلی است.

برای کاربر، بزرگنمایی و تغییر اندازه هر کدام هدف بسیار متفاوتی را دنبال می‌کنند. کاربری که سطح بزرگنمایی را تغییر می‌دهد، سعی دارد محتوای صفحه را بزرگتر یا کوچکتر کند، اما کاربری که اندازه مرورگر را تغییر می‌دهد، فقط فضای صفحه را در صفحه‌های نمایش مختلف مدیریت می‌کند. اگرچه هدف کاربر متفاوت است، نتیجه در اندازه‌گیری‌های CSS یکسان است. با کوچکتر شدن پنجره یا بزرگتر شدن پیکسل، پیکسل‌های کمتری در عرض مرورگر وجود دارد.

این عدم ارتباط، تایپوگرافی واکنش‌گرا را غیرقابل اعتماد می‌کند. اگر متن شما طوری تنظیم شده باشد که فقط بر اساس یک نمایشگر یا کانتینر تغییر اندازه دهد، بزرگنمایی کاربر هیچ تاثیری نخواهد داشت!

تغییر مقدار واحد viewport-relative به 1vw یا 100vw ، رابطه دقیق بین اندازه فونت و viewport را تغییر می‌دهد. یک فونت 1vw به ازای هر 100px اندازه viewport، 1px افزایش می‌یابد، در حالی که یک فونت 100vw دقیقاً به اندازه viewport خواهد بود. می‌توانید این مقدار را تغییر دهید تا فونت نسبت به مرورگر، کندتر یا سریع‌تر رشد کند. اما هر مقدار viewport-relative با بزرگنمایی یا کوچکنمایی کاربر ثابت می‌ماند - کاملاً بدون واکنش به کنترل‌های کاربر.

به طور مشابه، نه 1vw و نه 100vw font-size پیش‌فرض کاربر را در نظر نمی‌گیرند.

استفاده از واحدهای viewport یا container-relative به تنهایی برای font-size همیشه برای کاربر نامطلوب است. وقتی یک font-size کاملاً به container خود واکنش نشان می‌دهد، نمی‌تواند به پیش‌فرض‌ها یا تنظیمات کاربر نیز واکنش نشان دهد. حتی با بهترین نیت‌ها و اقدامات حفاظتی، باید از گرفتن کنترل نهایی font-size از کاربران اجتناب کرد. این کار نه تنها یک تجربه کاربری بد است، بلکه می‌تواند راهنمای دسترسی‌پذیری را که اغلب توسط قانون الزامی است، نیز نقض کند. به طور خاص، بخش ۱.۴.۴ از دستورالعمل‌های دسترسی‌پذیری محتوای وب ایجاب می‌کند که "اندازه متن را می‌توان بدون فناوری کمکی تا ۲۰۰ درصد تغییر داد."

چگونه مطمئن شویم که مقادیر font-size نسبت به بزرگنمایی واکنش‌گرا هستند؟

برای اطمینان از اینکه اندازه فونت وابسته به نمای دید (viewport-relative font-size به بزرگنمایی واکنش نشان می‌دهد، مقدار وابسته به نمای دید باید به عنوان تنظیمی برای مقدار دیگری اعمال شود. این کار در CSS با استفاده از تابع calc() یا هر تابع ریاضی دیگری که محاسبات را می‌پذیرد - مانند min() ، max() و clamp() - امکان‌پذیر است. font-size calc(16px + 1vw) بر اساس اندازه نمای دید و همچنین اندازه فعلی (نسبت به بزرگنمایی) یک پیکسل محاسبه می‌شود. در حالی که واحد vw تحت تأثیر بزرگنمایی قرار نمی‌گیرد، مقدار پایه تحت تأثیر قرار خواهد گرفت.

نتیجه، font-size است که هم به اندازه نمایشگر و هم به تنظیمات بزرگنمایی کاربر واکنش نشان می‌دهد. اگر کاربر تا 200% بزرگنمایی کند، مقدار پایه دو برابر بزرگتر ( 32px ) نمایش داده می‌شود، در حالی که مقدار واکنش‌گرا بدون تغییر باقی می‌ماند. یک نمایشگر 1000px در ابتدا font-size 16px + 10px = 26px به شما می‌دهد، اما در بزرگنمایی 200% ، اندازه فونت فقط به 42px ، کمی بیش از 160% ، افزایش می‌یابد. این ممکن است مشکل بزرگی به نظر نرسد، اما هرچه font-size شما بیشتر بر اساس نمایشگر باشد، بزرگنمایی کمتر مؤثر می‌شود.

در صفحه نمایش‌های کوچک، font-size در درجه اول از مقدار پیکسل پایه گرفته می‌شود و به خوبی به زوم پاسخ می‌دهد. اما در صفحه نمایش‌های بزرگتر، اندازه نمای دید به بخش بزرگتری از اندازه فونت رندر شده تبدیل می‌شود و زوم را کمتر موثر می‌کند. این امر به ویژه در نقطه‌ای خطرناک می‌شود که زوم ۵۰۰٪ (حداکثر در اکثر مرورگرها) دیگر نمی‌تواند افزایش ۲۰۰٪ در اندازه فونت مورد نیاز WCAG 1.4.4 را فراهم کند - اما حتی قبل از آن نقطه، بی‌اثر شدن زوم می‌تواند ناامیدکننده باشد.

محور افقی نشان‌دهنده‌ی اندازه‌ی نمایشگر (viewport) از 0 تا 2600px پیکسل است. محور عمودی برای font-size نیز بر حسب پیکسل است که نتیجه‌ی calc(17px + 2.5vw) را نشان می‌دهد. خط بزرگنمایی 500% از همان محور افقی viewport-width استفاده می‌کند، اما محور عمودی را به صورت درصد در نظر می‌گیرد.

در لبه سمت چپ نمودار (عرض نمایشگر 0 )، بزرگنمایی 500% کاملاً مؤثر است. با این حال، این اثربخشی با افزایش اندازه مرورگر به سرعت کاهش می‌یابد و واحدهای نمایشگر (غیرقابل بزرگنمایی) به عامل بزرگتری در font-size تبدیل می‌شوند. وقتی مرورگر 2040px عرض دارد، حداکثر بزرگنمایی 500% فقط می‌تواند 200% افزایش در اندازه فونت ایجاد کند. فراتر از آن نقطه، بزرگنمایی فونت 200% مؤثر دیگر امکان‌پذیر نیست.

با انتقال این محاسبه به یک تابع clamp() ، با مقادیر حداقل و حداکثر، می‌توانید مرزهایی را اعمال کنید که متن قابل بزرگنمایی را تضمین می‌کنند. طبق گفته ماکسول بارویان :

اگر حداکثر اندازه فونت کمتر یا مساوی ۲.۵ برابر حداقل اندازه فونت باشد، متن همیشه از استاندارد WCAG SC 1.4.4 عبور می‌کند، حداقل در تمام مرورگرهای مدرن.

از آنجایی که کوئری‌های @media و @container بر اساس همان واحدهای اندازه‌گیری vw و cqw هستند، منطق مشابهی هنگام استفاده از نقطه توقف برای تغییر اندازه فونت اعمال می‌شود. وقتی افزایش اندازه خیلی زیاد باشد، بزرگنمایی بی‌اثر می‌شود. می‌توانید نحوه تعامل این مقادیر را در تجسم زیر آزمایش کنید:

چگونه مطمئن شویم که مقادیر font-size با پیش‌فرض‌های کاربر سازگار هستند؟

اما calc(16px + 1vw) هنوز به تنظیمات فونت پیش‌فرض کاربر پاسخ نمی‌دهد. برای دستیابی به این هدف، می‌توانید یک مقدار پایه - یا حداقل و حداکثر - را با استفاده از واحدهای em یا rem به جای px تنظیم کنید. با کنار هم قرار دادن همه اینها، نتیجه آشنایی حاصل می‌شود که با نسخه آزمایشی لینک شده مطابقت دارد:

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

توجه داشته باشید که:

• حداقل و حداکثر هر دو از واحدهای em استفاده می‌کنند که بر اساس ترجیح کاربر (و پاسخگو به بزرگنمایی) هستند.
• مقدار vw اضافی حداقل نگه داشته می‌شود، به طوری که بزرگنمایی خیلی تحت تأثیر قرار نگیرد.
• حداکثر اندازه ( 1.125em ) بسیار کمتر از 2.5 برابر حداقل ( 1em ) است، که تضمین می‌کند مقدار مؤثر font-size 200% همیشه امکان‌پذیر است.

مقیاس‌های تایپوگرافی با pow()

بیشتر طرح‌ها از بیش از یک اندازه فونت استفاده می‌کنند! مقیاس تایپوگرافی رابطه بین چندین اندازه فونت را توصیف می‌کند. این می‌تواند به صورت یک اندازه پایه و مجموعه‌ای از ضرایب برای محاسبه اندازه‌های دیگر بیان شود. CSS یک مقیاس تایپوگرافی داخلی نسبت به کلمه کلیدی medium ارائه می‌دهد که به ترجیح اندازه فونت کاربر یا پیش‌فرض 16px اشاره دارد. مقیاس کامل کلمه کلیدی به صورت زیر است:

• xx-small : 3/5 (0.6)
• x-small : ¾ (0.75)
• small : ۸/۹ (۰.۸۹)
• medium : ۱ (اندازه پایه‌ای که بقیه در آن ضرب می‌شوند)
• large : 6/5 (1.2)
• x-large : ½ (1.5)
• xx-large : 2/1 (2)
• xxx-large : 3/1 (3)

این مقیاس نسبت به پیش‌فرض کاربر است نه نسبت به 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() می‌تواند مقیاس شما را با 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 تقریباً از ۵ کسر در هر گام استفاده می‌کند. در حالی که اندازه‌های بزرگ در اینجا از کل گام‌ها در مقیاس استفاده می‌کنند، اندازه‌های کوچک از کسرها برای مقیاس‌بندی با سرعت کمتر استفاده می‌کنند.

توابع و mixinهای CSS امکان فشرده‌سازی بیشتر این منطق را فراهم می‌کنند، در حالی که ابزارهای داخلی دیگری مانند progress() ایجاد مقیاس‌هایی را که به طور روان از یک مقدار به مقدار دیگر تنظیم می‌شوند، آسان‌تر می‌کنند. اما این ویژگی‌ها خارج از محدوده این نسخه آزمایشی هستند.

به اندازه کانتینرهای درون صفحه پاسخ دهید

شما می‌توانید با استفاده از واحد cqi به جای vw یا vi ، تمام این محاسبات را در کوئری‌های کانتینر انجام دهید، اما این کار همچنین به شما کمک می‌کند تا font-size کاربر را روی عنصر html ثابت نگه دارید، به طوری که هر کانتینر تنظیم نوع بتواند به آن ترجیح کاربر به عنوان 1rem اشاره کند. در نسخه آزمایشی، متوجه خواهید شد که کل مقیاس نوع به جای عنصر ریشه html برای نوع سراسری، روی body اعمال می‌شود و سپس بر اساس اندازه کانتینر برای هر عنصر با ویژگی type-set تنظیم مجدد می‌شود.

این همیشه یک بده‌بستان با اندازه فونت‌های نسبی به ظرف است. شما برای هر عنصر در متن، اندازه فونت روان‌تری به دست می‌آورید، اما به قیمت از دست رفتن ثبات در کل صفحه. اینکه کدام یک برای شما مهم‌تر است، به مشخصات مورد استفاده شما بستگی دارد. و به یاد داشته باشید که تایپوگرافی روان خود یک بده‌بستان است و باعث می‌شود کنترل‌های کاربری مانند بزرگنمایی کمتر مؤثر باشند!

اگرچه تایپوگرافی واکنش‌گرا و مقیاس‌های تایپوگرافی ابزارهای بسیار خوبی برای طراحان هستند، اما اگر نیازی به این کار ندارید، نیازی به پیچیده‌تر کردن اوضاع نیست. مقیاس پیش‌فرض کاربر و مقیاس تایپ داخلی نیز گزینه‌های بسیار خوبی هستند! اما اگر تایپوگرافی واکنش‌گرا (یا روان) را انتخاب می‌کنید، حتماً نحوه رفتار نتایج را در رابطه با پیش‌فرض‌های مختلف کاربر و تنظیمات بزرگنمایی آزمایش کنید. لذت ببرید!