فونت و علم: راز نهفته در استفاده از فونت مناسب
نوشته شده توسط

فونت و علم: راز نهفته در استفاده از فونت مناسب

میکائیل چو از بنیانگذاران ooomf که به منظور ایجاد ارتباط میان توسعه دهدگان و طراحان دستچین شده برای انجام پروژه های کوچک و کوتاه مدت تاسیس شده است. میکائیل چو در وبلاگ ooomf در مورد روانشناسی  ، راه اندازی و بازاریابی  محصولات در بازار می نویسد.

من متوجه شدم که چگونه چیزهای به ظاهر کوچک مانند فونت و فاصله بین حروف می تواند بر مطالعه آنلاین و احساسات ما از مطالعه تاثیر بگذارد. انتخاب فونت مناسب بدون کناره نویسی ها و مطالب فرعی همه چیز را آسانتر و راحتر می کند و احساس بهتری به خواننده میدهد. وب سایت هایی مانند MediumSignal vs. Noise, و Zen Habits به مانند سالن گویا برای محتواها و مطالب هستند به این معنا که کلمات در این سایتها خود را بهتر نشان می دهند و خواندن مطالب در این سایتها واقعا به شما احساس آرامش می دهد و به شما اجازه می دهد بر روی مطالب و خواندن آنها تمرکز کنید بدون اینکه حواستان پرت شود. مثلا شما می توانید تفاوت میان Medium و Cracked را با ورود به وب سایتهایشان ببینید. وقتی شما دو وب سایت را بررسی میکنید این واضح است که یکی از آنها سبب میشود احساس چندان خوبی پیدا  نکنید تا مطالب را بخوانید. طرح و ساختار Cracked  آزار دهنده است و سبب انحراف چشم و سبب گیجی شما در خواندن مطالب میشود. با برسی و نحوه متن گذاری در وبلاگ ooomf ما به این نتیجه رسیدیم که علمی نهفته در ساختار و استفاده از فونت ها در مطالب آنلاین و غیرآنلاین ( نسخ چاپی)  وجود دارد.

زمانی که ما چیزی را مطالعه میکنیم چشم ما یک الگوی طبیعی به نام Scan Path را دنبال میکند. ما ابتدا مطالب را اسکن و سپس با مکث روی انها تمرکز میکنیم. در اینجا Scan Path برای یک خواندن معمولی به اینصورت است:

fixation-saccade-730x239

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

توجه نمایید که این مقاله برای زبان انگلیسی و حروف و کلمات انگلیسی تنظیم شده اما براحتی می توان آن را به دیگر زبانها از جمله فارسی تعمیم داد و از نکات آن استفاده کرد.

 

چرا طرح صحیح قالب و فونت به شما احساس بهتری می دهد:

زمانی که من نوشتن این مقاله را آغاز کردم مطمئن نبودم که می توانم یک دلیل و پشتوانه علمی برای اینکه چرا ما یک احساس خاص نسبت به یک فونت خاص پیدا می کنیم، بیابم. من فکر می کردم که انتخاب فونتها صرفاً یک وجه هنری است با جزء کوچکی از علم،  و این باور تا زمانی ادامه داشت که من با روانشناس کوین لارسون برخورد کردم. لارسون کار خود را بر روی تحقیق در مورد نوع تایپ و چگونگی صفحه بندی و تاثیر فونت ها سپری میکند و نیز پروژه ای مطالعاتی را در دانشگاه MIT دنبال می کرده است. در این مطالعه از ۲۰ داوطلب کمک گرفته شده است که بطور مشترک به دو نیم مرد و زن تقسیم شده اند و دو گروه نیز از هم جدا بودند به هر کدام نیز دو نسخه از مجله نیویورکر نشان داده شد که در یکی فونت و عکس و طرح بندی عالی و در دیگری ضعیف بنا نهاده شده بود.

good-bad

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

اثرات فرهنگ بر فونتها

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

courier_inside

یا مثلا در امریکا فرم های مالیاتی از فونت Helvetica  بهره می گیرند و مردم به این فونت وابسته شده اند که که در سایتهای دولتی نیز معمولا از این فونت استفاده می شود. و این مساله باید در هنگام تصمیم گیری در انتخاب فونت در نظر گرفته شود در زیر سایت بانک آمریکا را با فونت Impact  میبینیم که با نسخه اصلی آن مقایسه شده است

زمانیکه فونت سایت بانک را تغییر می دهیم و از فونت Impact  استفاده می کنیم به نظر سایت این بانک چندان قابل اعنماد نیست (  به مانند اینکه سایت بانک های ایران به جای فونت نازنین و یا زر از فونت تیتر و یا هما استفاده کنند که البته در ایران به طور معمول از تمام سایتها از فوت تاهما استفاده می کنند). از انجا که فونت ها  توسط انسانها ساخته می شوند پس این فونتها و نوع طرحبندی انها به ایشان وابسته است. پس قطعاً شما علاقه ای به انتخاب یک فونت که متفاوت از فرهنگ شماست ندارید.

عکس زیر سایت اصلی بانک را نشان می دهد:

Screen-Shot-2013-12-11-at-4.36

عکس زیر سایت بانک را با فونت تغییر یافته نشان می دهد که بعنوان سایت یک بانک، ماهیت خود را بی اعتبار می کند:

Screen-Shot-2013-12-11-at-4.37

چگونه یک محتوای بهتر را طراحی کنیم:

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

serif_sansserif

۱- انتخاب فونت مناسب مهم است

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

»دسته فونت های Serif : حروف با خطوط کوتاه و لبه های بیرون زده. بطور سنتی بهترین نوع برای چاپ است.

»دسته فونت های Sans-serif  : این حروف معمولا در مطالب رسمی و یا تفریحی دیده میشود و بهترین برای مطالب در خصوص مسائل دیجیتال است.

»فونت Script : شبیه به دست خط است و در دعوت نامه های رسمی بکار گرفته میشود و برای مطالب و محتوانویسی گزینه مناسب نیست.

»فونت Decorative : بهترین گزینه برای تیتر است ولی برای محتوانویسی گزینه مناسب نیست.

برای  وب نویسی بهتر است مطالب دارای حروف با فونتهای script و decorative  نباشند. چرا که عمده کار شما هنگام خواندن مطلب به این مشغول می شود که حروف چه هستند و در کنار هم چه لغتی را میسازند و قطعا سرعت مطالعه شما را کند می کند. و بدیهی است که شما دوست ندارید حین خواندن بدنبال این باشید که ان حرف a است یا E ! با این کار مغز شما بصورت غیر ضروری انرژی مصرف میکند و خسته میشود لذا تاثیر منفی در احساسات شما حین خواندن آن مطلب پدیدار می گردد. فونت Decorative  باید در مطالبی استفاده شود که به طور خلاصه و هایلایت شده خلاصه ای از موضوع را برساند. برای یک مطلب محتوایی بهتر است از فونتهای Serif و Sans-serif استفاده نمایید.

بسیاری از متخصصان امور چاپ و نشر نیز استفاده از sans-serif را برای موضوعات و مطالب انلاین توصیه می کنند چرا که معتقدند کیفیت و رزلوشن آن برای چاپ مناسب نیست. اما در مبحث صفحه نمایش و خواند مطالب بصورت انلاین Serif  در خواندن بسیار ساده تر و بهتر است.   سایتهای سنگین و پر محتوا مانند Medium  از فونت Serif  استفاده می نمایند. باید بدایند مهمترین چیز در انتخاب یک فونت اینست که ان فونت به نحوی، ساده در خواندن باشد تا مغز و انرژی خواننده را تلف نکند. خانم هیچ یک توصیه و راه حل Il1 را برای انتخاب یک فونت ساده و مناسب پیشنهاد می دهد اما رمزگشایی آن به چه شیوه ای است؟ در واقع در این روش شما خواهید فهمید در کارکترهای مشابه کدام فونت کمترین میزان سردرگمی را ایجاد می کند نمونه چند فونت در زیر آمده است: ( در زبان فارسی شما می توانید این تست را با حروف مشابه انجام دهید مثلا ب پ و یا ج خ چ )

Il1-730x482

۲- انتخاب فونت با اندازه بزرگتر از ۱۲pt

در سال ۱۹۲۹ در یک مطالعه انجام شده موسوم به ” بهداشت خواندن” محققان در تلاش بودند تا مشخص کنند کدام اندازه از فونت می تواند بهترین انتخاب باشد. این بررسی بر روی ۶ ، ۸ ، ۱۰ ، ۱۲ و اندازه ۱۴pt متمرکز بود. محققان به این نتیجه رسیدند که اندازه فونت ۱۰pt کارآمدترین اندازه فونت است اما قطعاً از سال ۱۹۲۰ تا کنون بسیاری از معیارها و سلایق تغییر کرده است. با افزایش سطح کیفیت و رزلوشن صفحات نمایش راههای مطالعه مطالب نیز تغییر کرده است و محققان معتقدند که فونت ۱۶pt سابق ، ۱۲pt جدید است. یک مطالعه جدید نیز نشان داده است که یک فونت درشت تر می تواند رابطه بهتر با خواننده برقرار نماید. Medium  سایت مورد علاقه ماست که  دارای اندازه فونت ۲۲ است و بیشتر سایتهایی که دوست دارم در آنها فعالیت کنم نیز دارای اندازه فونت ۲۰ به بالا هستند. سایتهایی که در مقدمه به انها اشاره کردیم نیز اندازه فونتهای زیر را دارند:

  • Medium – ۲۲pt
  • ۳۷Signals: Signal vs. Noise – ۲۲pt
  • Zen Habits – ۲۱pt

در حالی که داشتن یک فونت بزرگتر از ۳۰pt اصلاً معنی ندارد باید بدانیم بسیاری از وبلاگ ها همچنان از فونت ۱۰ الی ۱۲pt استفاده می کنند. به شما توصیه میکنم اگر سایتی دارید یا وبلاگی را مدیریت می کنید اندازه فونت را به ۱۶pt برسانید و اگر از فونت ۱۸ استفاده میکردید آن را به ۲۲ برسانید. قطعاً با این کار شما تفاوت را احساس خواهید کرد.

۳- به طول خط توجه کنید

طول خط ایده آل باید در حدود ۵۰ الی ۷۵ کاراکتر داشته باشد مثال عکس زیر از سایت Zen Habits است که ۷۸ حرف دارد و حدود ۶٫۵ اینچ طول. طول خط تاثیرگذاری بالیی روی خوانندگان دارد و آنها در در مسیر Scan Path کمک میکند. اگر طول خط بیش از حد کوتاه باشد ریتم خواننده شکسته میشود چراکه چشم خواننده باید متداولا به اول صفحه و سمت چپ ( یا در فارسی سمت راست تصویر) برگردد. همچنین طول خط طولانی پیدا کردن ابتدا و انتهای یک جمله را پیچیده می کند  این خود سبب سردرگمی و پریدن از خطوط بطور تصادفی و مطالعه نکردن برخی خط ها می شود.

zen-habits

تحقیقات نشان می دهد که ذهن ناخوداگاه در هنگام پریدن به یک خط دیگر انرژی بیشتری را تلف خواهد کرد ذیلاً تعداد کاراکترهای هر خط در وب سایتهای معتبر دیده می شود:

  • Medium – ۷۵ characters
  • ۳۷Signals: Signal vs. Noise – ۷۶ characters
  • Zen Habits – ۷۸ characters

۴- فاصله بین حروف و کلمات

فاصله بین حروف بسیار مهم است چرا که خوانندگان متون شما را قادر می سازد تا در میان جملات راحت حرکت کنند.  جسیکا هیچ در مقایسه میان Helvetica  و Avenir به ما پیشنهاد استفاده از Avenir را می دهد چرا که فاصله بین حروف آن بیشتر است. نزدیک بودن حروف به هم سبب می شود افراد در تشخیص ظاهر حروف دچار اشتباه شوند.

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

email-campaign-comparison-730x453

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

Share on Facebook1Share on Google+0Pin on Pinterest0Share on LinkedIn0Tweet about this on Twitter
0 ۳ 24280 ۱۱ اسفند ۱۳۹۲ مقالات, وب اسفند ۱۱, ۱۳۹۲ The Next Web

3 نظر

  1. طراحی سایت برگ

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

    پاسخ

پاسخ دهید

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

اشتراک ایمیلی

جدیدترین مطالب پارسیش را در ایمیل خود داشته باشید.

فیس‌بوک

پربیننده‌ترین‌ها

منتخب سردبیر

آخرین مصاحبه‌ها

حمایت می کنیم

نماد اعتماد