فونت و تایپوگرافی در CSS؛ اندازه و خوانایی متن | درس 28 + پروژه درس

درس 28 از دوره آموزش HTML و CSS ارومیا دیزاین

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

فایل پروژه و پاسخ: دانلود پروژه درس 28 (ZIP). فایل شامل صفحه HTML، استایل، پاسخ تمرین و راهنمای اجرا است. پس از استخراج، index.html را در مرورگر باز کنید؛ پروژه به اینترنت یا نصب کتابخانه نیاز ندارد.

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

تایپوگرافی در CSS یعنی چه؟

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

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

body {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #17324d;
}

font-family؛ خانواده فونت و فونت جایگزین

با font-family فهرست فونت های ترجیحی را مشخص می کنیم. مرورگر برای نویسه های متن، از فونت های قابل استفاده این فهرست کمک می گیرد. فونت نخست ممکن است روی دستگاه کاربر وجود نداشته باشد یا همه حروف فارسی را نداشته باشد؛ به همین دلیل فونت جایگزین و یک خانواده عمومی در انتهای فهرست اهمیت دارند.

.article {
  font-family: Tahoma, Arial, sans-serif;
}

.english-note {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

نام فونتی که فاصله دارد را داخل کوتیشن بنویسید. نام خانواده عمومی مثل sans-serif کوتیشن نمی خواهد؛ این عبارت نام یک فونت خاص نیست. در این مثال، Tahoma ترجیح اول است، اما روی همه سیستم ها تضمین نمی شود. خروجی را روی دستگاه های مختلف ببینید؛ ممکن است شکل و عرض حروف کمی تغییر کند.

صرف نوشتن نام یک فونت سفارشی، فایل آن را به سایت اضافه نمی کند. برای فونت وب باید فایل مناسب و تعریف بارگذاری آن را داشته باشید. آموزش بارگذاری فونت را جداگانه بررسی خواهیم کرد. در پروژه این درس فونت تجاری توزیع نکرده ایم؛ اگر بعداً فونت اختصاصی اضافه کردید، مجوز استفاده آن در وب را بررسی کنید.

font-size؛ اندازه نوشته با واحد مناسب

ویژگی font-size اندازه نوشته را تعیین می کند. برای مثال های این درس از rem استفاده می کنیم تا اندازه ها نسبت به اندازه فونت ریشه صفحه تعریف شوند. اگر اندازه ریشه 16px باشد، 1.5rem برابر 24px است؛ اندازه ریشه می تواند با تنظیمات کاربر متفاوت باشد.

body { font-size: 1rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
.service-title { font-size: 1.5rem; }

این اندازه ها نقطه شروع تمرین هستند، نه نسخه قطعی برای هر سایت. عرض ستون، نوع فونت و طول عنوان را هم ببینید. با تنظیم html { font-size: 16px; } اندازه پایه را بی دلیل ثابت نکنید؛ برای این پروژه، تنظیم پایه مرورگر را نگه می داریم. تفاوت واحدها در درس px، درصد، em و rem توضیح داده شده است.

font-weight؛ وزن فونت با معنای محتوا فرق دارد

با font-weight ضخامت حروف را تغییر می دهید. مقدار 400 معمولاً وزن عادی و 700 معمولاً وزن ضخیم است. نتیجه واقعی به وزن های موجود در فونت بستگی دارد. اگر وزن مورد نظر در فونت نباشد، مرورگر ممکن است از وزن نزدیک یا ضخیم سازی مصنوعی استفاده کند؛ مقدار عددی به تنهایی تضمین شکل خاصی نیست.

.service-title {
  font-weight: 700;
}

.description {
  font-weight: 400;
}

برای عنوان یک بخش از تگ عنوان مناسب استفاده کنید و سپس وزن آن را تنظیم کنید. CSS فقط ظاهر را تغییر می دهد؛ پررنگ کردن یک پاراگراف آن را به عنوان معنایی تبدیل نمی کند. همچنین strong برای اهمیت معنایی متن است و نباید فقط برای درشت کردن همه جمله ها استفاده شود.

line-height؛ سطرها را قابل دنبال کردن کنید

ویژگی line-height در متن افقی، ارتفاع جعبه خط را تنظیم می کند. مقدار بدون واحد مانند 1.8 با اندازه فونت همان عنصر محاسبه می شود. اگر اندازه نوشته 20px باشد، ارتفاع خط ترجیحی 36px خواهد بود. این عدد ارتفاع خود حروف یا مقدار فاصله خالی میان آن ها نیست؛ وجود محتوای متفاوت در یک سطر هم می تواند روی ارتفاع آن اثر بگذارد.

.description {
  font-size: 1rem;
  line-height: 1.8;
}

.service-title {
  font-size: 1.5rem;
  line-height: 1.4;
}

مقدار بدون واحد با تغییر اندازه نوشته در فرزندان بهتر سازگار می شود. برای متن طولانی، از فاصله خیلی فشرده دوری کنید و مقدار مناسب را با فونت واقعی بررسی کنید. در پروژه، 1.1 را فقط برای مقایسه با 1.8 گذاشته ایم؛ حالت فشرده پیشنهاد ما برای متن اصلی نیست. فاصله پاراگراف ها را با margin تنظیم کنید، نه با بزرگ کردن بی اندازه ارتفاع خط.

text-align؛ تراز محتوا داخل جعبه

با text-align تراز محتوای درون خطی داخل یک جعبه را تنظیم می کنید. مقدار start به ابتدای جهت نوشتن اشاره می کند؛ در یک بخش راست به چپ، ابتدای سطر سمت راست است. با center محتوا وسط قرار می گیرد، اما خود جعبه الزاماً وسط صفحه نمی رود.

.description { text-align: start; }
.page-intro { text-align: center; }

برای صفحه فارسی، dir="rtl" را روی ساختار مناسب HTML قرار دهید. این ویژگی جهت پایه متن را مشخص می کند و با تراز یکسان نیست. اگر نمونه انگلیسی دارید، همان بخش را با جهت چپ به راست بنویسید. در پروژه دو کادر خط چین هم اندازه دارید؛ فقط محل متن داخل آن ها تغییر کرده است.

<html lang="fa" dir="rtl">
<!-- محتوای صفحه فارسی -->
</html>

<p lang="en" dir="ltr">Readable typography helps people.</p>

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

ویژگی های تکمیلی: سبک، زیرخط و فاصله حروف

ویژگی font-style حالت عادی یا مایل نوشته را مشخص می کند. مایل بودن برای همه فونت های فارسی خروجی خوانایی ندارد؛ پیش از استفاده بررسی کنید. ویژگی text-decoration برای تزئین متن، مثل زیرخط لینک، کاربرد دارد. پیوند باید از متن اطراف قابل تشخیص بماند و هنگام حرکت با کیبورد، نشانگر فوکوس داشته باشد.

.service-link {
  color: #075985;
  text-decoration: underline;
}

.service-link:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 4px;
}

ویژگی letter-spacing فاصله حروف را تنظیم می کند. روی فارسیِ پیوسته، فاصله گذاری دلخواه می تواند نتیجه نامناسب یا وابسته به مرورگر داشته باشد؛ برای متن فارسی این پروژه مقدار عادی را نگه می داریم. نمونه کوتاه انگلیسی پروژه با 0.04em صرفاً امکان مقایسه را فراهم می کند. برای خوانایی فارسی، ابتدا فونت، اندازه و ارتفاع خط را اصلاح کنید.

جدول ویژگی های اصلی تایپوگرافی

وراثت و علت اعمال نشدن فونت

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

button, input, select, textarea {
  font: inherit;
}

این یک مثال تکمیلی است؛ در پروژه این درس فرم نداریم. اگر اندازه یا فونت تغییر نکرد، ابتدا انتخابگر و کلاس عنصر را بررسی کنید، سپس در پنل Styles مرورگر قانون فعال را ببینید. توضیح آبشار و اولویت قوانین در پیدا کردن علت کمک می کند. برای رفع هر اختلاف ظاهری، !important اضافه نکنید.

پروژه عملی: آزمایشگاه خوانایی متن

پروژه دانلودی چند مقایسه آماده دارد: متن با سطرهای فشرده و باز، عنوان کم تمایز و واضح، و تراز آغاز سطر و وسط. محتوا در نمونه ها تکرار شده تا اثر استایل را بهتر تشخیص دهید. سپس یک کارت معرفی خدمات برای تمرین مستقل قرار گرفته است.

فایل index.html ساختار را دارد و style.css نمونه ها را آماده می کند. فایل solution.css پاسخ تمرین است و از ابتدا به صفحه متصل نیست. راهنمای مراحل در README.txt قرار دارد. فونت از دستگاه انتخاب می شود، بنابراین نبود یک فونت خاص نباید پروژه را متوقف کند.

در کارت تمرین، عنوان را 1.5rem با وزن 700 و ارتفاع خط 1.4 تنظیم کنید. متن بدنه 1rem و ارتفاع خط 1.8 داشته باشد. عرض متن را با max-width: 38rem محدود کنید؛ جعبه والد در صفحه باریک همچنان جمع می شود. این مقدار یک انتخاب آموزشی است و طول واقعی سطر به فونت و متن هم بستگی دارد.

.exercise h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
}

.exercise p {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 38rem;
  text-align: start;
  margin: 0 0 16px;
}

برای پیوند کارت، از inline-block، فاصله داخلی 8px 16px و وزن 700 استفاده کنید؛ زیرخط و نشانگر فوکوس را نگه دارید. فرق فاصله سطر، فاصله پاراگراف و فاصله داخلی را با مدل جعبه در CSS تطبیق دهید. رنگ لینک و زمینه را نیز با درس رنگ و پس زمینه مرور کنید.

برای فعال کردن پاسخ، بعد از لینک استایل اصلی در head این خط را اضافه کنید:

<link rel="stylesheet" href="solution.css">

دانلود دوباره: دریافت پروژه و پاسخ تمرین درس 28. فقط انتخابگرهای بخش .exercise را تغییر دهید تا نمونه های مقایسه بالای صفحه ثابت بمانند.

چگونه نتیجه را بررسی کنیم؟

1. متن را با عرض معمولی و سپس در پنجره باریک بخوانید؛ سطرها نباید روی هم بیفتند.
2. بزرگ نمایی مرورگر را تا 200% افزایش دهید؛ نوشته نباید داخل جعبه با ارتفاع ثابت بریده شود.
3. از کلید Tab برای رسیدن به پیوند تمرین استفاده کنید و نشانگر فوکوس را ببینید.
4. عنوان و متن بدنه را مقایسه کنید؛ نقش هرکدام باید از نظر بصری مشخص باشد.
5. در ابزار توسعه، مقدار font-family، font-size و line-height را بررسی کنید؛ در بخش فونت های رندرشده، فونت واقعی را ببینید.

برای این پروژه ارتفاع ثابتی به متن نداده ایم تا با تغییر اندازه و شکستن سطرها، فضای بیشتری بگیرد. خوانایی فقط با فونت حل نمی شود؛ رنگ، طول سطر و فاصله بخش ها هم اهمیت دارند. بررسی واقعی صفحه از انتخاب یک عدد ثابت ارزشمندتر است.

پرسش های رایج و مسیر درس بعد

چرا نام فونت را نوشته ام، اما شکل حروف عوض نشده؟ ممکن است فونت روی دستگاه موجود نباشد، نویسه فارسی نداشته باشد یا قانون دیگری غالب شده باشد. نوشتن نام فونت، فایل آن را بارگذاری نمی کند.

آیا مقدار بدون واحد برای ارتفاع خط پیکسل است؟ خیر؛ یک ضریب است. مثلاً 1.8 نسبت به اندازه نوشته همان عنصر محاسبه می شود.

آیا وسط چین کردن متن، جعبه را وسط صفحه می برد؟ خیر؛ text-align روی محتوای درون خطی داخل جعبه اثر دارد. برای جابه جایی خود جعبه باید چیدمان آن را جدا بررسی کنید.

در درس 29، تنظیم پس زمینه و تصویر پس زمینه در CSS را دقیق تر تمرین می کنیم: اندازه تصویر، جای قرارگیری و تکرار آن. کارت این درس را نگه دارید تا خوانایی متن روی زمینه های مختلف را هم بررسی کنید.

برای مطالعه بیشتر: مرجع font-family و مرجع line-height در MDN.