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

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

در ادامه‌ی این مطلب با من باشید تا باهم در مورد اینکه تایپوگرافی چی هست و تفاوت رندر متون در سیستم‌عامل‌های مختلف بحث کنیم.

تایپوگرافی چیست؟

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

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

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

تایپ در صفحه نمایش

قبل از پیدایش کامپیوترها، فقط در انتشارات و متون چاپی از مفهوم تایپوگرافی استفاده می‌شد و در این زمینه پیشرفت‌های بسیاری حاصل شده است. دستگاه‌های چاپ پیشرفته پدید آمده‌اند که میتوانند متون را با کیفیت بسیار بالا روی کاغذ چاپ کنند. حتی دستگاه‌های چاپ خانگی هم قادر به چاپ متون با کیفیت مناسب هستند. همانطور که می‌دانید کیفیت متون چاپی بر اساس dpi (نقطه در اینچ) سنجیده می‌شوند و با توجه به کیفیت بالای چاپ دستگاه‌ها، طراح‌های قلم با خیال راحت می‌توانند جزئیات زیبایی را در قلمی که طراحی می‌کنند در نظر بگیرند. اما داستان برای صفحات نمایش کامپیوتر طور دیگری است. کیفیت این صفحات نمایش بر اساس ppi (پیکسل در اینچ) سنجیده میشود و برای صفحات نمایش امروز این مقدار به طور میانگین ۱۰۰پیکسل در اینچ است که در مقایسه با کیفیت چاپ دستگاه‌های پیشرفته نشر، ناچیز و ضعیف به نظر می‌رسد (به استثنای صفحه نمایش آیپد جدید که ۲۶۴ پیکسل در اینچ و آیفون ۴ که ۳۲۶ پیکسل در اینچ کیفیت دارند و چند دستگاه محدود دیگر). برای همین طراح‌های فونت باید قلم‌هایی را که طراحی می‌کنند به صورت اختصاصی برای صفحات نمایش و کامپیوتر طراحی کنند در غیر اینصورت با متونی با گوشه‌های زائد و نمایش غیر جذاب برخورد خواهیم داشت.

تکنولوژی Anti-Aliasing (ضد پلگی)

در پردازش کامپیوتری متون، تکنولوژی Anti-Aliasing یا ضد پلگی مهم‌ترین نقش را برعهده دارد: حذف پله‌های پیکسلی به وجود آمده هنگام نمایش تایپ. این روش با اضافه کردن پیکسل‌های نیمه شفاف (Semi Transparent) در اطراف خطوط و متون یک تایپ، باعث می‌شود که این متون هنگام نمایش در صفحه نمایش کامپیوتر به صورت صاف و یک‌پارچه مشاهده شوند.

اما عناصر مختلفی در تاثیرگذاری این روش دخالت دارند: هینتینگ قلم، رندر Subpixel، سیستم‌عامل ها و غیره...

هینتینگ قلم (Font Hinting)

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

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

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

تفاوت رندر سیستم‌عامل‌ها

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

تکنولوژی مایکروسافت برای نمایش صحیح متون و ضدپله کردن آن‌ها ClearType نام دارد. این تکنولوژی پیکسل‌های حاوی متون را به صورت فشرده در کنار هم روی گرید پیکسلی منظم میکند تا به افزایش کنتراست و نمایش «ترد - Crispy» تر حروف کمک کند. در این تکنولوژی گاهی شکل و ظاهر اصلی حروف تایپ، فدای خوانایی و نمایش بهتر می‌شود و برای طراحی‌های دقیق مناسب نیست. ویندوز اکس‌پی و ویندوز ۷ هردو از تکنولوژی ClearType استفاده می‌کنند، با این تفاوت که در ویندوز اکس‌پی به صورت پیش‌فرض غیرفعال است و فقط از طریق تنظیمات سیستم عامل می‌شود آن‌را فعال کرد، البته نرم‌افزارهایی مثل Microsoft Office به صورت خودکار آن‌را فعال نگه‌میدارند. ولی در ویندوز ۷ این تکنولوژی به صورت پیش‌فرض روشن است و روی تمام متون اعمال می‌شود.

در مقابل، اپل برای این هدف مشترک، از تکنولوژی Quartz 2D استفاده می‌کند. هدف اصلی این تکنولوژی، حفظ شکل حروف و هماهنگی اصلی فونت‌ها در کنار خواناتر کردن و ضدپله کردن متون است. این تکنولوژی برای طراح‌های گرافیک و وب مناسب‌تر است چرا که حروف تایپ به شکل اصلی و واقعی خود نمایش داده خواهند شد و سیستم عامل سعی میکند راه‌های دیگری را برای خواناتر کردن متن اعمال کند. چون این تکنولوژی Anti-Aliasing بیشتری را روی متون اعمال می‌کند، ممکن است خواندن متن‌های طولانی با این تکنولوژی چشم را خسته کند. البته معمولا متن‌های سیستم عامل مک بهتر نمایش داده می‌شوند هم از لحاظ خوانایی هم از لحاظ حفظ شکل ظاهری اصلی حروف، چرا که شرکت اپل هم سیستم‌عامل مک را تولید می‌کند و هم سخت‌افزار مناسب آن‌را، که معمولا کیفیت صفحات نمایش آن بسیار بالاتر از صفحات نمایش معمولی هستند.

به روز رسانی: با توجه به اینکه سیستم عامل لینوکس یک سیستم عامل واحد نیست و توزیع‌های مختلفی تحت نام‌های مختلف از آن منتشر شده است، نمی‌توان به صورت مشخص گفت که از چه تکنولوژی برای خوانا کردن متون استفاده می‌کند. با این وجود، سیستم عامل Ubuntu که یک توزیع از لینوکس است، از فونت‌های OpenType که قابلیت‌های خوبی برای نمایش دارند استفاده میکند، همچنین در تنظیمات این سیستم عامل می‌توان گزینه Sub-pixel Rendering را روشن نمود تا متون کمی واضح تر و صاف‌تر (Smoother) دیده شوند. تصویر زیر نحوه نمایش فونت فارسی نسیم در مرورگر فایرفاکس در سیستم عامل Ubuntu را نشان می‌دهد.

نقش مرورگرها

مرورگرهای پیشرفته امروزی اکثرا تنظیمات و قابلیت‌های Anti-Aliasing سیستم عامل اجرا کننده را به ارث می‌برند. برای مثال در سیستم عامل مک متون در تمام مرورگرها به یک شکل واحد یا نزدیک بهم دیده می‌شوند. البته مرورگر فایرفاکس از نسخه ۳ به بعد تلاش کرده‌است تا بعضی از ضعف‌های رندرینگ سیستم‌عامل را در وب برطرف کند. اما در سیستم عامل ویندوز، متاسفانه مرورگرها در به کارگیری تکنولوژی ClearType تقریبا ناتوان بوده‌اند. برای مثال مرورگر کروم در سیستم عامل مک بهترین نمایش و در سیستم عامل ویندوز بدترین نمایش ممکن را میان مرورگرهای دیگر دارد. متاسفانه ما به عنوان طراح وب، کنترل زیادی روی نحوه نمایش این مرورگرها نداریم. تنها کاری که می‌توانیم بکنیم انتخاب قلم مناسب با طراحی خوب است.

برای مثال در تصویر زیر، تفاوت نمایش سه قلم: نسیم، میترا و یکان در مرورگر کروم در دو سیستم عامل مک ۱۰.۷.۳ و ویندوز ۷ نشان داده شده است.

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

نتیجه گیری

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

منتظر بخش‌های بعدی «تایپوگرافی در وب» باشید. سالار.