اندازه فونت (Font Size) در CSS
ویژگی «اندازه فونت (Font Size)» در CSS اندازه متن را مشخص می کند. برای تیتر و پاراگراف از تگ های درست استفاده کنید و سپس با واحد مناسب، اندازه فونت را کنترل کنید.
CSS font-size و انواع واحدها
ویژگی font-size می تواند مقدار مطلق یا نسبی بپذیرد. ابتدا معنای هر گروه را ببینیم.
اندازه های مطلق
px: کنترل دقیق و ثابت روی اندازه فونت.- کلیدواژه ها:
xx-smallتاxx-large؛ اندازه های از پیش تعریف شده مرورگر.
اندازه های نسبی
em: نسبی به اندازه فونت والد.rem: نسبی به اندازه فونت ریشه سند (<html>).%: درصدی از اندازه فونت والد.smallerوlarger: نسبت به والد کوچک تر/بزرگ تر می شوند.
راهنمای انتخاب واحد برای اندازه فونت
- اگر کنترل دقیق می خواهید،
pxمناسب است. - اما با
pxصفحه به ترجیحات کاربر و اندازه های مختلف به خوبی مقیاس نمی شود. - برای طراحی مقیاس پذیر، از
emیاremاستفاده کنید. %برای تبعیت از والد مفید است.
نکته: تگ های معنایی تیترها (<h1>..<h6>) و پاراگراف (<p>) را درست به کار ببرید؛ تنها با تغییر اندازه فونت نقش عنصر را عوض نکنید.
تنظیم اندازه فونت با px
پیکسل کنترل کامل می دهد؛ ولی ممکن است در نمایشگرها و ترجیحات مختلف، مقیاس پذیری ایده آل نباشد.
h1 { font-size: 40px; }
h2 { font-size: 30px; }
p { font-size: 16px; }تنظیم اندازه فونت با em
em بر اساس اندازه فونت والد محاسبه می شود؛ اگر والد 16px باشد، 2.5em می شود 40px.
body { font-size: 16px; /* Base */ }
h1 { font-size: 2.5em; /* 2.5 * 16 = 40px */ }
h2 { font-size: 1.875em;/* 1.875 * 16 = 30px */ }
p { font-size: 1em; /* 1 * 16 = 16px */ }تنظیم اندازه فونت با rem
rem همواره نسبی به اندازه فونت عنصر ریشه (<html>) است؛ پیش فرض بیشتر مرورگرها 16px است.
html{ font-size:16px; }
h1 { font-size: 2.5rem; /* 40px */ }
h2 { font-size: 1.875rem; /* 30px */ }
p { font-size: 1rem; /* 16px */ }واحد vw برای اندازه فونت
vw برابر درصدی از عرض نماست؛ 1vw یعنی 1٪ از عرض پنجره. متن همراه با تغییر عرض مرورگر مقیاس می شود.
h1{ font-size:10vw; }
p { font-size:5vw; }هشدار: استفاده زیاد از vw می تواند در نمایش متن های طولانی روی نمایشگرهای خیلی عریض یا خیلی باریک مشکل ایجاد کند؛ همراه با حداقل/حداکثر اندازه استفاده کنید.
برای ادامه مباحث تایپوگرافی، به سبک فونت، مرور کلی فونت ها و خانواده های امن در فونت های وب سیف مراجعه کنید. همچنین استفاده از فاصله گذاری متن به بهبود خوانایی کمک می کند.