این یک تغییر ساده وب سایت شما را در دسترس تر می کند

امروز می خواهم موضوع مهم را یادآوری کنم – دسترسی. این یک تلاش جامعه محور برای تسهیل دسترسی دیجیتال است.

بخش کوچکی از این موضوع تایپوگرافی است. متن باید با هر اندازه فونت مرورگر خوب به نظر برسد.

قبل از همه: font-size: 20px – تمرین بد

من می دانم، همه ما این کار را انجام دادیم، بسیاری از افراد در اینترنت از آن در دوره های خود استفاده می کنند. اما رویکرد بدی است. اگر مطمئن نیستید کدام واحد را انتخاب کنید، یک قانون ساده وجود دارد:

px – عناصر با اندازه ثابت که تغییر نمی کنند، مانند حاشیه ها یا سایه ها.

rem – اندازه فونت برای دسترسی به آن برای کاربرانی که اندازه فونت پیش فرض مرورگر خود را تغییر داده اند.

vw / vh – چسباندن اندازه عناصر با اندازه دید

% – عناصر اندازه گیری چسبیده با اندازه نسبی

چگونه متن سیال در دسترس بسازیم

تنها چیزی که ما نیاز داریم clamp() برای دسترسی به آن و فرمولی برای پاسخگو کردن آن است.

  1. مطمئن شوید که جهانی را تنظیم کرده اید font-size به 16px. و line-height حداقل 1.2
html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 
  1. حداقل و حداکثر اندازه صفحه نمایش خود را تعیین کنید، 320 پیکسل – 1920 پیکسل در مورد من.
  2. اندازه متن خود را که می خواهید در حداقل و حداکثر صفحه نمایش خود داشته باشید، تعریف کنید. در مثال من دارم h1 تگ کنید تا اندازه فونت من باشد 50px و 90px بر این اساس.
  3. به https://utopia.fyi/type/calculator بروید و مقادیر خود را در آنجا قرار دهید

  صفحه https://utopia.fyi/type/calculator  صفحه https://utopia.fyi/type/calculator

  1. به CSS پایین بروید…

Source link