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

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

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

@font-face {
  font-family: 'Yekan';
  src: url('yekan.eot'); /* IE9 Compat Modes */
  src: url('yekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('yekan.woff') format('woff'), /* Modern Browsers */
       url('yekan.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('yekan.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

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

اگر شما هم طراح وب هستید، یا حداقل به تکنولوژی علاقه دارید و اخبار و مقالات مربوط بهش طراحی و توسعه رو در اینترنت دنبال می‌کنید، حتما می‌دونید که این روزها چیزهایی وجود دارن به اسم Trend یا مُد در طراحی.

الان اواخر عمر مد طراحی تخت (Flat Design) هست که شامل چیزهایی مثل استفاده از رنگ‌های مات، سایه‌های بلند (Long Shadow)، عدم وجود گوشه‌های گرد و ... هست. قبل از طراحی تخت، دوران طراحی پارالاکس بود و بعد با مد شدن طراحی تخت، طراح‌ها شروع کردن به نکوهش کسایی که از پارالاکس در طرح‌هاشون استفاده می‌کنن. ترندها تا یه جایی خوب و مفیدن. باعث میشن که طراح‌ها هر روز خلاقیت‌های جدید به خرج بدن و سعی کنن که با بقیه متفاوت باشن، و اینکه کلا رنگ و روی وب رو عوض می‌کنن. اما سبک‌ها و ترندها می‌تونن بیشتر از اینکه مفید باشن، به شدت مخرب باشن:

تمام وب‌سایت‌ها شبیه همدیگه شدن!

گاهی دوستان به من می‌گن که چرا متون توی وبلاگم و بقیه کارهام هم‌تراز (Justify) نیستن. من هربار سعی کردم که توضیح بدم دلایم رو برای این‌کار ولی تصمیم گرفتم این‌بار اینجا در موردش به صورت کامل‌تر توضیح بدم.

متون هم‌تراز (Justified Text)

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

چند روز پیش دیدم که سایت Flat UI Colors در شبکه‌های اجتماعی توسط طراح‌های وب به اشتراک گذاشته می‌شد و اکثر اون‌ها در بخش توضیحات لینک نوشته بودن: «اگر میخواید تخت طراحی کنید، بهتره ازین رنگ‌ها استفاده کنید!». گویا بیشتر طراح‌های ما (و حتی طراح‌های تازه کار در دنیا) تصور می‌کنن که طراحی تخت به معنی استفاده از چند شکل هندسی و طیفی از رنگ‌های خاص هست و اگر توی طرحشون از سایه‌ها و Gradientها استفاده نکنن، معنیش اینه که به طراحی تخت مسلط شدن و دیدشون به دنیای طراحی باز شده.

ولی اینطور نیست.

من زبان و خط فارسی را خیلی دوست دارم. بخش عمده آن به این دلیل است که زاده این سرزمینم و مانند تمام آدم‌ها میهنم و هرچه که مربوط به آن است (البته به استثنای خیلی چیزها!) را دوست دارم.

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

مدتی هست که در کارهام از وب‌فونت‌های فارسی استفاده زیادی می‌کنم. فونت‌هایی مثل یکان، زر و میترا (و چند فونت دیگر فارسی) گزینه‌های خوبی برای تایپوگرافی در وب هستن (البته کاربردهای متفاوتی دارن).

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

شرکت ادوبی قبل از انتشار نسخه CS6 محصولاتش مثل Photoshop و Illustrator، همیشه بعد از انتشار نسخه اصلی یه نسخه Middle Eastern هم منتشر میکرد که توش امکان تایپ و ویرایش به زبان‌های خاورمیانه‌ای مثل فارسی و عربی وجود داشت. اما تا جایی که من خبر دارم نسخه مخصوص خاورمیانه برای ورژن CS6 ارائه نشده برای همین نوشتن فارسی در محیط فوتوشاپ کمی مشکل شده. خوشبختانه این مشکل به سادگی قابل حل هست و شرکت ادوبی گزینه‌ای در بخش تنظیمات فوتوشاپ CS6 (و احتمالا Illustrator) در نظر گرفته که با تغییرش زبان‌های خاورمیانه‌ای فعال میشن. برای فعال کردن این گزینه: از منوی Photoshop در مک یا منوی Edit در ویندوز گزینه Pr

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

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

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