آموزش تایپوگرافی

تایپوگرافی یعنی چیدن متن، نه انتخاب فونت

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

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

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

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

چه چیزی یک قلم را خوانا می کند؟

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

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

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

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

مقیاس اندازه ها را چطور بچینیم؟

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

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

عددهای همین سایتی که می خوانید، برای اینکه یک نمونه واقعی دیده باشید: پایه 16px است، متن بدنه 1.0625rem یعنی حدود هفده پیکسل، و متن کوچک مثل مسیر راهنما و زیرنویس شکل ها 0.85rem. تیترها همه با clamp() نوشته شده اند: h3 بین ۱.۱۵ و ۱.۴ رم، h2 بین ۱.۵ و ۲.۲ رم و h1 بین ۲ و ۳.۳ رم. یعنی روی موبایل کوچک ترین عدد و روی نمایشگر بزرگ بزرگ ترین، بدون هیچ نقطه شکست.

همین clamp() مهم ترین ابزار عملی این بخش است و جای سه تا چهار مدیا کوئری را می گیرد. سه عدد می گیرد: کمینه، اندازه شناور که معمولا بر حسب عرض صفحه است، و بیشینه. اشتباه رایجش هم این است که فقط اندازه شناور را می نویسند و کمینه را رها می کنند؛ نتیجه اش تیتری است که روی گوشی باریک به اندازه متن بدنه آب می رود.

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

طول سطر و فاصله سطر: دو عددی که بیشترین اثر را دارند

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

برای طول سطر یک سقف رسمی وجود دارد. معیار WCAG در بند ۱.۴.۸، که سطح AAA است و نه AA، می گوید عرض بلوک متن نباید بیشتر از هشتاد کاراکتر باشد. همان بند دو چیز دیگر هم می گوید که کمتر نقل می شوند: متن نباید از دو طرف تراز شود، و فاصله سطر باید دست کم یک و نیم برابر باشد.

در CSS این را با واحد ch می بندید و نه با پیکسل، چون عرض سطر باید با اندازه قلم بالا و پایین برود. عددهای همین سایت: پاراگراف معرفی هر صفحه 56ch و بدنه مقاله ها 78ch، یعنی درست زیر همان سقف هشتاد.

یک نکته که تقریبا هیچ جا نوشته نمی شود و همان چیزی است که آدم بار اول اشتباه می گیرد: ch عرض رقم صفر در قلم جاری است و نه عرض یک کاراکتر واقعی. در قلمی که همین سایت استفاده می کند، رقم صفر ۵۷۰ واحد از em هزار واحدی است، یعنی ۰.۵۷ em. پس 78ch عدد قابل تکراری است ولی «هفتاد و هشت حرف» نیست، و در فارسی که عرض حروف تفاوت زیادی با هم دارد این فاصله بیشتر هم می شود. عدد را به عنوان یک اندازه قابل تنظیم ببینید، نه به عنوان شمارش.

برای فاصله سطر، معیار WCAG در بند ۱.۴.۱۲ که سطح AA است، می گوید کاربر باید بتواند فاصله سطر را دست کم به ۱.۵ برابر اندازه قلم برساند بدون اینکه چیزی از محتوا از بین برود. این حد پایین است و نه توصیه. متن بدنه همین سایت 1.9 دارد و این انتخاب برای فارسی است: خط فارسی نقطه و دنباله زیر خط زمینه زیاد دارد و در فاصله ای که برای لاتین کافی است، شلوغ به نظر می رسد.

دو قلم لازم است یا یکی؟

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

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

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

وزن ها هم همین منطق را دارند. معمولا سه وزن کافی است: یکی برای متن، یکی برای تاکید درون متن، و یکی برای تیترها. اگر شش وزن در طرح هست، احتمالا سه تایشان هیچ وقت به چشم کسی نمی آیند و فقط دانلود می شوند.

از کجا بفهمیم سلسله مراتب درست شده؟

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

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

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

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