تایپوگرافی در طراحی وب یعنی هنر چیدمان متنها به شکلی که هم خوانا باشند و هم به زیبایی کلی صفحه کمک کنند. در CSS ابزارهای زیادی برای کنترل ظاهر متن داریم که میتوانند تجربه کاربری را بهطور چشمگیری بهبود دهند.
🖋 تغییر فونت کلی صفحه
با ویژگی font-family میتوانیم فونت پیشفرض صفحه را تغییر دهیم. بهتر است همیشه یک font stack تعریف کنیم:
body {
font-family: Helvetica, Arial, sans-serif;
}
اگر فونت اول نصب نباشد، مرورگر سراغ بعدی میرود. برای فونتهای serif:
body {
font-family: Georgia, "Times New Roman", serif;
}
🔠 اندازه متن (Font Size)
واحدهای رایج:
- px (پیکسل): دقیق و ثابت
- % (درصد): نسبی به اندازه والد
- کلمات کلیدی: small, medium, large
مثال:
body { font-size: 15px; }
.main-area h2 { font-size: 200%; }
.main-area p { font-size: 108%; }
🧱 ضخامت و سبک متن
- ضخامت:
font-weight: bold;یاnormal; - ایتالیک:
font-style: italic;
✨ فاصلهها
- فاصله بین حروف:
letter-spacing: 4px;
- فاصله بین کلمات:
word-spacing: 10px;
🌫 سایه دادن به متن
text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
🔹 مقادیر: افقی، عمودی، محوشدگی، رنگ
🔠 تغییر حالت حروف
text-transform: uppercase; /* همه حروف بزرگ */
text-transform: lowercase; /* همه حروف کوچک */
❌ خط زیر متن
a { text-decoration: none; }
معمولاً برای لینکها استفاده میشود.
📐 ترازبندی متن
text-align: left; /* پیشفرض */
text-align: right;
text-align: center;
text-align: justify;
📍 تورفتگی (Indent)
p { text-indent: 30px; }
📏 فاصله بین خطوط (Line Height)
body { line-height: 1.5; }
افزایش به 1.7 یا بیشتر خوانایی متن را بالا میبرد.
🎉 جمعبندی
در این درس یاد گرفتیم:
- انتخاب فونت و تعریف font stack
- تنظیم اندازه و سبک متن
- فاصله بین حروف و کلمات
- سایهدار کردن متن
- ترازبندی و تورفتگی
- فاصله بین خطوط برای خوانایی بهتر