تایپوگرافیای که با صفحهنمایش هماهنگ میشود: Typography Responsive
در طول این فصل، تکتک Propertyهای مرتبط با متن رو دیدیم: فونت، اندازه، وزن، فاصلهگذاری، سایه و بارگذاری فونت سفارشی. حالا وقتشه همه اینها رو در یک بستر جدید ببینیم: چطور تایپوگرافی رو طوری طراحی کنیم که در صفحهنمایشهای مختلف، از موبایل کوچک تا مانیتور بزرگ، همیشه خوانا و متناسب باقی بمونه؛ این آخرین درس فصل هشتمه و یه جمعبندی عملی از مباحث قبلیه.
چرا تایپوگرافی ثابت مشکلساز است؟
h1 {
font-size: 48px;
}اگه اندازه یک تیتر رو با یک مقدار کاملاً ثابت (مثل 48px) تعریف کنیم، این مقدار در صفحهنمایش بزرگ دسکتاپ خوب بهنظر میرسه، ولی در یک موبایل کوچک، ممکنه بیشازحد بزرگ باشه و باعث بشه تیتر به چند خط بشکنه یا از عرض صفحه بیرون بزنه. راهحل سنتی این مشکل، استفاده از Media Queryها (که بهطور کامل در فصل Responsive Design میبینیم) برای تعریف اندازههای متفاوت در هر Breakpoint بود؛ ولی این روش، نیاز به نوشتن چندین Rule جداگانه داره.
راهحل مدرن: Fluid Typography با clamp()
h1 {
font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}تابع clamp() که بهطور کامل در فصل CSS Functions بررسیش میکنیم، امکان تعریف یک اندازه سیال (Fluid) رو فراهم میکنه؛ یعنی اندازهای که بهطور پیوسته و خودکار، متناسب با عرض صفحهنمایش، بین یک حداقل و حداکثر مشخص، تغییر میکنه.
clamp(حداقل, مقدار-ترجیحی, حداکثر)در این مثال: اندازه فونت هیچوقت از 1.75rem کوچکتر نمیشه (حتی در کوچکترین صفحهنمایشها)، هیچوقت از 3.5rem بزرگتر نمیشه (حتی در بزرگترین مانیتورها)، و در بین این دو حد، بر اساس مقدار وسط (که ترکیبی از vw و rem است)، بهطور نرم و پیوسته تغییر میکنه.
چرا ترکیب vw و rem در مقدار میانی؟
همونطور که در فصل ۶ دیدیم، vw بهتنهایی نسبت به عرض Viewport محاسبه میشه و کاملاً به تنظیمات کاربر بیتوجهه؛ اما با ترکیب اون با یک مقدار rem (مثل 4vw + 1rem)، هم انعطافپذیری نسبت به عرض صفحه حفظ میشه، و هم بخشی از اندازه همچنان به تنظیمات دسترسیپذیری کاربر (بزرگنمایی فونت مرورگر) واکنش نشون میده؛ این ترکیب، تعادل خوبی بین Responsive بودن و Accessible بودن ایجاد میکنه.
یک مقیاس تایپوگرافی سیال کامل
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
h2 {
font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
}
p {
font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
}در این مثال، هر سطح از تایپوگرافی (تیتر اصلی، تیتر فرعی، متن پاراگراف)، بازه اندازه مخصوص به خودش رو داره؛ همه با هم بهطور هماهنگ، بر اساس عرض صفحهنمایش، تغییر میکنن. این الگو رو در فصل Responsive Design با جزئیات بیشتری بسط میدیم.
line-height در طراحی Responsive
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
line-height: 1.1;
}
p {
font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
line-height: 1.6;
}همونطور که در درس ۸-۳ دیدیم، استفاده از مقدار بدون واحد برای line-height اهمیت زیادی داره؛ این اهمیت در طراحی Responsive حتی بیشتر هم میشه، چون وقتی font-size خودش با clamp() بهطور پیوسته تغییر میکنه، اگه line-height یک مقدار ثابت پیکسلی داشته باشه، دیگه هماهنگی درستی با اندازه فونت در حال تغییر نخواهد داشت.
محدود کردن طول خط برای خوانایی بهتر
p {
max-width: 65ch;
}یکی از اصول مهم تایپوگرافی Responsive، که با واحد ch که در فصل ۶ دیدیم ارتباط مستقیم داره، محدود کردن حداکثر طول خط یک پاراگرافه. تحقیقات طراحی نشون داده که خطوط خیلی طولانی (مثلاً بیشتر از ۷۵ تا ۸۰ کاراکتر)، خوندن رو برای چشم خستهکننده میکنن؛ چون چشم باید مسیر طولانیتری رو برای پیدا کردن ابتدای خط بعدی طی کنه. مقدار 65ch تا 75ch، معمولاً بازه مناسبی برای خوانایی راحت متن پاراگراف در نظر گرفته میشه.
letter-spacing و اندازههای سیال
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
letter-spacing: -0.02em;
}همونطور که در درس ۸-۳ دیدیم، استفاده از واحد em برای letter-spacing (بهجای px)، باعث میشه این فاصلهگذاری هم بهطور نسبی و هماهنگ با اندازه فونت در حال تغییر، رشد یا کوچک بشه؛ این هماهنگی، ظاهر تیتر رو در تمام اندازههای صفحهنمایش، متعادل و طبیعی نگه میداره.
یک مثال کامل و جامع از تمام مفاهیم فصل
@font-face {
font-family: "AppFont";
src: url("appfont-variable.woff2") format("woff2-variations");
font-weight: 300 800;
font-display: swap;
}
body {
font-family: "AppFont", sans-serif;
}
h1 {
font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
font-weight: 750;
line-height: 1.1;
letter-spacing: -0.02em;
}
p {
font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
font-weight: 400;
line-height: 1.6;
max-width: 65ch;
}این مثال، تقریباً همه چیزی رو که در این فصل یاد گرفتیم، در کنار هم بهکار میگیره: یک Variable Font بارگذاریشده با @font-face، اندازههای سیال با clamp()، وزن دقیق فونت متغیر، ارتفاع خط نسبی، فاصلهگذاری حروف هماهنگ، و محدودیت طول خط برای خوانایی بهینه.
نکات مهم
- clamp() امکان تعریف اندازه فونتی را فراهم میکند که بهطور پیوسته و خودکار بین یک حداقل و حداکثر، متناسب با عرض صفحهنمایش، تغییر میکند.
- ترکیب vw با rem در مقدار میانی clamp()، هم Responsive بودن و هم پاسخگویی به تنظیمات دسترسیپذیری کاربر را همزمان حفظ میکند.
- محدود کردن طول خط پاراگراف (معمولاً بین 65ch تا 75ch)، یکی از اصول مهم خوانایی در طراحی تایپوگرافی است.
اشتباهات رایج
- استفاده از font-size ثابت برای تیترهای بزرگ، بدون در نظر گرفتن رفتار آنها در صفحهنمایشهای کوچک.
- استفاده از مقدار خالص vw برای font-size بدون محدود کردن آن با clamp()، که میتواند در صفحهنمایشهای خیلی کوچک یا بزرگ، متن را غیرقابلخواندن کند.
- فراموش کردن محدودیت max-width بر اساس ch برای پاراگرافهای طولانی، که باعث خطوط بیشازحد طولانی و خستهکننده در صفحهنمایشهای بزرگ میشود.
جمعبندی
تایپوگرافی Responsive با ترکیب ابزارهایی که در طول این فصل دیدیم شکل میگیرد: تابع clamp() برای اندازههای سیال، line-height بدون واحد برای هماهنگی با اندازه فونت متغیر، letter-spacing با واحد em برای فاصلهگذاری نسبی، و محدودیت طول خط با واحد ch برای خوانایی بهینه. این اصول، در کنار Variable Fonts و @font-face که در درس قبل دیدیم، پایهی طراحی تایپوگرافی حرفهای و واکنشگرا را میسازند؛ و با این جمعبندی، فصل هشتم دوره را به پایان میرسانیم.