اندازهٔ عنوان می‌تواند میان دو حد حرکت کند
عنوانی که روی تلفن دو سطر خوانا دارد، روی نمایشگر بزرگ ممکن است در فضای فراوان کوچک به نظر برسد. تغییر یک‌بارهٔ اندازه در چند breakpoint همیشه لازم نیست؛ گاهی اندازهٔ پیوسته میان دو حد، رفتار مناسب‌تری دارد. تابع clamp در CSS یک مقدار ترجیحی را میان حد پایین و بالا نگه می‌دارد. این قابلیت برای اندازهٔ عنوان و فاصله مفید است، ولی همهٔ تصمیم‌های responsive را حذف نمی‌کند. تغییر ساختار ستون‌ها، ترتیب محتوا یا نمایش ناوبری هنوز ممکن است Media Query بخواهد.
Fluid Typography یعنی اندازهٔ متن با یک ورودی، مانند عرض viewport، تغییر کند. این تعریف به خودی خود خوانایی یا دسترس‌پذیری را تضمین نمی‌کند. عنوان بزرگ، متن طولانی و فارسی با فونت‌های مختلف، نیازهای متفاوت دارند. ابتدا نقش متن را مشخص کنید و سپس رابطهٔ رشد را بسازید. مرجع clamp رفتار تابع و ترکیب مقدارها را توضیح می‌دهد. انتخاب حدها تصمیم طراحی است و از نام تابع نتیجه نمی‌شود.
سه ورودی با سه مسئولیت
ورودی نخست حد پایین، ورودی دوم مقدار ترجیحی و ورودی سوم حد بالاست. مقدار ترجیحی می‌تواند یک عبارت محاسباتی سازگار با property باشد. در اندازهٔ فونت، جمع rem و vw یک length می‌سازد. اگر مقدار ترجیحی پایین‌تر از حد پایین باشد، حد پایین انتخاب می‌شود؛ اگر بالاتر از حد بالا باشد، حد بالا. برای رابطهٔ قابل فهم، حدها را به ترتیب معنادار ثبت کنید. قرار دادن حد پایین بزرگ‌تر از حد بالا، چیزی شبیه مرتب‌سازی خودکار سه مقدار ایجاد نمی‌کند.
Unitها باید برای property قابل استفاده باشند. ترکیب عدد بی‌واحد و length در جایی که length لازم است، همیشه عبارت معتبر نمی‌سازد. همچنین هر مقدار درصدی به زمینهٔ محاسبهٔ خودش وابسته است. بهتر است نخست با یک نمونهٔ ساده و قابل محاسبه شروع کنید. استفاده از فرمولی که از ابزار آنلاین کپی شده، بدون شناخت حدها و ورودی، هنگام تغییر tokenهای فونت مشکل ایجاد می‌کند. رابطه باید برای عضو بعدی تیم هم قابل خواندن باشد.
Rem و viewport نقش متفاوت دارند
Rem به اندازهٔ فونت عنصر ریشه وابسته است و vw به عرض viewport. یک vw برابر یک درصد عرض viewport است. جمع آن‌ها یک بخش وابسته به تنظیم متن و یک بخش وابسته به عرض می‌سازد. استفادهٔ صرف از vw می‌تواند ارتباط رشد متن با تنظیم کاربر را ضعیف کند. با این حال، اضافه کردن rem هم به تنهایی تضمین دوبرابر شدن متن در همهٔ حالت‌ها نیست. حد بالا و شیوهٔ zoom مرورگر همچنان روی نتیجه اثر دارند.
مرجع واحدهای length این وابستگی‌ها را جدا توضیح می‌دهد. اگر در محاسبه، root font را ۱۶ پیکسل فرض می‌کنید، این فرض را برای توضیح عدد ثبت کنید؛ مقدار واقعی کاربر می‌تواند متفاوت باشد. تنظیم ریشه با یک اندازهٔ ثابت برای آسان شدن تبدیل عددها ممکن است با هدف احترام به تنظیم متن سازگار نباشد. نمونهٔ این نوشته اندازهٔ ریشه را بازنویسی نمی‌کند.
یک رابطهٔ عددی قابل دنبال کردن
در نمونه، عنوان از clamp با حد 1.5rem، مقدار ترجیحی 1rem + 2vw و حد 2.5rem استفاده می‌کند. با فرض root برابر ۱۶ پیکسل، حدها ۲۴ و ۴۰ پیکسل می‌شوند. در viewport با عرض ۴۰۰ پیکسل، مقدار ترجیحی ۲۴ است؛ در عرض ۸۰۰، ۳۲ و در عرض ۱۲۰۰، ۴۰. کوچک‌تر یا بزرگ‌تر شدن viewport از این محدوده، عنوان را از حدها عبور نمی‌دهد. این اعداد محاسبهٔ همان فرمول‌اند و نتیجهٔ اندازه‌گیری محصول واقعی نیستند.
اگر حدها یا شیب را تغییر دهید، عرض رسیدن به حد هم تغییر می‌کند. برای پیدا کردن رابطهٔ جدید، دو اندازهٔ هدف و دو عرض را مشخص کنید و شیب میان آن‌ها را حساب کنید. سپس بخش ثابت و بخش وابسته به عرض را با unit مناسب بنویسید. هیچ الزام عمومی وجود ندارد که رشد دقیقاً از عرض ۴۰۰ تا ۱۲۰۰ باشد. نقش متن و محتوا باید این محدوده را تعیین کند. فرمولی که برای hero مناسب است ممکن است برای label فرم مناسب نباشد.
نمونهٔ کامل با عنوان و دو کارت توضیح
کد زیر را با نام fluid-type.html ذخیره کنید و در مرورگر باز کنید. فایل مستقل است، فونت بیرونی، تصویر، package و JavaScript ندارد. CSS لازم همراه HTML ارائه شده است. عنوان رشد سیال دارد؛ متن اصلی با 1rem باقی می‌ماند تا تفاوت نقش‌ها روشن باشد. فاصلهٔ داخل بلوک و میان کارت‌ها نیز با حد مشخص تغییر می‌کند. این نمونه روش اجرا را نشان می‌دهد و ادعای انجام تست مرورگر یا تأیید دسترس‌پذیری محصول نهایی ندارد.
<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>متن سیال</title><style>
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui,sans-serif; font-size: 1rem; line-height: 1.9; color: #1d333c; background: #eef3f4; }
main { max-inline-size: 68rem; margin-inline: auto; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); padding-inline: clamp(1rem, .5rem + 2vw, 2rem); }
.story { background: white; padding: clamp(1.2rem, .8rem + 2vw, 2.4rem); border-radius: 1rem; }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.45; margin-block: 0 1rem; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; line-height: 1.5; }
p { max-inline-size: 65ch; margin-block: 1rem; }
a { color: #075c55; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #bd6800; outline-offset: 4px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(.75rem, .5rem + 1vw, 1.5rem); margin-block-start: 1.5rem; }
.fact { padding: 1rem; border: 1px solid #a5bcc5; border-radius: .5rem; }
.fact h2 { margin-block-start: 0; }
</style></head><body><main><article class="story"><h1>عنوانی که همراه عرض صفحه تغییر می‌کند</h1><p>متن اصلی اندازهٔ ثابت نسبی دارد. عنوان و فاصله‌ها میان دو حد رشد می‌کنند تا فضای بیشتر به خواندن کمک کند.</p><p>این نمونه به تصویر و فونت بیرونی وابسته نیست. طول عنوان، شکستن سطر و بزرگ‌نمایی متن همچنان باید برای محتوای واقعی طراحی شوند.</p><a href="#notes">خواندن نکته‌های نمونه</a></article><section class="facts" id="notes" aria-label="نکته‌ها"><article class="fact"><h2>حد پایین</h2><p>عنوان کوچک‌تر از یک‌ونیم rem نمی‌شود.</p></article><article class="fact"><h2>حد بالا</h2><p>عنوان بزرگ‌تر از دوونیم rem نمی‌شود.</p></article></section></main></body></html>
دو کارت در HTML وجود دارد و grid تعداد ستون قابل جا گرفتن را از فضای موجود تعیین می‌کند. minmax با حدی که از صددرصد بزرگ‌تر نشود، احتمال بیرون زدن کارت در عرض کم را کاهش می‌دهد. لینک به بخش notes واقعی همان فایل اشاره می‌کند. متن بلند اجازهٔ شکستن دارد و هیچ ارتفاع ثابت برای بلوک متن تعیین نشده است. بنابراین بزرگ شدن متن به جای بریدن محتوا، می‌تواند ارتفاع بلوک را افزایش دهد. این انتخاب برای حفظ محتوا مهم‌تر از ثابت ماندن اندازهٔ کارت است.
خوانایی فقط با font-size تعیین نمی‌شود
فاصلهٔ سطر، طول سطر، وزن فونت و کنتراست هم روی خواندن اثر دارند. عنوان با اندازهٔ بزرگ‌تر ممکن است line-height متفاوتی بخواهد. متن طولانی با سطر خیلی عریض، حتی با اندازهٔ مناسب خسته‌کننده می‌شود. در نمونه max-inline-size متن با ch محدود شده است. این unit بر اساس معیار فونت تعریف می‌شود و شمارندهٔ دقیق حروف فارسی نیست؛ از آن فقط برای محدود کردن نسبی عرض استفاده می‌کنیم. محتوای واقعی باید با فونت مقصد خوانده شود.
Line-height بی‌واحد نسبت مناسبی با font-size همان عنصر حفظ می‌کند. مقدار مناسب به نوع متن و فونت وابسته است؛ عدد نمونه قانون جهانی نیست. مرجع line-height تفاوت عدد و length را شرح می‌دهد. اگر ارتفاع ثابت container را از قبل نوشته‌اید، سیال کردن فونت می‌تواند محتوای آن را از محدوده بیرون ببرد. بهتر است محدودیت‌های layout همراه تغییر تایپ بررسی شوند، نه اینکه فقط یک property عوض شود.
بزرگ‌نمایی باید محتوا را حفظ کند
معیار Resize Text در WCAG دربارهٔ امکان بزرگ کردن متن تا ۲۰۰ درصد بدون از دست رفتن محتوا یا کارکرد است، با استثناهای مشخص آن معیار. ترکیب rem و vw باید در همین رفتار واقعی سنجیده شود؛ نمی‌توان صرفاً از روی نام unit تأیید داد. توضیح رسمی Resize Text هدف و روش فهم معیار را بیان می‌کند. اگر در zoom عرض CSS viewport کم شود، بخش vw هم تغییر می‌کند و می‌تواند بخشی از رشد متن را جبران کند.
Reflow هم به حفظ محتوا در فضای محدود مربوط است و با فقط اندازهٔ فونت یکی نیست. ناوبری، جدول و controlها باید رفتار مناسب داشته باشند. توضیح Reflow این نیاز را روشن می‌کند. مقالهٔ دسترس‌پذیری از روز اول کمک می‌کند تصمیم تایپوگرافی را کنار focus و ساختار HTML ببینید. ظاهر روان در یک عرض، تأیید رفتار همهٔ شرایط نیست.
فاصلهٔ سیال با فضای بی‌حد فرق دارد
Padding بزرگ در نمایشگر عریض می‌تواند بلوک را آرام‌تر کند، اما سقف لازم دارد تا محتوا بی‌دلیل دور نشود. در عرض کوچک هم حد پایین باید فضای لازم برای خواندن را نگه دارد. Gap میان کارت‌ها مسئلهٔ متفاوتی از اندازهٔ عنوان است و لازم نیست فرمول یکسان داشته باشد. Tokenهای جدا کمک می‌کنند تغییر یک نقش، همهٔ صفحه را عوض نکند. نوشتهٔ Custom Properties شیوهٔ ثبت این قراردادهای مشترک را توضیح می‌دهد.
سیال بودن را با جهت و ساختار همراه کنید
در نمونه، max-inline-size و padding-inline به جریان متن وابسته‌اند و صفحه RTL است. مقالهٔ Logical Properties این نام‌ها را شرح می‌دهد. برای نسخهٔ زبان دیگر، طول عنوان و وزن فونت می‌تواند رفتار متفاوت بسازد. همان فرمول شاید همچنان مناسب باشد، ولی نباید فقط با تغییر dir انتظار تایپوگرافی کامل داشت. زبان، محتوا و جهت هر کدام ورودی طراحی‌اند.
اگر در نقطه‌ای لازم است ساختار صفحه عوض شود، Media Query را کنار clamp استفاده کنید. اولی دربارهٔ تغییر حالت layout تصمیم می‌گیرد و دومی مقدار پیوسته را محدود می‌کند. انتخاب یکی به معنی کنار گذاشتن دیگری نیست. قرارداد قابل نگهداری مشخص می‌کند کدام متن سیال است، چه حدهایی دارد و در بزرگ‌نمایی چه رفتاری انتظار می‌رود. هر جا اندازهٔ ثابت نسبی بهتر می‌خواند، استفاده نکردن از فرمول سیال هم تصمیم مناسبی است.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!