تایپوگرافی مناسب در وب

10فوریه - توسط behinesaz - 0 - در طراحی وب سایت مقالات اموزشی

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

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

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

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

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

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

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

همانطور که می‌دانید کیفیت متون چاپی بر اساس 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) دیده شوند.

نقش مرورگرها

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *