اندازه قلم

ویژگی font-size اندازه قلم متن را مشخص می‌کند.^[۱]

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

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

مقدار font-size می‌تواند اندازه مطلق، یا نسبی باشد.

اندازه مطلق:

اندازه مشخصی برای متن تنظیم می‌کند

به کاربران اجازه تغییر اندازه متن در تمامی مرورگرها را نمی‌دهد (این امر به علت دلایل قابلیت دسترسی، مناسب نیست)

اندازه نسبی زمانی کاربردی است که اندازه فیزیکی خروجی شناخته شده باشد

اندازه نسبی

اندازه را نسبت به عناصر اطراف تنظیم می‌کند

به کاربران اجازه تغییر اندازه متن را در مرورگرها می‌دهد

نکته: اگر اندازه قلم را مشخص نکنید، اندازه پیش‌فرض برای متن‌های عادی، مانند پاراگراف‌ها، ۱۶ پیکسل (16px=1em) است.

تنظیم اندازه متن با پیکسل ها (Pixels)

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

مثال

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

مشاهدهٔ نتیجه

نکته: اگر از پیکسل‌ها استفاده کنید، همچنان می‌توانید از ابزار بزرگنمایی (Zoom) برای تغییر اندازه کل صفحه استفاده کنید.

تنظیم اندازه قلم با Em

به‌منظور تغییر اندازه متن (در منوی مرورگر) توسط کاربران، بسیاری از توسعه دهندگان از em به جای پیکسل‌ها استفاده می‌کنند.

واحد اندازه em توسط W3C توصیه می‌شود.

1em برابر با اندازه قلم جاری است. اندازه متن پیش‌فرض در مرورگر ۱۶ پیکسل است؛ بنابراین، اندازه پیش‌فرض 16px ،1em است.

اندازه می‌تواند با استفاده از فرمول روبه رو از پیکسل به em تبدیل شود: pixels/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 */
}

مشاهدهٔ نتیجه

در مثال بالا، اندازه متن بر حسب em همانند مثال قبل که بر حسب pixel است. اما، با اندازه em، امکان تنظیم اندازه متن در تمامی مرورگرها وجود دارد.

متأسفانه، هنوز در نسخه‌های قدیمی‌تر IE مشکل وجود دارد. متن بیش از حدی که باید بزرگ یا کوچک می‌شود.

استفاده از ترکیبی از درصد (percent) و Em

این روش که در تمامی مرورگرها کار می‌کند، تنظیم اندازه پیش‌فرض font-size بر حسب درصد برای عنصر <body> است:

مثال

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

مشاهدهٔ نتیجه

کد ما بسیار خوب کار می‌کند! این کد متن را در تمامی مرورگرها با سایز یکسان نمایش می‌دهد، و به تمامی مرورگرها اجازه بزرگنمایی یا تغییر اندازه متن را می‌دهد!