فونت و تایپوگرافی

فونت و تایپوگرافی

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

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

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

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

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

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

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

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

vw : عرض نمایشگر

vh : ارتفاع نمایشگر

vmin : کوچک ترین مقدار عرض و ارتفاع نمایشگر

vmax : بزرگ ترین مقدار عرض و ارتفاع نمایشگر

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

html { font-size: 2vw; }

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

h1 { font-size: 2em; }

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

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

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

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

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

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

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

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

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

@media screen and (min-width: 50em) {

  html {

    font-size: 2vw;

  }

}

اندازه فونت مایع در این مثال

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

اگر اندازه ی پیش فرض فونت ۱۶ پیکسل باشد و اگر ۲vw درواقع %۲ از عرض نمایشگر باشد, سپس محاسبات در مورد نقطه پایانی به صورت (۱۰۰ ÷ ۲) ÷ ۱۶ خواهد بود. این به ما ۸۰۰ پیکسل خواهد داد.

از اون جا که ما می خواهیم از واحدهای em برای کوئری مدیا استفاده کنیم, بیایید پیکسل رو به ems تبدیل کنیم. ما ۸۰۰ رو به ۱۶ تقسیم می کنیم ۵۰ = ۱۶ ÷ ۸۰۰. ما میتونیم این محاسبات رو برای ems انجام بدیم : ۵۰ = (۱۰۰ ÷ ۲) ÷ ۱. همین طور که در مثال بالا مشاهده می کنید, با تنظیم اندازه فونت ۲vw و نقطه پایانی ۵۰em, ما انتقال بهتری بین مقادیر ثابت و مایع داریم.

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

۲۴ ÷ (۲ ÷ ۱۰۰) = ۱۲۰۰px

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

۱.۵ ÷ (۲ ÷ ۱۰۰) = ۷۵

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

@media screen and (min-width: 75em) {

  html {

    font-size: 1.5em;

  }

}

۰ پاسخ به "فونت و تایپوگرافی"

    ارسال یک پیغام

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    ارتباط با کافه بلوط

    آدرس : خراسان جنوبی ، بیرجند ، پارک علم وفناوری خراسان جنوبی ، اتاق 101
    آدرس ایمیل: dp.cafebaloot@gamil.com

    logo-samandehi دروازه پرداخت معتبر

    All Right Reserved For Cafe Baloot 2018

    X