توسط : اکبر خلیل زاده

ویژگی font-size اندازه متن را تعیین می کند.

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

همیشه از برچسب های مناسب HTML مانند <h1> - <h6> برای عناوین و <p> برای پاراگراف ها استفاده کنید.

اندازه قلم یا فونت می تواند یک اندازه مطلق یا نسبی باشد.

تعیین اندازه قلم با پیکسل (px)

تنظیم اندازه متن با پیکسل به شما امکان کنترل کامل روی اندازه متن را می دهد:

 h1 {
  font-size: 40px;
} 
 h2 {
  font-size: 30px;
}
 p {
  font-size: 14px;
}

تعیین اندازه فونت با Em

برای اینکه کاربران بتوانند متن را تغییر اندازه دهند (در منوی مرورگر) ، بسیاری از توسعه دهندگان از em به جای پیکسل ها استفاده می کنند.
واحد اندازه em توسط W3C توصیه می شود.
1em با اندازه فونت فعلی برابر است. اندازه پیش فرض متن در مرورگرها 16px است. بنابراین ، اندازه پیش فرض 1em=16px است.
اندازه را می توان از پیکسل تا em با استفاده از این فرمول محاسبه کرد: pixel / 16 = em

 h1 {
   font-size: 2.5em; /* 40px/16=2.5em */
 }
 
 h2 {
   font-size: 1.875em; /* 30px/16=1.875em */
 }
 
 p {
   font-size: 0.875em; /* 14px/16=0.875em */
 }

اندازه قلم پاسخگو (Responsive)

اندازه متن را می توان با واحد vw تنظیم کرد ، که به معنی "عرض نما" یا viewport width است.

به این ترتیب اندازه متن با اندازه پنجره مرورگر تطبیق می شود:

مثال :

<h1 style="font-size:10vw">Hello World</h1>