‏استایل دادن به تیترهای HTML با کمک ریاضی

نویسنده می‌گه استایل دادن به شش سطح تیتر HTML طوری که هم از هم جدا باشن و هم دسترس‌پذیر، دردسر داره. فقط با رنگ نمی‌شه این کارو کرد، چون معیار WCAG 1.4.1 رو رد می‌کنه و توی حالت‌های high contrast یا forced-colors همه‌ی رنگ‌ها یکی می‌شن. ایتالیک و حروف بزرگ هم برای کسایی که مثلاً dyslexia (یعنی مشکل در خوندن متن) دارن سخت‌خوانه. پس فقط اندازه، فاصله و وزن فونت می‌مونه.

پایه‌ی کار یه modular scale هست، یعنی یه سری اندازه که هر کدوم از ضرب یا تقسیم قبلی در یه نسبت ثابت به دست میاد. این ایده از تئوری موسیقی اومده. نسبت پیشنهادی نویسنده 1.5 هست و اندازه‌ی پایه یعنی --s0 برابر 1.2rem (حدود 19 پیکسل) که اندازه‌ی متن بدنه‌ست. چون rem با تنظیمات مرورگر کاربر بزرگ و کوچیک می‌شه، از px بهتره.

body {
  --ratio: 1.5;
  --s0: 1.2rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
}

نویسنده نشونه‌های بصری رو به ترتیب قدرت مرتب کرده: اول اندازه‌ی فونت، بعد فاصله، بعد وزن فونت. h1 تا h3 اندازه‌های --s3 تا --s1 رو می‌گیرن و بقیه به --s0 می‌رسن، چون تیتر هیچ‌وقت نباید از متن خودش کوچیک‌تر باشه. برای فاصله از تکنیک flow و lobotomised owl (یعنی سلکتور * + *) استفاده کرده، طوری که فاصله فقط بالای المان‌ها اعمال بشه و margin‌ها روی هم نیفتن. تیترهای بالاتر فاصله‌ی بیشتری بالای سرشون دارن و فاصله‌ی زیرشون کمتر می‌شه تا محتوای مرتبط بهشون نزدیک‌تر دیده بشه.

وزن فونت ضعیف‌ترین نشونه‌ست، مخصوصاً توی dark mode به خاطر Irradiation Illusion. برای همین فقط h6 از 700 به 500 کاهش پیدا می‌کنه تا با h5 و متن فرق داشته باشه. نویسنده تأکید می‌کنه فونتی انتخاب کنید که واقعاً این وزن‌ها رو داشته باشه، وگرنه مرورگر وزن تقلبی می‌سازه که زشت درمیاد.

مشکل اصلی h4 بود: پرش از h3 با حدود 28 پیکسل به h4 با 19 پیکسل خیلی زیاد بود. میانگین معمولی جواب نمی‌داد چون مقیاس ضربیه نه جمعی. راه درست geometric mean هست، یعنی عددی که به یه اندازه از s0 بزرگ‌تر و از s1 کوچیک‌تره. این عدد می‌شه s0 ضرب در جذر نسبت، و CSS با تابع sqrt() مستقیم حسابش می‌کنه:

h4 {
  font-size: calc(var(--s0) * sqrt(var(--ratio)));
}

نتیجه حدود 1.47rem یعنی تقریباً 23.5 پیکسل می‌شه، که دقیقاً همون جای خالی 24 پیکسل رو پر می‌کنه و چون به نسبت وصله، با عوض کردن نسبت هم درست می‌مونه. یه روش تمیزتر هم بعداً پیشنهاد شده: هر پله رو مستقیم با تابع pow() از پایه حساب کنید، به جای اینکه زنجیروار از پله‌ی قبلی بسازیدش.

نکات کلیدی:

• همه‌ی اندازه‌ها و فاصله‌ها از یه پایه‌ی 1.2rem و نسبت 1.5 حساب می‌شن.
• ترتیب نشونه‌ها: اندازه‌ی فونت، بعد فاصله، بعد وزن فونت؛ بدون رنگ، ایتالیک یا حروف بزرگ.
• تیتر هیچ‌وقت نباید از متن بدنه کوچیک‌تر باشه، پس h5 و h6 روی --s0 می‌مونن.
• فقط h6 وزن 500 می‌گیره تا با h5 و فرق کنه.
• اندازه‌ی h4 با sqrt() به نیم‌پله‌ی حدود 23.5 پیکسل می‌رسه.
• تابع pow() توی CSS راه تمیزتری برای نوشتن کل مقیاسه.