فونت ها (Fonts)
انتخاب «فونت ها (Fonts)» حس سایت را عوض می کند. فونت یعنی شکل نوشتار. فونت خوانا، برندت را جدی تر نشان می دهد. همچنین اندازه و رنگ درست مهم هستند.
انتخاب فونت چرا مهم است؟
فونت مناسب، خواندن را راحت می کند. همچنین هویت برند می سازد. مثل انتخاب دست خط تمیز برای دفتر مدرسه.
ویژگی font-family در CSS
«font-family» فونت المان را تعیین می کند. همیشه چند نام زنجیره ای بده؛ به این می گوییم «Fallback». اگر اولی نبود، بعدی امتحان می شود. آخر هم یک خانواده کلی بگذار.
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
<p class="p1">نمونه فونت سریف</p>
<p class="p2">نمونه فونت سن سریف</p>
<p class="p3">نمونه فونت تک عرض</p>
نکته: اگر نام فونت چندکلمه ای است، در گیومه بنویس. مثل "Times New Roman".
خانواده های عمومی فونت ها
پنج خانواده کلی داریم: «Serif، Sans-serif، Monospace، Cursive، Fantasy». سریف لبه تزیینی دارد؛ سن سریف ساده و مدرن است؛ تک عرض برای کدنویسی خوب است؛ دست نویس شبیه دست خط؛ فانتزی تزیینی و بازیگوش.
گام های عملی تنظیم فونت ها
- برای بدنه یک فونت سن سریف انتخاب کن.
- یک زنجیره Fallback با کاما بنویس.
- برای کدها از Monospace استفاده کن.
هشدار: فونت شلوغ خوانایی را کم می کند. برای متن طولانی ساده تر انتخاب کن.
برای جلوه تیترها، بخش سایه متن را ببین. همچنین برای ظاهر نوشتار، تزئین متن و فاصله متن را بررسی کن. اگر نیاز داشتی، از همین صفحه با لینک فونت ها برگرد.
جمع بندی سریع
- همیشه زنجیره Fallback بنویس.
- نام چندکلمه ای را در گیومه بگذار.
- متن بدنه: معمولاً Sans-serif بهتر است.
- کدها: همیشه Monospace بگذار.
- اندازه و رنگ روی خوانایی اثر دارند.