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

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

اندازه‌ی نوشتار

مقصود از نوشته‌ها در صفحه، همون «متن اصلی» و «سرتیتر (heading)»ها است که می‌شه درباره‌ی اندازه‌های مناسب‌شون کلی صحبت کرد. حتما حتی در بعضی رسانه‌های چاپی مثل کتاب‌ها هم دیدید که گاهی نوشته کمی ریز یا کمی درشت‌تر به نظر می‌رسه و شما رو اذیت می‌کنه. یا اندازه‌ی تیترها با بقیه اجزای صفحه هم‌خوانی نداره. همین‌طور، در وب هم بسیارند این موارد.

این تصویر رو ببینیم: (عرض متن صفحه‌ی اصلی رو دستی کم کرده‌م.)

حتما متوجه اندازه‌ی بزرگ‌تر از معمول نوشته می‌شید. اندازه‌ی این نوشته رو فایرفاکس 14px محاسبه کرده، که واقعا برای فونت Tahoma بزرگه. این فونت، چه روی متن انگلیسی و چه متن فارسی، برای فونت‌های بین 11px تا 13px خوانا و مناسبه. این اندازه برای متن اصلی صفحه مناسبه و اصلا جالب نیست که برای تیترها استفاده بشه. چیزی که متاسفانه خیلی رایجه و فارسی‌ساز محترم قالب این وبلاگ هم همین‌کارو کرده! در ادامه، بیشتر در این‌باره بررسی می‌کنیم.

سرتیترها

نکته‌ی دیگه، مربوط می‌شه به اندازه‌ی تیترها و تناسب بین اندازه و اهمیت اون‌ها. این دو تصویر رو هم ببینیم:

و

این‌ها هر دو از یک صفحه و از یک پست وبلاگ گرفته شده‌ن و جالب اینه که از روی اندازه‌ی نوشته، اصلا نمی‌شه تشخیص داد کدوم عنوان پسته و کدوم یه زیر عنوان. جزئیاتشون رو ببینیم:

• اولی: h2، فونت: Tahoma، اندازه محاسبه‌شده در فایرفاکس: 17px
• دومی: h3، فونت: Tahoma، اندازه‌ی محاسبه‌شده در فایرفاکس: 16.3833px

اندازه‌ی نوشته‌ها خیلی نزدیک به هم‌اند! این نزدیکی اندازه‌ی عنوان متن و زیرعنوان‌ها در صفحه‌ای مثل وبلاگ، می‌تونه خواننده رو در نگاه اول به شک بندازه که آیا ادامه‌ی همون پسته یا پست جدیدی رو داره می‌خونه! همیشه باید به نسبت اهمیت نوشته‌ها، اندازه‌شون تعیین بشه. عنوان پست از یه زیرعنوان اهمیت بیشتری داره و این دو نباید با اندازه‌های یک‌سان در صفحه قرار بگیرن.

دقت داشته باشیم که HTML شش تگ سرتیتر(heading) داره که باید ازشون به درستی و در جای مناسب و با استایل مناسب استفاده بشه. اندازه‌ی این تگ‌ها هر کدوم بازه‌ی مشخصی داره که به تناسب کاربردشون تعریف شده‌ن. اگه بخوایم اندازه رو هر جور دوست داریم روی هر تگ بذاریم دیگه چه نیازی به کاربرد headingها بود؛ خیلی ساده div می‌گذاشتیم!

در ادامه

در این پست، تصاویری از بلاگ خیلی خوب داتیس‌دیزاین گذاشته بودم که طراحی بسیار زیبا و خلاقانه‌ای هم داره. فقط برای نمونه از این تصاویر استفاده کردم، ضمن این که برام ناراحت‌کننده بود (بیشتر به عنوان یه خواننده) که این طراحی زیبا با کوتاهی در استایل نوشتار ناقص به نظر برسه.

در سه پست بعدی، به بررسی سه مشکل باقی‌مونده می‌پردازم.

در همین رابطه

در رابطه با خوانایی و اندازه‌ی فونت‌ها در صفحات وب، پیشنهاد می‌کنم نوشته‌ی پایین از Inside Clean رو حتما بخونید. در نوشته‌های آتی باز هم به مطلب خوبی از این وبلاگ اشاره می‌کنم.

• میزان خوانایی فونت ها در صفحات وب