طراحی واکنشگرا - فونت و تایپوگرافی

رسیدن به یک تایپوگرافی مایع (fluid) ممکنه ساده تر از اون چیزی باشه که شما فکر می کنید. این دارای پشتیبانی وسیع مرورگر هست, به سادگی پیاده سازی میشه و بدون این که کنترل طراحی از دست شما در بره, به دست میاد. 

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

ممکنه بخاطر این باشه که تایپوگرافی عمیقا از حروف قرن های قدیم نشات گرفته می شود. مفهوم داشتن مایع با این سنت مخالف است. ابعاد در پرینت ها ثابت هستند, ما حتما نباید در وب هم به همین شکل باشند. به این دلیل فکر می کنم تایپوگرافی مایع برای وب مناسب است. 

این بدین معنا نیست که ما باید هر چیزی که درباره ی تایپوگرافی می دانیم, نادیده بگیریم. ما فقط نیاز داریم چگونگی اعمال تکنیک هایی که می دانیم رو در راهی متفاوت یاد بگیریم. با دقت بیشتر میتونید مطمئن بشید تجربه ی کاربری بر تمام اندازه های صفحه نمایش منطبق است.

شروع کار با تایپوگرافی مایع

واحدهای نمایشگر امکان ساخت تایپوگرافی مایع رو در وب ممکن می کند. واحدهای نمایشگر, به درصد ابعاد نمایشگر مرورگر اشاره می کند. برای مثال عرض یک نمایشگر (vw) معادل یک درصد از ابعاد نمایشگر هست. این واحد متفاوت از واحد درصد هست (مثلا عرض %1) چون این واحد به نمایشگر بستگی دارد و درصدها به container پدر آن عنصر وابسته است.

این یعنی برخلاف سایر انواع واحدها, واحدهای نمایشگر با اندازه ی فونت پایه رابطه ای ندارند. این تفاوت باعث میشه واحدها رو خاص و جذاب کنه.

چهار واحد نمایشگر وجود دارند :

• vw : عرض نمایشگر
• vh : ارتفاع نمایشگر
• vmin : کوچک ترین مقدار عرض و ارتفاع نمایشگر
• vmax : بزرگ ترین مقدار عرض و ارتفاع نمایشگر

راحت ترین روش برای شروع استفاده از تایپوگرافی مایع اینه که مقدار font-size رو در عنصر html با واحد مایع قرار بدیم :

html { font-size: 2vw; }

در این مثال ما عنصر ریشه رو 2vw قرار دادیم. سپس, ما زیر مجموعه ی عنصر ریشه رو با واحد em قرار دادیم. چون تمام واحدهای em و rem به طور مستقیم یا غیرمستقیم به ریشه ربط دارند و اون ها هم مایع می شوند. برای مثال :

h1 { font-size: 2em; }

اندازه ی 2em برای این عنصر معادل 4vw خواهد بود, چون این دو برابر اندازه ی فونت 2vw هست.

استفاده از واحدهای روابط نمایشگر اشکالاتی رو به همراه داره. ما کنترل دقیقی از نرخ اندازه نداریم , ما حداقل و حداکثر اندازه ی فونت رو نداریم و همانند پیکسل ها یک تعریف میتونه تنظیمات سایز فونت مورد نظرمون رو بازنویسی کنه. خوش بختانه راه هایی وجود داره که میشه بر این مشکلات غلبه کرد.

کنترل واحدهای نمایشگر برای به دست آوردن حداقل و حداکثر اندازه فونت

اعمال 2vw به عنصر html, در حالی که همه چیز رو مایع در نظر می گیریم سادست اما ممکنه بهترین نتیجه را ندهد. واحدهای نمایشگر ابزار بی نهایتی هستند و برای به دست آوردن نتیجه کارآمد نیاز به تلاش بیشتر دارند.

از اون جا که واحدهای نمایشگر همیشه با نمایشگر رابطه دارند, در صفحه های بسیار کوچک, شما  احتمالا با فونت های مسخره کوچک مواجه خواهید شد.

طبیعتا ما باید قادر باشیم حداقل اندازه فونت رو تنظیم کنیم اما هنوز پراپرتی min-font-size در CSS وجود ندارد. با کمی تفکر جانبی با میتونیم از طریق چند راه متفاوت به همین نتیجه برسیم. 

اول ما میتونیم از اصطلاح ()calc استفاده کنیم :

html { font-size: calc(1em + 1vw); }

در این مثال, در اندازه عرض نمایشگر صفر, اندازه ی فونت دقیقا 1em خواهد بود. همین طور که اسکرین نمایش بزرگ تر می شود, مقدار 1vw به حداقل اندازه ی فونت 1em اضافه می شود. اما این تکنیک همیشه ایده آل نیست. گاهی ما می خواهیم که حداقل اندازه فونت رو در یک سایر نمایشگر قرار بدیم. این کار رو با استفاده از کوئری های مدیا انجام می دهیم :

@media screen and (min-width: 50em) {
  html {
    font-size: 2vw;
  }
}

در این مثال, وقتی که عرض نمایشگر به 50ems برسه, اندازه فونت مایع می شود. این بسیار خوب کار می کند, اما این درواقع به معنی پرش بین مقادیر ثابت و مایع است. برای از بین بردن این, ما میتونیم روی نقطه دقیقی که مقدار مایع با مقدار ثابت تطابق پیدا می کنه, کار کنیم و یک نقطه پایان در اون اندازه ی نمایشگر قرار بدیم. 

اگر اندازه ی پیش فرض فونت 16 پیکسل باشد و اگر 2vw درواقع %2 از عرض نمایشگر باشد, سپس محاسبات در مورد نقطه پایانی به صورت (100 ÷ 2) ÷ 16 خواهد بود. این به ما 800 پیکسل خواهد داد.

از اون جا که ما می خواهیم از واحدهای em برای کوئری مدیا استفاده کنیم, بیایید پیکسل رو به ems تبدیل کنیم. ما 800 رو به 16 تقسیم می کنیم 50 = 16 ÷ 800. ما میتونیم این محاسبات رو برای ems انجام بدیم : 50 = (100 ÷ 2) ÷ 1. همین طور که در مثال بالا مشاهده می کنید, با تنظیم اندازه فونت 2vw و نقطه پایانی 50em, ما انتقال بهتری بین مقادیر ثابت و مایع داریم.

ما میتونیم از همین محاسبات برای حداکثر اندازه فونت استفاده کنیم. اگر ما یک حداثر اندازه فونت 24 پیکسل بخواهیم, ما میتونیم به این صورت محاسبه کنیم : 

24 ÷ (2 ÷ 100) = 1200px

برای ems هم به صورت زیر می شود :

1.5 ÷ (2 ÷ 100) = 75

سپس بالای 75 ems ما باید اندازه فونت رو به مقدار ثابت تغییر دهیم.

@media screen and (min-width: 75em) {
  html {
    font-size: 1.5em;
  }
}

این محاسبات خیلی پیچیده نیستند, اما من جدولی پیدا کردم که میتونه در بصری کردن نقاط پایان کمکمون کنه و نرخ اندازه فونت و واحد نمایشگر رو بیان کنه. مقادیر واحد نمایشگر در سراسر بالای جدول و رزولوشن دستگاه سمت چپ چدول هستند :

با توجه به این جدول, شما میتونید ببینید که ما کنترل کمی بر نرخ تغییرات واحد نمایشگر داریم. وقتی فقط از واحدهای نمایشگر استفاده می کنیم, ما محدود به سایز فونت های موجود در یک ستون از جدول هستیم.

کنترل نرخ مقایس

اگر ما بخواهیم اندازه فونت 16 پیکسل رو در یک اسکرین با رزولوشن 400 پیکسل انتخاب کنیم و سپس به 24 پیکسل در رزولوشن 800 پیکسل انتقال بدیم, ما قادر نخواهیم بود. همچنین شما ممکنه شما ممکنه متوجه شده باشید که ما نقاط پایان رو برای حداقل و حداکثر اندازه فونت محاسبه کردیم, نه انتخاب اون ها. 

اما چطور میتونیم از این محدودیت ها در بیاییم؟ پاسخ ما استفاده از ()calc هست. با استفاده ی همزمان از ()calc و واحدهای نمایشگر ما میتونیم تایپوگرافی مایع پیشرفته داشته باشیم که به خوبی بین یک رنج خاص نمایشگر تغییر اندازه میده. ما نیاز به ساخت یک تابع ریاضی ساده داریم.

این تابع یک مقدار در یک رنج میگیره و محاسبه میکنه که اگر در یک رنج متفاوت اعمال بشه مقدار جدید چقدر خواهد بود. پس اگر ما اعداد 1 و 100 رو داشته باشیم و مقدارمون 50 باشه و سپس بخواهیم به رنج جدید 1 تا 200 اعمالش کنیم, مقدار جدید ما 100 خواهد بود. هر دوی این مقادیر دقیقا وسط رنج ما قرار می گیرند.

این یک تابع معمول برای مکان یابی مقادیر هست و من از این تابع هنگام کار با اطلاعات در جاوا اسکریپت بسیار کار کردم. من درمورد امکان استفاده از توابع با ()calc کنجکاو بودم و وقتی متوجه شدم که این یک تابع کاملا ریاضی بوده, فهمیدم که تمام چیزی که نیاز دارم یک متغیر هست. این تفاوت کلیدی در نمایشگر هاست : اندازه نمایشگر یک متغیر هست. یک مقدار 100vw مقدار متغیر در این معادله هست دلیلش اینه که مقدار حل شده ی 100vw با تغییرات اندازه نمایشگر, عوض میشه. تابع ()calc انواع واحدها رو در روش های خاصی در معادله مدیریت میکنه. اگر شما درمورد این نوع تفکر مشتاق هستید, پیشنهاد میکنم مشخصات W3C در انواع واحدها و مقادیر رو مطالعه کنید.

گرچه این محاسبات به نظر پیچیده می رسند, اما ساده هستند. ما حداقل و حداکثر اندازه فونت و اندازه های اسکرین رو انتخاب کردیم و به معادله وصل کردیم. ما میتونیم از هر نوع واحدی, شامل ems,rems یا پیکسل استفاده کنیم. من از پیکسل برای مثال های این مقاله استفاده کردم, چون اون باعث میشه مفهوم اصلی راحت تر فهمیده بشود, اما من معمولا از واحد های rem در کار استفاده می کنم. هر چیزی که انتخاب می کنید, تنها چیزی که باید به خاطر داشته باشید این هست که باید از همان نوع واحد برای تمام مقادیر معادله استفاده کنید و بصورتی که در مثال آورده ایم انجامش بدهید.

اگر شما نمی خواهید این کار رو بصورت دستی انجام بدید, ابزارهای بسیاری این کار رو ساده می کنند, مثل mixins برای Sass و LESS و پلاگین PostCSS. 

منبع