تایپوگرافی سیال (Fluid Typography)

از Bricks 2.1، Fluid Typography Generator به شما اجازه می‌دهد اندازه فونت‌های pixel-perfect و واکنش‌گرا (از طریق CSS variable با استفاده از clamp) بسازید که بین مقادیر مینیمم و ماکزیمم تعریف‌شده به‌صورت یکنواخت scale می‌شوند و خوانایی یکپارچه را در تمام اندازه‌های صفحه و دستگاه‌ها تضمین می‌کنند. فرآیند مدیریت اندازه فونت را با حفظ انعطاف‌پذیری و دقت در طراحی ساده‌تر می‌کند.

دسترسی به fluid typography

برای دسترسی به Fluid Typography Generator روی آیکون Aa در header Variable Manager کلیک کنید:

یک کنترل «Fluid Typography» هم زیر Theme Styles > Typography برای دسترسی آسان وجود دارد ;)

دسته‌بندی fluid typography

Bricks به شما اجازه می‌دهد از طریق category ها Fluid Typography Scale های نامحدودی برای Heading ها، Text و غیره بسازید.

بنابراین، هر Category یک Fluid Typography Scale است که همه تنظیمات scale را کنار خود ذخیره می‌کند.

می‌توانید ساده نگه دارید و فقط یک category Headings و یک category Text برای آن دو scale بسازید همان‌طور که در screenshot زیر انجام دادیم:

متغیرهای fluid typography

متغیرهای fluid typography را می‌توان با Scale Generator در سمت راست تولید کرد.

هر بار که متغیرها تولید می‌شوند، تمام متغیرهای موجود در category انتخاب‌شده حذف و با متغیرهای جدیدساخته‌شده جایگزین می‌شوند. تعداد متغیرها مثل مجموعه قبلی است، اما نام‌ها و مقادیر دوباره تولید می‌شوند. بنابراین، هرگونه ویرایش دستی انجام‌شده روی نام‌ها یا مقادیر متغیر پس از regenerate شدن از بین می‌رود.

کنترل‌های Scale

Prefix

prefix تعیین می‌کند نام متغیرها چطور ساختاردهی شوند. برای مثال، تنظیم prefix روی text- منجر به نام‌گذاری متغیرها به‌صورت --text-m یا --text-xl می‌شود، بسته به scale. توصیه می‌شود از prefix ای استفاده کنید که هم یکتا و هم توصیفی باشد تا clarity حفظ شود و از conflict جلوگیری شود.

Scale type

scale type convention نام‌گذاری استفاده‌شده برای fluid typography variable ها را مشخص می‌کند. سه گزینه موجود است:

1. T-shirt: نام‌های متغیر بر اساس اندازه‌های استاندارد t-shirt مثل 2xs, xs, s, m, l, xl, 2xl تولید می‌کند. یک مثال خروجی --text-m خواهد بود.
2. Numeric: نام‌های متغیر با استفاده از اعداد، معمولاً از ۱ تا ۶ تولید می‌کند. یک مثال خروجی --text-4 خواهد بود.
3. Custom: کنترل کامل دستی روی convention نام‌گذاری ارائه می‌دهد. برای مثال، نام‌های scale مثل small, medium, large, title را می‌توان وارد کرد که منجر به نام‌های متغیری مثل --text-medium می‌شود.

Custom scale type

این کنترل تنها وقتی scale type روی Custom تنظیم شده نمایش داده می‌شود. امکان تعریف نام‌های scale سفارشی را فراهم می‌کند که انعطاف‌پذیری در هماهنگ کردن convention نام‌گذاری با نیازمندی‌های پروژه خاص را ارائه می‌دهد.

Baseline step

baseline step به‌عنوان پایه scale عمل می‌کند. baseline variable به‌طور مستقیم حداقل و حداکثر اندازه فونت تعریف‌شده را منعکس می‌کند، و تمام steps دیگر scale نسبت به این baseline محاسبه می‌شوند. تعریف صحیح baseline scaling دقیق در همه steps را تضمین می‌کند.

Px to rem

این مقدار بر اساس تنظیم root font-size تعریف‌شده در Theme Styles > Typography > HTML: font-size به‌طور خودکار پر می‌شود. برای مثال، یک HTML font-size 100% به مقدار 16 مطابقت دارد، در حالی که یک HTML font-size 62.5% به مقدار 10 مطابقت دارد. خالی گذاشتن این فیلد منجر به بیان واحدها در px به‌جای rem می‌شود. برای اطمینان از scalability و دسترس‌پذیری، اکیداً توصیه می‌شود این تنظیم را حفظ کنید.

Base font size (px)

base font size مقادیر مینیمم و ماکزیمم برای baseline step را تعیین می‌کند. اندازه فونت‌ها برای تمام steps دیگر بر اساس Type Scale Ratio تعریف‌شده به‌طور خودکار محاسبه می‌شوند.

Screen width (px)

screen width breakpoint هایی را تعیین می‌کند که در آن‌ها baseline font size به مقادیر مینیمم یا ماکزیمم خود می‌رسد. خارج از این breakpoint ها، اندازه فونت‌ها ثابت می‌مانند.

Type scale ratio

این کنترل نسبتی را که اندازه فونت‌ها نسبت به متغیر مجاور بعدی افزایش یا کاهش می‌یابند تعریف می‌کند. برای مثال، با یک baseline 16px و یک scale ratio 1.5، step بعدی بالاتر از baseline به‌صورت 24px محاسبه می‌شود. ratio ها به بالا و پایین اعمال می‌شوند و scaling یکنواخت در هر دو جهت تولید می‌کنند.

برای use case های پیشرفته، امکان وارد کردن یک ratio سفارشی وجود دارد. یک کنترل جدید برای تعریف مقادیر سفارشی تنها وقتی گزینه Custom انتخاب شده در دسترس می‌شود. این اجازه می‌دهد کنترل دستی دقیقی بر نحوه محاسبه هر step در scale داشته باشید.

ویرایش متغیرها

پس از تولید، متغیرها در پنل مرکزی نمایش داده می‌شوند. این متغیرها را می‌توان به چندین روش مدیریت کرد.

افزودن متغیر

دو دکمه (arrow up و arrow down) در بالای پنل متغیرها قرار دارند: یکی برای ساخت متغیر کوچک‌تر و یکی برای متغیر بزرگ‌تر.

انتخاب هر گزینه یک متغیر جدید در موقعیت مناسب، یا بالا یا پایین baseline، درج می‌کند. هم نام متغیر و هم مقدار به‌طور خودکار تولید می‌شوند.

در مواردی که از scale type Custom استفاده شده، ممکن است نیاز باشد نام متغیر به‌صورت دستی به‌روز شود، یا مقادیر اضافی را می‌توان مستقیماً در تعریف custom scale اضافه کرد.

توجه: اگر از scale type Custom استفاده کردید، باید نام متغیر را به‌روز کنید، یا بهتر است مقدار جدید را مستقیماً در Custom scale اضافه کنید.

حذف متغیر

هر متغیری، از جمله baseline، را می‌توان حذف کرد. حذف متغیرها در محاسبات اختلال ایجاد نمی‌کند، حتی وقتی متغیرهای بیشتری بعداً تولید می‌شوند.

ویرایش دستی

نام‌های متغیر و مقادیر را می‌توان با انتخاب آن‌ها در ستون مرکزی مستقیماً ویرایش کرد. ویرایش دستی فقط روی متغیر انتخاب‌شده اعمال می‌شود و هیچ محاسباتی را تحت تأثیر قرار نمی‌دهد. این اجازه می‌دهد تنظیمات ظریف انجام دهید در حالی که consistency کلی scale حفظ می‌شود.

پیش‌نمایش typography

یک preview از fluid typography را می‌توان با انتخاب آیکون eye در Scale Generator فعال کرد. که پنجره preview را در سمت چپ popup باز می‌کند، در حالی که category ها برای افزایش فضا مخفی می‌شوند.

در پنجره preview، چندین اکشن برای مدیریت و آزمایش متغیرهای تولیدشده در دسترس هستند:

• Add variables: متغیرهای جدید را می‌توان بالا یا پایین موارد موجود درج کرد، با همان فرآیند توضیح‌داده‌شده قبلاً.
• Remove variables: هر متغیر شامل یک آیکون trash است که می‌توان برای حذف آن استفاده کرد.
• Customisable preview text: فیلد input بالای پنل اجازه می‌دهد متن preview سفارشی شود.
• Identify baseline step: متغیر highlighted (با border زرد) نشان‌دهنده baseline step در scale است.