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

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

زبان و متن های نوشته شده یکی از مهم ترین وسایل برقراری ارتباط برای ما انسان ها محسوب می شود. روزی را تصور کنید که نتوانید از زبان تان برای ارتباط برقرار کردن استفاده کنید. چه وضع وحشتناکی! اینطور نیست؟

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

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

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

در این مقاله می خواهیم با هم یک سری قانون که به بهبود خوانایی و درک متن کمک می کند را مرور کنیم.

1. تعداد فونت هایی که در متن استفاده می کنید را به حداقل برسانید!

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

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

2. سعی کنید از فونت های استاندارد استفاده نمایید!

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

به عنوان مثال گوگل را در نظر بگیرید:

• هر فونتی که دوست داشتید را انتخاب کنید.
• کد را ایجاد نمایید و آن را در بخش Head سند خود پیست کنید.
• خوب کارتان تمام شده است؟

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

3. طول خطوط را محدود کنید!

داشتن کاراکترهای مناسب در هر خط یکی از موارد کلیدی برای خوانایی متن های شماست. اگر می خواهید خوانندگان تان تجربه خوبی از محتوایتان داشته باشند و متن را به راحتی بخوانند به ازای هر خط فقط از ۶۰ کاراکتر استفاده کنید.

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

وقتی می خواهید بر روی دستگاه های موبایلی کار کنید به دنبال ۳۰ الی ۴۰ کاراکتر در هر خط باشید.

دو نمونه‌ی زیر سایت هایی را بر روی دستگاه موبایلی نشان می دهد. گزینه اول از ۵۰ الی ۷۵ کاراکتر در هر خط استفاده کرده و سایت دوم از ۳۰ الی ۴۰ کاراکتر (یعنی مقدار بهینه) استفاده کرده است. در طراحی وب برای اینکه بتوانید به تعداد بهینه کاراکترها در هر خط دست پیدا کنید می توانید عرض بلوک های متنی را با EM یا پیکسل محدود سازید.

4. تایپ فیسی را انتخاب کنید که در اندازه های مختلف کارکرد خوبی دارد!

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

به عنوان مثال شما نمی توانید برای متن دکمه هایتان از فونتی استفاده کنید که اندازه اش با فونت فرم ها یکی است. به همین خاطر باید تایپ فیسی (Typeface) را انتخاب کنید که در اندازه های مختلف و وزن های متفاوت کارکرد خوبی دارد و به حفظ خوانایی و کاربردی بودن متن ها کمک می کند. تایپ فیسی که انتخاب می کنید باید روی صفحات نمایشِ کوچک تر هم خوانایی داشته باشد.

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

5. از فونت هایی استفاده کنید که حروف در آنها قابل تشخیص و تمییز است!

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

6. همه حروف را به صورت بزرگ ننویسید (در متن های انگلیسی کاربرد دارد)!

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

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

7. فضای بین خطوط را به حداقل نرسانید!

در تایپوگرافی یک واژه خاص برای فضای بین دو خط از متن داریم که به آن leading یا ارتفاع خط می گوییم. با افزایش ارتفاع خط فضای سفید عمودی بین خطوط افزایش پیدا می کند و خوانایی متن هم بهتر می شود.

به عنوان یک قانون کلی بهتر است ارتفاع خطوط را ۳۰ درصد بیشتر از ارتفاع کاراکترها نگه دارید تا خوانایی متن بهتر شود. استفاده درست از فضای سفید بین پاراگراف ها می تواند درک متن را برای کاربر تا ۲۰ درصد افزایش دهد. مهارت استفاده درست از فضای سفید باعث می شود کاربر محتوا را راحت تر درک کند.

8. اطمینان حاصل کنید که کنتراست رنگی مناسبی دارید!

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

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

• متن های کوچک باید نسبت کنتراست شان نسبت به بک گراند ۵:۱ باشد.
• متن های بزرگ تر باید نسبت کنتراست شان نسبت به بک گراند حداقل ۳:۱ باشد.

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

9. از رنگ کردن متن به صورت قرمز یا سبز خودداری کنید!

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

10. از متن های چشمک زن استفاده نکنید!

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

سخن نهایی:

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

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

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

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

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

چاره کار در استفاده از افزونه فونت ایران در مرورگر کروم هست. این افزونه یا همان Extension به شما این امکان رو میده که بتونید به آسانی فونت سایت های مختلف رو در مرورگر کروم تغییر بدین، اندازه نوشته ها رو بزرگ و کوچیک بکنید.

تغییر فونت سایت ها در مرورگر کروم

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

یکی از ویژگی های خوب این افزونه اینه که برای هر وب سایتی می تونید تنظیمات متفاوتی اعمال کنید، مثلا می تونید مشخص کنید که گوگل چه فونتی داشته باشه با چه سایزی و فونت فیسبوک فونتش یه فونت دیگه باشه با اندازه دلخواه شما، این ویژگی در نوع خودش بی نظیره و باعث میشه به اون سایت هایی که زیاد سر میزنیم ظاهر متفاوت تری ببخشیم…

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

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

نوشته تغییر فونت سایت ها در مرورگر کروم با افزونه رایگان فونت ایران اولین بار در فونت سرا. پدیدار شد.

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

این کار بسیار آسان است و شما تنها با چند دقیقه ای وقت گذاشتن می توانید این کار را انجام دهید. روش کار بدین صورت است که شما بایستی اول فونت مورد نظرتان را در وب سایت لود نمائید و سپس به استایل سایت خود بفهمانید که این فونت را به عنوان فونت اصلی در نظر بگیر. اما توجه داشته باشید که هر فونتی برای استفاده در وب مناسب نیست و شما باید یک فونت مناسب را انتخاب کنید.

از فونت های فارسی محبوب و کارآمد برای وب سایت ها می توان فونت یکان، فونت ایران سنس، فونت ایران یکان و… اشاره کرد که امروزه در وب فارسی استفاده می شوند.

مراحل اضافه کردن فونت به سایت:

۱- آپلود فونت در یکی از دایرکتوری های سایت:

شما بایستی ابتدا فایل فونت را در یک دایرکتوری مشخص در وب سایت خود آپلود نمائید.

توجه داشته باشید که فونت های مخصوص وب باید فرمت های TTF, OTF, WOFF, WOFF2, SVG, EOT را داشته باشد که هر فرمت می تواند در مرورگر مشخص یا دیوایش مشخصی کاربرد داشته باشد. که در تصویر زیر می توانید لیست این موارد را مشاهده کنید.

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

body {font-family: iransans , Tahma;}

۲- لود فایل های فونت و تعریف آن:

شما بایستی به استایل سایت خود فونت های دلخواه را لود نمائید تا در تمامی وب سایت شما این فونت قابل شناسایی باشد. این کد های بایستی در فایلی با پسوند CSS اضافه شود.

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

۳- اعمال فونت:

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

body {font-family: FontName , Tahma;}

فونت های گوگل:

گوگل سرویسی ارائه میدهد به نام Google Fonts که فونت های بسیاری را در اختیار شما قرار میدهد تا بدون مشکل بتوانید از فونت های مختلف در وب سایت استفاده نمائید. بیشتر هم فونت های لاتین در ان وجود دارد اما می توان چند فونت فارسی نیز پیدا کرد.

برای این منظور کد زیر را در فایل CSS خود اضافه کنید:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

امید است این آموزش مفید واقع شده باشد.

از سایت ما می توانید فونت های مخصوص وب سایت را مشاهده نمائید.

نوشته آموزش نحوه اضافه کردن فونت دلخواه به صفحات وب سایت اولین بار در فونت سرا. پدیدار شد.

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

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

معرفی بهترین فونت های مخصوص صفحات وب

وب فونت ایران سنس

فونت فارسی IranSans را می توان محبوب ترین وب بهترین فونت فارسی برای وب سایت دانست که بین کاربران ایرانی بسیار بسیار محبوب است، این فونت توسط جناب آقای مسلم ابراهیمی در سال ۱۳۹۳ طراحی شد. وب فونت ایران سنس رایگان نیست و برای استفاده از این فونت بایستی آن را خریداری کنید، البته قیمتش مناسب هست و ارزشش خرید دارد. این فونت از خوانایی بیشتری برخوردار است و نوشته های سایت با وضوح بیشتری قابل روئیت است.

وب فونت ایران یکان

این فونت نیز جزء محبوب ترین فونت های مخصوص وب است که این فونت نیز توسط جناب آقای مسلم ابراهیمی در سال ۹۵ طراحی شده است. پایه اصلی این فونت از فونت های یکان و فونت ایران سنس است. این فونت نیز استاندارد لازم برای استفاده در صفحات وب را دارد و نوشته ها را بصورت خوانا و زیبا نمایش می دهد. فونت ایران یکان رایگان نیست ولی می توانید با قیمت کمی آن را خریداری کنید.

وب فونت انجمن

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

وب فونت دانا

طراحی این فونت در سال ۹۸ به اتمام رسید، وب فونت دانا توسط استاد گرامی جناب آقای مسلم ابراهیمی طراحی شده است. طراحی این فونت با حساسیت های بسیار بالایی انجام شده است و نسبت به سایر فونت ها مهندسی تر، دقیق تر و حرفه ای تر است. این فونت وزن بندی بسیار بالایی دارد و می توانید در ۱۰ وزن مختلف از ان استفاده کنید، این فونت بی شک مناسب استفاده در صفحات وب خواهد بود. این فونت نیز رایگان نیست و بایستی آن را خریداری کنید.

وب فونت ایران سنس دست نویس

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

فونت ایران شارپ

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

فونت ایران

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

فونت یکان وب

فونت یکان یکی از محبوب ترین فونت های فارسی است که می توانید در وب از آن بهره بگیرید. فونت یکان کاملا رایگان است و سالیان سال این فونت از محبوب ترین فونت های فارسی بوده است. امروزه وب سایت های زیادی را می بینیم که این فونت زیبا را استفاده کرده اند. اگر نمی خواهید برای خرید فونت هزینه بکنید به شما توصیه میشود از فونت یکان رایگان استفاده کنید.

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

نوشته بهترین فونت های فارسی برای استفاده در وب سایت اولین بار در فونت سرا. پدیدار شد.