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




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

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


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

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

·         تایپ فیس (typefaces)

·         سریف و سانزسریف (serif and sans serif)

·         فاصله ها

·         جهت ها

·         کنتراست (تضاد)

·         رنگ ها


در ادامه هر یک از این موارد را به دقت بررسی و به کاربردهای آنها در دنیای وب می پردازیم:

- تایپ فیس (typefaces) :

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

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


- سریف و سانس سریف (serif and sans serif) :

نوع قلم ها در تایپوگرافی به دو دسته تقسیم می شوند:

·         سریف (حروفی که انتهای آنها دارای کشیدگی است)

·         سانس سریف (حروفی که نگارش آنها ساده تر است و انتهای آنها بدون کشیدگی است)

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

در تگ های Html با استفاده از تگ font-family نوع فونت را می توان تعیین کرد.


- فاصله ها:

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

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


- جهت ها:

در دستورات زبان Html با استفاده از تگ هایی مانند text align، margin و padding براحتی می توان کلمات، جملات و تیترها را جابجا کرد و در سمت راست، وسط و یا چپ متن قرار داد. این نکته به خصوص جهت قرار دادن برخی از متن ها در وسط یک خط اهمیت زیادی دارد.


- کنتراست (تضاد) :

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

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


کنتراست در تایپوگرافی


- رنگ ها:

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

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


نکات مهم تایپوگرافی وب سایت ها:

در پایان چند نکته مهم در این زمینه را به شما آموزش می دهیم تا با رعایت آنها بتوانید وب سایت خود را هر چه زیباتر و کاربرپسند کنید:

·         سعی کنید در یک سایت از بیش از 3 نوع فونت استفاده نکنید. استفاده از فونت های زیاد در یک سایت درست نیست و چشم کاربر هنگام بازدید از وب سایت شما خسته می شود و موجب سردرگمی می گردد

·         بولد (BOLD) کردن تیترها و یا کلمات مهم درون متن ها می تواند به زیبایی هر چه بیشتر آن کمک کند.

·         استفاده از متن آزمایشی "لورم ایپسوم" (lorem ipsum) به طراحان کمک می کند تا بطور آزمایشی این متن را در صفحه مورد نظر خود قرار دهند و سپس تنظیمات مورد نظر از جمله نوع فونت، رنگ پیش زمینه و حروف، فاصله ها و غیره را بررسی کنند.

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

·         استفاده مناسب از Bullet Point ها ، سر تیترها ، رعایت فواصل بین کلمات و پاراگراف ها و همچنین رنگ و تضاد رنگ موجب هرچه جذاب تر شدن متن ها می گردد که این موضوع روی سئو وب سایت شما نیز تاثیر گذار است


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


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