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

@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 اضافه می‌کنه و می‌تونید ازش استفاده کنید. اما موضوعی که هست اینه که شاید براتون مهم نباشه که هرکدوم از این فونت‌هایی که با فرمت‌های مختلف توی کد بالا مشخص شدن چی هستن و چه کار می‌کنن و برای همین کل کد رو همینطوری استفاده می‌کنید و فونت‌های مرتبط رو هم آپلود می‌کنید روی سرور. بذارید یه توضیح کوتاه در مورد هرکدوم از این فرمت‌ها بدم:

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

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

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

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

مشکلات طراحی پیکسلی

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

font: 14px/22px "Helvetica Neue", Arial, sans-serif;

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

مشکلات تایپوگرافی

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

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

مشکلات اجزای رابط کاربری

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

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

دوم و سوم آبان ماه امسال با همکاری آکادمی مجید آنلاین یه کارگاه آموزش HTML5/CSS3 و تایپوگرافی در وب برگزار می‌کنم. تو این کارگاه ۱۴ ساعته (۲ روز ۷ ساعته) در مورد تغییرات و امکانات جدید HTML5 و CSS3 صحبت می‌کنیم و نحوه استفاده از اون‌ها رو در پروژه‌های واقعی بررسی می‌کنیم. با توجه به علاقه شخصیم به تایپوگرافی، بخشی از این کارگاه رو اختصاص می‌دیم به تایپوگرافی در وب و در مورد تایپوگرافی خوب در زبان فارسی و چگونگی پیاده سازیش در وب بحث می‌کنیم. ظرفیت این کارگاه ۱۲ نفر هست و اگر قبل از ۲۵ مهر ثبت‌نام کنید، شهریه هر نفر ۲۶۰هزار تومان هست. برای اطلاعات بیشتر و مشاهده سرفصل‌های دوره یه سری به صفحه

رفع ادعا: این مقاله ترجمه‌ای از مقاله‌ی خودم به انگلیسی هست که ۲ سپتامبر در Medium منتشر کردم.

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

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

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

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

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

اگر یادتان باشد، تا حدود ۱۰ سال پیش تقریبا تمام گرافیک‌های موجود در وب (منهای عکس‌ها) با پسوند GIF ذخیره می‌شدند. چه متحرک و چه ثابت. تصاویر GIF به عنوان یک استاندارد برای تصاویر کم حجم قابل استفاده در وب شناخته شده بودند و یکی از مزیت‌های دیگر آن‌ها غیر از کم حجم بودنشان، شفاف بودنشان (Transparency) بود. ولی خب همه می‌دانیم که تصاویر GIF در کنار مزیت‌هایشان مشکلات فراوانی هم داشتند.

با تولید مرورگرهای جدید و گذر از دوران حکم‌رانی Internet Explorer نسخه ۷ (که از تصاویر PNG شفاف پشتیبانی نمی‌کرد)، کم کم پای گرافیک‌هایی با فرمت PNG به وب باز شد و این آغاز یک نسل جدید برای وب بود. چرا که تصاویر PNG قادر هستند تصاویر را با کیفیت ۲۴بیت (RGB) و ۳۲بیت (RGBA - با پس‌زمینه شفاف) نمایش دهند و معنی این، تصاویر با کیفیت بالا و حجم‌های مناسب است. سایز فایل‌های تصاویر PNG در حالت عادی تفاوت خیلی زیادی با تصاویر GIF ندارند. تصاویر PNG هنوز هم به وسعت در وب کاربرد دارند و بیشتر گرافیک‌های موجود در وب با این فرمت ذخیره شده‌اند.

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

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

سال‌هاست هرجا که آدرس یک وب‌سایت درج می‌شود، مشاهده می‌کنیم که در ابتدای نام دامنه آن پیشوند «.www» نوشته می‌شود. اما این پیشوند به چه معنی‌است و آیا وجود آن واقعا ضروری است؟ اگر ضروری نیست چگونه می‌توان آن را حذف کرد؟

پیشوند www کوتاه شده‌ی (Acronym) عبارت World Wide Web و به معنای «وب جهان‌گستر» است. در گذشته از این پیشوند برای مشخص‌کردن «وب سرور» در نام دامنه استفاده می‌شد. برای مثال، www.example.com به معنای وب‌سرور دامنه example.com بود که از طریق اینترنت برای مشاهده عموم قابل دسترس بود، یا برای مثال ftp.example.com یا nntp.example.com که به ترتیب برای مشخص کردن سرورهای انتقال فایل و مخابره اخبار و اطلاعات به کار می‌رفتند. Paolo Palazzi از افرادی بود که به همراه تیم برنرز لی در CERN کار می‌کرد، گفته است که استفاده از پیشوند www برای مشخص کردن وب‌سرور کاملا اتفاقی بوده و آن‌ها میخواستند صفحه خانگی وب‌سایت cern.ch را در واقع روی زیردامنه info.cern.ch راه‌اندازی کنند ولی بعدا یادشان رفته! (منبع).

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

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

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

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

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

شماهم اگر برای طراحی وب، گاهی از فوتوشاپ استفاده می‌کنید، حتما به این مشکل برخوردید که هنگام خروجی گرفتن برای وب (Save for web and devices) نتیجه‌ای که از کار حاصل میشه، با چیزی که در فوتوشاپ روش کار می‌کردید اندکی متفاوت هست و این خیلی بده. تصور کنید که ساعت‌ها وقتتون رو صرف پیدا کردن رنگ‌های مناسب کردید و بخاطر این مشکل، کارتون چیزی که میخواستید نشد.

بعد از کمی گشت و گذار در اینترنت و خرید کتاب Mastering Photoshop for Web Designers به پیشنهاد دوستان، بالاخره راه حل این مشکل رو پیدا کردم که امیدوارم به اشتراک گذاشتنش کمی از دردسرهاتون رو کم کنه.

این روزها بازار بحث در مورد سئو (بهینه سازی جستجو به انگلیسی با الفبای فارسی!) همه جا داغ ِ داغ است. شرکت‌های متعددی هم بازار گرمی می‌کنند که شاید توانستند از این آب ِ گلالود ماهی بگیرند، افرادی هم هستند (تعداد بســــــیار زیادی از افراد هستند) که تنها کلمه‌ای که در مورد دنیای وب و طراحی وب یادگرفته‌اند و می‌توانند تلفظ کنند، همین سئو است.

اما کمتر کسی می‌پرسد که این واژه دقیقن یعنی چه و برای انجام دادن آن چه کارهایی باید کرد؟ جمله‌ای که این روزها به وفور به گوش می‌رسد شاید این جمله باشد: «سایت من رو سئو کن!». این بین، آدم‌های بسیاری هم هستند که اعتقاد دارند که سئو آغاز و پایان وب است و بدون سئو هیچ کس هیچ چیز ندارد.

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

در ادامه مطلب با من همراه باشید.

سلام دوستان

اگر با دوربین‌های عکاسی DSLR کار کرده باشید (مدلهایی که لنزاشون رو میشه جدا و عوض کرد)، مطمئنن به این مشکل برخوردید که اکثر لنزهای معمولی، قادر به گرفتن عکس‌های ماکرو در فاصله خیلی کم نیستن، برای مثال کمترین فاصله ای که یه لنز ۱۸-۵۵ معمولی میتونی توش عکس بگیره، ۲۵ سانتیمتر هست. این فاصله روی بدنه لنزها حک شده. گاهی هم پیش میاد که یا لنز ماکرو خیلی قوی دم دست نیست و یا به هر دلیلی نمیشه بهش دسترسی داشت، و وقتی بخواین یه عکس سوپر ماکرو بندازین، به مشکل برمیخورین. برای حل این مشکل، یه راه حل اینجا معرفی می‌کنم، اگر چه این راه حل همیشگی و دائمی نیست، میتونه گاهی اوقات به دردتون بخوره.

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

سلام دوستان

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

برای روشن کردن Genius باید توی برنامه iTunes، از منوی Store، گزینه Turn on Genius رو انتخاب کنید. بعد از اینکار از شما نام کاربری و رمز عبور معتبر Apple میخواد که بعد از وارد کردنش Genius روشن و فعال میشه (البته بسته به تعداد اهنگتون بیشتر طول میکشه، برای ۶۰۰ آهنگ حدود سه دقیقه طول کشید)

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