تایپوگرافی در طراحی سایت

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

تایپوگرافی چیه؟

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

 

تایپوگرافی چگونه ایجاد می‌شود؟

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

 

استفاده از تایپوگرافی در طراحی سایت

استفاده از تایپوگرافی در طراحی سایت کاربردهای فراوانی دارد. تایپوگرافی (Typography) مجموعه ای از تکنیک ها و گونه ای هنر می باشد برای زیباتر و خواناتر شدن نوشته ها و متن های وب سایت ها به کار می رود.

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

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

جذابیت بصری تایپوگرافی ها امروزه به مراتب بهتر از گذشته است چرا که با وجود ابزارها، نرم افزارها و اپلیکیشن های متعدد همچون  Google Fonts،  Font Awesome، Adobe Typeface،   Apple Typefaceو غیره که در اختیار طراحان سایت وجود دارد و باعث می شود که قواعد تایپوگرافی بهتر از پیش در سایت های اینترنتی قابل اجرا باشد.

 

 نکات مهم در تایپو گرافی طراحی سایت

ساده اما تاثیرگذار

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

نکات زیر را هنگام طراحی و استفاده از تایپوگرافی در طراحی سایت در نظر داشته باشید:

 

افزایش اندازه فونت

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

 

اندازه ها و فاصله ها در تایپوگرافی

فاصله ها یکی دیگر از نکات مهم در تایپوگرافی یک وب سایت می باشد. فاصله های بین حروف یک کلمه و خود کلمات از اهمیت بسیار بالایی برخوردار است. با کمک تگ هایی همچون line height،  word-spacing و letter-spacing در دستورات Html می توان این فاصله ها را تنظیم نمود.

با تنظیم درست  این فاصله ها می توان به زیبایی بیشتر سایت ها کمک کرد، چرا که این فاصله ها می توانند تاثیر بسیار بالایی در جذابیت بصری متن ها از دید کاربران وب سایت ها داشته باشند.

 

Superimposed/Shared Space

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

 

تعداد فونت ها باید حداقل باشد!

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

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

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

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

مثال آن می تواند برای شما به شکل زیر باشد:

Web Design و Web Design ( فونت Verdana و Georgia ) 
Web Design و  Web Design (فونت  Tahoma  و  Courier)

 

توجه به مرورگر اینترنت در تایپوگرافی در طراحی سایت :

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

ظرافت فونت در  تایپوگرافی طراحی سایت

پس از انتخاب فونت و مقیاس مناسب برای آن ها، نوبت به رعایت ظرافت ها در تایپوگرافی طراحی سایت می رسد. یکی از این موارد استفاده از ligatures توسط فایل های CSS می باشد. با استفاده از ligatures می توان به تایپوگرافی جلوه بخشید و تأثیر آن را در جذب مخاطب دوچندان کرد. البته حواستان باشد که در استفاده از آن ها افراط نکنید، چرا که زیاده روی در به کاربردن ligature ها منجر به دل زدگی مخاطب  و صرف نظر کردن او از ادامه ی خواندن مطالب وب سایت شما می گردد.

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

طراحی تایپوگرافی نیازمند دانش و تخصص در این زمینه بوده و البته نرم افزارهای کارآمد زیادی نیز جهت کمک به طراحان در این زمینه پدید آمده است. از جمله ی این نرم افزارها می توان به نرم افزار های Prototype ،Adobe’s Project Faces و Font Ark اشاره کرد.

 

توجه به طرح حروف در تایپوگرافی در طراحی سایت :

طرح حروف (typeface) در واقع طرحی است که در درون قالبی که طراح ایجاد نموده است وجود دارد . ایا در طرح اصلی سواش ها (swash تکنیک نوشتاری برای طراحی لوگو) و لیگاچرها موجود هستند ؟

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

 

توجه به فهرست فونت برای تایپوگرافی در طراحی سایت :

آیا واقعا یک فهرست فونت اُپن تایپ ارائه شده است ؟ شما هرگز قادر نخواهید بود از گزینه های اُپن تایپ استفاده کنید اگر فونت تروتایپ (truetype) ارایه شده باشد ، در نتیجه این مسئله بسیار مهم است . حتی اگر فهرست فونت اُپن تایپ ارائه شده است ، آیا علائمی که شما به آنها نیاز دارید به درستی در فهرست فونت موجود است ؟ احتمالا خیر .