عنوان مقاله :

تایپوگرافی وبسایت های فارسی

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 10 دی 1394
دسته بندی ها : طراحی وب , رابط کاربری

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

 نوع فونت 

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

تونستین بخونین ؟ راحت بود ؟ چشاتون خسته نشد ؟ خب حالا متن زیر رو بخونید . 

حالا چطور بود ؟ خوندش راحت تر شده نه ؟ چشاتونم کمتر اذیت میشه . فک کنم منظورم از نوع فونت رو به خوبی درک کرده باشید . پس همیشه سعی کنید در طراحی هاتون از فونت های استفاده کنید که برای وب بهینه سازی شده باشن . خوب این یعنی چی ؟ فکر کنم همه اتون میدونید که فونت های زیادی به زبان فارسی برای استفاده در وبسایت ها وجود نداره . تعداد خیلی کم شاید 10 تا یا یکم بیشتر . اینکه چرا بیشتر نیست رو نمیخوام واردش بشم ، به بحث ما هم مربوط نمیشه !  پس دقت داشته باشید که باید از همین تعداد بهترینشو برای کار خودتون انتخاب کنید. 

اندازه فونت

برای اندازه فونت هم بدونه توضیح مثالی میزنم چون فک کنم مثال تاثیرش بیشتر باشه :) ! در زیر یک فونت با اندازه های متفاوت قرار داره . 

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

ساختار شماره 1 

به نظرم مشکل خواصی تو خوندن متن بالا ندارید و یه متن معمولی به نظر میاد و اصولا یه ساختار قابل قبول داره بکگراند سفید با فونت مشکی حالا در زیر فونت رو به آبی و بکگراند رو قرمز تغییر میدم ! ببنید چه اتفاقی میوفته .

ساختار شماره 2

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

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

کلیک یاب 

ای نتورک

من یک طراحم

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

امیدوارم منظورمو در این پست به خوبی رسونده باشم و این پست مورد استفاده اتون قرار گرفته باشه .حتما منتظر شنیدن نظراتتون هستم و اگه مطلب رو نگفتم حتما بگین تا به این پست اضافه کنم . 

مقالات پیشنهادی

20 نمونه از زیباترین پنل های مدیریت

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

من یک طراح و برنامه نویس وب هستم ولی کاری ندارم

سلام خدمت همه همراهان و عزیزان وبسایت راکت ، در این مدتی که راکت راه اندازی شد افراد زیادی سوال کردن که من فلان زبان و فلان کار رو بلدم اما چطور میتون...

Elton - کیت UI فروشگاهی

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

وب سایت های الهام بخش برای طراحی | هفته سوم خرداد

امروز قصد داریم یک سری وبسایت های خارجی که بطور کاربردی ، زیبا و قدرتمند طراحی شدن رو براتون قرار بدیم تا شما بتونین با طریقه طراحی اونها آشنا بشین یا...

دیدگاه های ارزشمند شما

سیامک مختاری | 1 سال پیش

اگر از ارائه یا مقاله دیگران استفاده می‌کنید باید ذکر منبع کنید، کار خودتون ارزشش پایین میاد. منبع اصلی مقاله شما: https://www.slideshare.net/siamakmokhtari75/typography-56439928?from_m_app=ios

admin | 1 سال پیش

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

vahid mehr | 1 سال پیش

با تشکر از نکاتتون
استفاده کردم،

علی کنکوری | 1 سال پیش

سلام سایت خیلی خوبی دارین
سایتتون رو بوکمارک کردم روزانه سر میزنم ( لطفا درباره وردپرس هم مطلب بذارید )
تشکر یا حق

admin | 1 سال پیش

مرسی از نظرتون
از هفته های آینده پست های وردپرسی هم آماده میشه .