مقاله مرتبط
Legibility چیست و چرا اینقدر روی خواندن ما اثر میگذارد؟
خیلیها Legibility را با Readability اشتباه میگیرند، در حالیکه این دو مفهومی کاملاً متفاوتاند. در این مقاله میبینیم خوانایی بصری متن از کجا آمده، چه اجزایی دارد و چرا امروز مستقیماً روی تجربهی کاربری، سئو و نتیجهی کسبوکار شما اثر میگذارد.
ادامه مطلبدر مقالهی قبل دربارهی مفهوم Legibility و اینکه از کجا آمده حرف زدیم. حالا وقتش رسیده دست به کار شویم. در این مقاله میخواهم قدمبهقدم نشانتان بدهم چطور این اصول را هم در یک پروژهی کدنویسیشده با HTML و CSS، و هم در یک سایت وردپرسی پیادهسازی کنید.
بخش اول: پیادهسازی در کد
قدم اول: تنظیم پایهی تایپوگرافی
اولین کاری که باید بکنید، تعریف یک پایهی درست برای فونت، رنگ و فاصلهی خطوط است. بهجای اینکه اعداد را همهجا هاردکد کنید، از متغیرهای CSS استفاده کنید:
:root {
--text-color: #1a1a1a;
--bg-color: #ffffff;
--font-body: "Vazirmatn", "Segoe UI", sans-serif;
}
body {
font-family: var(--font-body);
color: var(--text-color);
background-color: var(--bg-color);
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.7;
letter-spacing: 0.01em;
}
نکتهی کلیدی اینجاست: استفاده از clamp() باعث میشود اندازهی فونت
بهصورت واکنشگرا بین یک حداقل و حداکثر تنظیم شود، بدون اینکه مجبور باشید دهها
media query جداگانه بنویسید. این یکی از آن ترفندهایی است که وقتی یاد
بگیرید، دیگر سراغ روشهای قدیمی نمیروید.
قدم دوم: کنترل عرض ستون متن
یکی از رایجترین اشتباههایی که در طراحی سایتها میبینم، متنی است که از یک طرف صفحه تا طرف دیگر کشیده شده. چشم برای پیدا کردن ابتدای خط بعدی خسته میشود. راهحلش ساده است:
.article-content {
max-width: 65ch; /* حدود ۶۵ کاراکتر در هر خط */
margin: 0 auto;
}
واحد ch عرض کاراکتر «۰» در فونت جاری را معیار قرار میدهد و بهترین
ابزار برای کنترل طول خط متنی است، بهتر از استفاده از پیکسل یا درصد.
قدم سوم: کنتراست رنگ را جدی بگیرید
بر اساس استاندارد WCAG سطح AA، حداقل نسبت کنتراست برای متن معمولی باید ۴.۵ به ۱ باشد:
.text-primary {
color: #1a1a1a; /* روی پسزمینه سفید، نسبت کنتراست تقریباً 16 به 1 */
}
.text-secondary {
color: #595959; /* نسبت کنتراست تقریباً 7 به 1، همچنان قابل قبول */
}برای اینکه مطمئن شوید عددها درست هستند، لازم نیست حدس بزنید. ابزارهایی مثل axe-core یا افزونهی Lighthouse در مرورگر کروم، این نسبت را بهطور خودکار برایتان محاسبه میکنند.
قدم چهارم: سلسلهمراتب بصری بسازید
h1 {
font-size: 2.25rem;
line-height: 1.3;
margin-bottom: 1rem;
font-weight: 700;
}
h2 {
font-size: 1.75rem;
line-height: 1.35;
margin-bottom: 0.875rem;
font-weight: 600;
}
p {
margin-bottom: 1.25rem;
}هدف این است که خواننده فقط با نگاه سریع به صفحه، بدون خواندن کلمهبهکلمه، بفهمد ساختار محتوا چیست.
قدم پنجم: تست را خودکار کنید
اگر پروژهای دارید که مدام بهروزرسانی میشود، پیشنهاد میکنم Lighthouse CI یا Pa11y را در پایپلاین CI/CD اضافه کنید تا هر بار قبل از انتشار، امتیاز Accessibility صفحه بهطور خودکار بررسی شود. این کار جلوی خیلی از اشتباههای ساده را از همان مرحلهی توسعه میگیرد.
بخش دوم: پیادهسازی در وردپرس
مقاله مرتبط
قبل و بعد از Legibility: چه چیزی واقعا تغییر میکند؟
مقایسهی مستقیم یک سایت قبل و بعد از اعمال اصول Legibility؛ از عدد و شاخصهای قابلاندازهگیری تا رفتار واقعی کاربران. اگر دنبال کوچکترین تغییری هستید که بیشترین تأثیر را دارد، این مقاله همانجاست.
ادامه مطلبروش اول: از طریق Full Site Editing و theme.json
در تمهای Block-based (تمهای مدرن وردپرس)، فایل theme.json مرکز
کنترل تایپوگرافی سایت شماست:
{
"version": 2,
"settings": {
"typography": {
"fontSizes": [
{ "slug": "small", "size": "0.9rem" },
{ "slug": "medium", "size": "1.125rem" },
{ "slug": "large", "size": "1.5rem" }
],
"lineHeight": true,
"letterSpacing": true
},
"color": {
"palette": [
{ "slug": "text", "color": "#1a1a1a" },
{ "slug": "background", "color": "#ffffff" }
]
}
}
}این روش امروز استاندارد و توصیهشدهی وردپرس است، چون در ویرایشگر بلاک هم بهصورت بصری قابل تنظیم میشود؛ یعنی حتی اگر بعداً کسی غیر از شما بخواهد محتوا اضافه کند، همهچیز از قبل هماهنگ است.
روش دوم: از طریق Customizer یا CSS اضافی
اگر با کد راحت نیستید یا فقط میخواهید سریع یک تغییر کوچک اعمال کنید، مسیر «ظاهر > شخصیسازی > CSS اضافی» را باز کنید و همان قوانین CSS بخش اول را همانجا قرار دهید. این سادهترین راه برای شروع است، بدون اینکه به فایلهای تم دست بزنید.
روش سوم: افزونههای تخصصی دسترسیپذیری
افزونههایی مثل WP Accessibility یا Accessibility Checker بهصورت خودکار مشکلات کنتراست، اندازهی فونت و ساختار تیترها را در محتوای منتشرشده بررسی و گزارش میکنند. اینها خصوصاً برای سایتهایی که چند نویسنده دارند و محتوای زیادی منتشر میکنند، بسیار کاربردی هستند.
نکتهی مخصوص سایتهای فارسی
اگر سایتتان فارسی و راستبهچپ است، حتماً فونتهایی مثل Vazirmatn یا Yekan Bakh را بهصورت Self-hosted بارگذاری کنید، نه از یک CDN خارجی. این کار هم سرعت بارگذاری را بهتر میکند و هم از افت رندر یا لرزش متن (Font Flicker) جلوگیری میکند:
@font-face {
font-family: 'Vazirmatn';
src: url('/wp-content/themes/your-theme/fonts/Vazirmatn.woff2') format('woff2');
font-display: swap;
}یک نکتهی دیگر: بعد از اعمال هر کدام از این تغییرات، حتماً چند دقیقه وقت بگذارید و صفحه را روی گوشی خودتان هم باز کنید، نه فقط روی مانیتور بزرگ. خیلی وقتها چیزی که روی مانیتور ۲۴ اینچی کاملاً خواناست، روی صفحهی کوچک موبایل فشرده و ناخوانا به نظر میرسد.
کدام روش را انتخاب کنید؟
اگر پروژهتان یک سایت کدنویسیشده از صفر است، برو سراغ روش کد؛ کنترل کامل دارید و
میتوانید هرچه بخواهید سفارشی کنید. اگر روی وردپرس هستید و تمتان مدرن است، از
theme.json استفاده کنید. اگر عجله دارید یا فقط میخواهید یک تغییر
سریع اعمال کنید، CSS اضافی در Customizer بهترین گزینه است. و اگر سایتتان بزرگ است
و چند نفر روی آن محتوا منتشر میکنند، افزونههای دسترسیپذیری را هم اضافه کنید تا
هیچچیز از قلم نیفتد.
اشتباههای رایجی که بهتر است از آنها دور بمانید
- اعتماد کورکورانه به فونت پیشفرض تم: خیلی از تمهای وردپرس با فونتهایی میآیند که برای زبان انگلیسی بهینه شدهاند و برای فارسی وزن حروف و فاصلهگذاری مناسبی ندارند. همیشه فونت را جداگانه تست کنید.
- کنتراست کم به بهانهی «مینیمال بودن»: خاکستری روشن روی سفید ممکن است شیک به نظر برسد، اما اگر نسبت کنتراست پایین باشد، همان شیک بودن به قیمت از دست دادن خواننده تمام میشود.
- نادیدهگرفتن حالت موبایل: خیلی وقتها تنظیمات فقط روی نسخهی دسکتاپ تست میشوند. حتماً همان اعداد را روی صفحهی موبایل هم با چشم خودتان چک کنید، نه فقط با ابزار.
-
فراموش کردن fallback فونت: اگر فونت اصلی به هر دلیلی لود نشود
(اینترنت کند، مشکل سرور)، باید یک فونت جایگزین مناسب در
font-familyتعریف شده باشد، وگرنه سایت به فونت پیشفرض مرورگر برمیگردد که معمولاً هماهنگ با طراحی نیست.
جمعبندی
چه در یک پروژهی کدنویسیشده و چه در وردپرس، اصول Legibility یکسان است؛ فقط ابزار پیادهسازی فرق میکند — در کد مستقیماً با CSS، در وردپرس از طریق theme.json، Customizer یا افزونهها.
در مقالهی سوم این سری، میرویم سراغ نتیجهی واقعی این کار: تغییراتی که قبل و بعد از اعمال این اصول، هم در ظاهر سایت و هم در رفتار کاربران دیده میشود.
در آینده یک جزوهی آموزشی کاملتر و گامبهگام دربارهی پیادهسازی Legibility منتشر میکنم؛ شامل چکلیست کامل، ابزارهای تست و نمونهکدهای آماده برای کپی.
