‏یه روش تمیزتر برای اسکیل تایپوگرافی با CSS

تو دنیای طراحی وب یه مشکل همیشگی هست: از کجا بفهمیم فونت هر بخش (تیتر، متن اصلی، جزئیات) چقدر باید بزرگ باشه؟ یه روش معروف به اسم مدیولار اسکیل (یعنی ساختن سایزها با ضرب مکرر یه عدد پایه تو یه نسبت ثابت) این کارو حل می‌کنه. نویسنده تو این پست میگه روش رایجش یه ایراد داره: برای حساب کردن هر سایز باید اول سایز قبلی رو بدونی، یعنی برای رسیدن به --s3 باید اول --s2 رو حساب کرده باشی.

راه‌حلی که پیشنهاد می‌ده استفاده از تابع pow() تو CSSه (یعنی به توان رسوندن یه عدد). چون ضرب مکرر همون به توان رسوندنه، می‌شه هر سایز رو مستقیم از عدد پایه و شماره پله (step) به دست آورد، بدون اینکه به سایز قبلی نیاز باشه:

body {
  --ratio: 1.5;
  --s0: 1.2rem;
  --s3: calc(var(--s0) * pow(var(--ratio), 3));
  --s2: calc(var(--s0) * pow(var(--ratio), 2));
  --s1: calc(var(--s0) * pow(var(--ratio), 1));
}

این‌جوری هر متغیر مستقل از بقیه محاسبه می‌شه و کد هم تمیزتره.

نویسنده میگه خودش استفاده‌ی آزاد از این روش با اعداد منفی و مثبت رو پیشنهاد نمی‌کنه، چون خیلی راحت می‌شه به سایزهای غیرقابل‌خوندن رسید. تو مثالش با نسبت 1.5، سایز --s-3 می‌شه حدود 5.6px که برای خوندن خیلی کوچیکه. به‌جاش پیشنهادش اینه که کلاً از اعداد منفی رد بشی و به‌جاش سه دسته تعریف کنی: Heading (تیتر)، Body (متن اصلی) و Detail (جزئیات)، هر کدوم با یه سایز پایه‌ی مستقل که همون کف (حداقل) سایز اون دسته حساب می‌شه.

با این مدل، سایز پایه‌ی هر دسته همیشه از دسته‌های پایین‌تر بزرگ‌تره و هیچ‌وقت به یه سایز خیلی ریز نمی‌رسی، چون فقط جهت مثبت (به توان‌های صفر و بالاتر) رو استفاده می‌کنی. مثلاً اگه کوچیک‌ترین تیترت h3 باشه، کافیه پایه‌ی همون دسته Heading رو با پله صفر بدی و برای h2 و h1 پله رو یکی‌یکی بالا ببری.

نکات کلیدی:

• مدیولار اسکیل سنتی برای هر سایز به سایز قبلی نیاز داره؛ با pow() هر سایز مستقیم از عدد پایه و شماره پله حساب می‌شه.
• استفاده‌ی آزاد از توان‌های منفی می‌تونه فونت رو تا حدود 5.6px (با نسبت 1.5) کوچیک و غیرقابل‌خوندن کنه.
• روش پیشنهادی: سه دسته Heading، Body و Detail با یه سایز پایه‌ی مستقل برای هرکدوم، بدون توان منفی.
• پایه‌ی هر دسته همون کف (حداقل) سایز مجاز اون دسته حساب می‌شه تا خوانایی تضمین بشه.