انسان موجودی اجتماعی است، از همان دورانی که در غار زندگی می کرد و برای رساندن پیام خود بر روی دیوارهای آن نقش و نوشته هایی را حک می کرد تا به حال که از وسایل دیجیتال و پیشرفته برای برقراری ارتباط استفاده می کند.
فضای مجازی از این قضیه نیز مستثنی نیست. ارتباط نقش بسیار مهمی در طراحی وبسایت ایفا می کند.
چرا که تایپوگرافی حدود 90% از بحث طراحی وبسایت را تشکیل می دهد. مهمترین دلیل مراجعه افراد به یک وب سایت خواندن محتوا و متن داخل سایت و در نهایت رفع نیازشان است.
کاملا واضح است که کلمات در وبسایت شما از اهمیت بالایی برخوردار هستند و همواره باید به نحوه ارائه این کلمات توجه خاصی داشته باشید.
هر وبسایت می بایست احساس و هدف تجارت به بازدیدکنندگان خود در فضای دیجیتال انتقال بدهد، آسان ترین راه موجود استفاده از تایپوگرافی است. تایپوگرافی یک ویژگی کاملا اختصاصی است و می تواند به عنوان یک برند تجاری محسوب گردد.
البته که کاربرد اصلی آن در زمینه طراحی می باشد اما می بایست که یک طراح وبسایت برای طراحی نمودن رابط کاربری به آسانترین روش مرتبط با تایپوگرافی آشنا باشد. چرا که در سال های اخیر تایپوگرافی در طراحی سایت تغییرات بسیار عظیمی داشته است.
در این مقاله به این سوالاتی که برایتان در این زمینه پیش آمده نظیر
تایپوگرافی چیست؟
چه کاربردی دارد؟
جایگاه آن در طراحی سایت به چه صورت است؟
می پردازیم. پس تا پایان مقاله همراه سایت ساز بوم باشید.
تایپوگرافی چیست؟
تایپوگرافی (Typography) از ترکیب دو واژه‌ی تایپ و گراف (نمایش تصویری و هندسی) ایجاد شده است. همچنین تعریف دیگری که برای آن می توان به کار برد این است که تایپوگرافی یعنی پردازش متن، نوشتن کلمه و حروف به شکلی که بار تصویری بالایی داشته باشد. اما در تعریف کامل تر می توان گفت تایپوگرافی هنری است که در آن طراح می خواهد با تغییر عناصر متن نظیر سایز ، فاصله حروف، فرم و شکل حروف، فاصله بین خطوط، پاراگراف بندی و… زبان تصویری برای تایپ به وجود آورد.
کاربرد تایپوگرافی در صنعت چاپ، گرافیک و طراحی بسیار می باشد.
چگونگی ایجاد تایپوگرافی
اگر برای شما نیز این سوال مطرح شده است که مراحل کار تایپوگرافی به چه شکل است باید گفت همه چیز از یک نوشته ساده و تایپ شروع می‌شود. کلمه ای تایپ می‌شود، بعد از آن با تغییرات مرتبط با فونت، سایز، رنگ، نوشته ظاهر جدیدی به خود می‌گیرد. سپس زمان نشان دادن توانمندی و هنرنمایی و خلاقیت طراح فرا می‌رسد! می بایست با استفاده از ویژگی های مانند کشیدگی‌ها، چرخش‌ها، خمیده کردن، ترکیب فونت و به طور کلی تغییر واحدهای اندازه گیری در CSS، ظاهر فونت اولیه به یک هنر مصور و تایپوگرافی تبدیل می گردد.
کاربرد تایپوگرافی
تایپوگرافی در طراحی گرافیک (لوگو، پوستر، بیلبورد و جلد کتاب) ساخت تیتراژ و عنوان فیلم، اشیای پیرامون، لوازم شخصی، البسه و…مورد استفاده قرار می گیرد.
تایپوگرافی با خطاطی و خوشنویسی بسیار تفاوت دارد، هر چند برای یک طراح تایپوگرافی این امکان فراهم که از خطاطی و خوشنویسی در تایپوگرافی نیز استفاده نماید.
البته ممکن است این طور به نظر برسد که این هنر صرفا در کارهای گرافیکی و طراحی لوگو کاربرد دارد. اما اگر شما یک طراح وبسایت هستید می بایست برای طراحی رابط کاربری و ایجاد بهترین UX تا حدودی با این علم آشنا باشید وجود این موارد در سایت موجب افزایش هزینه طراحی سایت خواهند شد.
مزایای تایپوگرافی
-
ایجاد شناخت برند
علاوه بر اینکه تایپوگرافی خوب باعث افزایش شخصیت وبسایت شما می شود، مخاطبان شما اقدام به، به خاطر سپردن حروف چاپ شده موجود در سایت با نام تجاری شما می کنند.
-
تاثیر گذاری در تصمیم گیری
تایپوگرافی تاثیر بسیار عمیقی در نحوه درک و هضم مخاطبان از اطلاعات منتقل شده توسط متن را دارد. به هر میزانی که تایپوگرافی شما جذاب تر و عامه پسند تر باشد مخاطب آسان تر با متن و محتوا ارائه شده ارتباط برقرار می کند.
-
جلب توجه مخاطب
تایپوگرافی زیبا و جذاب منجر به افزایش علاقه مخاطب به وبسایت و مطلب ارائه شده توسط شما می شود و به جای اینکه مدت زمان کمی در وبسایت شما زمان بگذارد، وقت بیشتری را صرف می کند.
بنابراین این مسئله بسیار اهمیت دارد که سایت شما از نظری بصری ویژگی های مناسبی را در بر بگیرد.
انتخاب متن بر اساس تایپوگرافی سایت
- مشخص کردن اهداف سایت
با ورود کاربر به سایت می خواهید چه احساسی را دریافت کنند؟
مدنظرتان یک فضای دوستانه و یا بالعکس کاملا رسمی است؟
با توجه به پاسخ سوالات فوق نوع لحن تایپوگرافی را مشخص نمایید.
-
داشتن لحن مناسب
هماهنگی میان فونت و لحن پیام بسیار اهمیت دارد. برای مثال، اگر قصد انتقال اطلاعات مهمی را دارید، می بایست از فونتی استفاده کنید که علاوه بر خوانا بودن منجر به پرت شدن حواس مخاطب نشود.
-
در نظر گرفتن تمام زوایا
مسئله ای که ممکن است نادیده گرفته شود، انتخاب حروف مناسب با جستجوگر ها است. توجه داشته باشید که در زمان بارگیری فونت‌ها، از کاراکترهای زیاد استفاده نکنید؛ چرا که باعث کندی سایت می‌شود و همچنین به علت شلوغی صفحه کاربر از خواندن متن شما منصرف می شود.
-
بررسی ایده های جدید
اگر همچنان اطمینان ندارید که چگونه شروع کنید، اقدامات رقبا خود را در این زمینه مورد بررسی قرار دهید. از ایده های افراد الهام بگیرید.
-
آزمون خطا
یکی از بهترین روش های پیدا کردن فونت مناسب برای سایت آزمایش کردن است، پس از پیاده سازی فونت جدید بر روی سایت با دریافت واکنش های کاربران به نتیجه مدنظرتان برسید.
قوانین تایپوگرافی در طراحی وبسایت
-
خوانا بودن فونت
اکثر تایپ فیس ها منجر می شوند که حروف شبیه به هم به راحتی قابل خواندن نباشند. به همین دلیل هنگامی که می خواهید نوع فونت را برای طرحتان انتخاب نمایید، مطمئن شوید که آنها در بافت های متنی متفاوت و تجربه کاربری به درستی عمل می کند و برای مخاطب مشکل ایجاد نمی کند. این نوع فونت ها نباید مانع خوانایی متن شوند.
-
تعداد فونت ها در حداقل ترین حالت ممکن
اگر شما بیش از سه نوع فونت متفاوت در وبسایت خود استفاده نمایید نه تنها تجربه کاربری خوبی دریافت نخواهید کرد بلکه تاثیر به شدت منفی در ظاهر وبسایت شما می گذارد و حس غیرحرفه ای بودن را به مخاطب القا می کند.
همواره به این نکته توجه داشته باشید که استفاده نمودن از فونت های متفاوت با سبک و اندازه های مختلف طرح شما را بهم می ریزد. بنابراین برای پیشگیری از وقوع چنین شرایطی می بایست تعداد فونت های مورد استفاده را به حداقل برسانید.
اصولا یک فونت کفایت می کند و بیش از آن زیاد است. پس از انتخاب نمودن فونت در کل سایت به آن پایبند باشید.
-
استفاده از فونت های استاندارد
سرویس های ایجاد فونت مانند گوگل یا Typekit فونت های بسیار جذابی دارند که منجر می شود طرح های شما ظاهری جذاب، چشمگیر و جدید به خود بگیرند. استفاده نمودن از این سرویس ها نیز بسیار آسان است.
به طوریکه در گوگل:
- فونت مورد نظر و دلخواه خود را انتخاب نمایید.
- کد را ایجاد نمایید و در بخش head سند خود پیست کنید.
با انجام این دو کار، حال می توانید از فونت خود استفاده نمایید.
گاهی اوقات برای ایجاد برندینگ و تجربه جذاب از سایت احتمال دارد از فونت های سفارشی استفاده نمایید اما باز هم توصیه ما به شما این است که از فونت های استاندارد استفاده نمایید چرا که یک تایپوگرافی خوب باعث جذب مخاطب به محتوا تولید شده شما می گردد.
-
محدود کردن طول خطوط
داشتن کاراکتری مناسب و اصولی در هر خط از موارد مهم و کلیدی برای خوانایی متن شماست. برای اینکه تجربه خوبی را برای مخاطب خود ایجاد کنید به ازای هر خط فقط از 60 کاراکتر استفاده نمایید.
-
انتخاب یک تایپ فیس با کارکرد مناسب و اصولی
امروزه کاربران فضای دیجیتال از طریق دستگاه های مختلف که اندازه صفحه نمایش آنها با یکدیگر متفاوت است وبگردی می کنند. اکثر رابط های کاربری به عناصر متنی با اندازه های مختلف نیازمند هستند.
پس تایپ فیسی که انتخاب می نمایید می بایست بر روی صفحات نمایش کوچکتر نیز خوانایی داشته باشد. جدا از استفاده نمودن از فونت هایی که اسکریپت شکسته دارند خودداری کنید. هرچند این نوع فونت ها جذابیت دارند اما خواندن آنها بسیار دشوار است.
-
حروف انگلیسی را بزرگ ننویسید
در نوشته هایی که همه حروف انگلیسی در آن به صورت بزرگ نوشته می شوند برای بافت هایی که در برگیرنده خواندن نیستند (مثل تیتر یا سرنام ها) می تواند ایده خوبی و جذابی باشد، اما هنگامی که می خواهید خواننده متنی را بخواند و معنی آن را به دقت درک کند نباید از حروف بزرگ استفاده نمایید.
شما به عنوان یک طراح می بایست خوانایی نوشته هایتان را بهبود ببخشید؛ چرا که نوشتن متن با حروف بزرگ سرعت اسکن کردن را کاهش داده و در نهایت خوانایی متن را شدیدا دچار اشکال می کند.
-
رعایت فاصله بین خطوط
در تایپوگرافی یک کلمه برای فضای بین دو خط در متن وجود دارد که و به آن leading یا ارتفاع خط گفته می شود. با افزایش یافتن ارتفاع خط فضای سفید عمودی بین خطوط افزایش می یابد و خوانایی متن بهتر می شود.
بنابراین مناسب است که ارتفاع خطوط را 30% بیشتر از ارتفاع کارکتر ها حفظ نمایید تا خوانایی نوشته شما بهتر شود.
استفاده مناسب و اصولی از فضای سفید موجود در بین پاراگراف ها می تواند درک متن را برای کاربر تا 20% افزایش دهد.
-
هیچگاه متنی را با قرمز و سبز رنگ نکنید
از مشکلات رایجی که خیلی از افراد بخصوص آقایان با آن درگیر هستند کوررنگی می باشد. به همین علت توصیه می گردد از رنگ هایی استفاده نمایید که برای این دسته از افراد نیز قابل تمایز باشد و به راحتی محتوا شما را مورد مطالعه قرار دهند.
بنابراین همواره از استفاده نمودن از رنگ های سبز و قرمز به تنهایی برای انتقال اطلاعات خودداری نمایید.
-
استفاده از رنگ ها با کنتراست مناسب
هیچگاه نباید رنگ بک گراند و متن شما همسان باشد. به هر میزان که متن شما بیشتر به چشم بیاید و قابل دیدن باشد کاربر سریعتر با آن ارتباط برقرار می کند و و مورد مطالعه قرار می دهد. به طور کلی روانشناسی رنگ در طراحی سایت نقش بسزایی در تعامل با کاربر دارد.
نسبت کنتراست برای متن و پس زمینه می بایست بدین شرح باشد:
- متن های کوچک می بایست نسبت کنتراست آن نسبت به پس زمینه 5:1 باشد.
- متن های بزرگتر می بایست نسبت کنتراست آن نسبت به پس زمینه 3:1 باشد.
پس از اینکه رنگ مد نظر خود را انتخاب نموده اید، می بایست آن را برای کاربران نهایی و دستگاه های مختلف مورد بررسی قرار دهید، اگر در هنگام تست متوجه شدید که خواندن با سختی همراه است سریعا اقدامات مرتبط برای رفع آن مشکل را انجام دهید.
-
به ندرت از متن های چشمک زن استفاده کنید
متن و محتوایی که همواره درحال تغییر و حرکت است و مدام چشمک می زند منجر به عدم تمرکز و حواس پرتی در بعضی از افراد می شود.
به عنوان حرف آخر می بایست گفت تایپوگرافی از مسائل بسیار مهمی است که در هنگام طراحی وب سایت باید به آن توجه داشته باشید و انتخاب درست و اصولی تایپوگرافی حس حرفه ای بودن و جدید بودن را در مخاطب ایجاد کند، می توان گفت به صورت غیر مستقیم هم بر سئو وب سایت تاثیر خواهد گذاشت برای پیدا کردن روش های مستقیم تاثیر گذاری بر روی سئو می توانید از آموزش افزونه Yoast SEO دیدن فرمایید.
اگر شما در انتخاب فونت های خود توجه کافی نداشته باشید باعث می شود که مخاطب زمان زیادی را در سایت شما صرف نکند و به راحتی تمرکز خود را از دست بدهد.
در هنگام انتخاب تایپوگرافی می بایست به مواردی مانند خوانایی، قابل درک بودن توجه کافی داشته باشید. تایپوگرافی ارتباط بسیار نزدیکی با محتوا دارد و باید به بهترین صورت ممکن انتخاب گردد.
اصطلاحات مهم تایپوگرافی
-
تایپ فیس (typeface)
تایپ فیس، طراحی کلی مجموعه‌ای از کارکتر‌ها و نشانه‌ها در کنار یکدیگر است. اینکه هر حرف از الفبا به چه شکلی نوشته شود مربوط به تایپ فیس آن است.
-
سریف (serif) و سانس سریف (sans serif)
فونت‌ها را می توان به دو دسته سریف و سانس سریف (بدون سریف) تقسیم کرد.
فونت‌های سریف انتهای حروف کشیده ای دارند ولی فونت‌های سانس سریف هیچ کشیدگی در انتهای حروف ندارد.
کاربرد این فونت ها در الفبای لاتین است.
-
فاصله‌ها
از مواردی که در تایپوگرافی اهمیت بالایی دارد، فاصله است. فاصله بین کلمات و بین خطوط تاثیر بالایی روی خوانایی و جذابیت متن دارد. فاصله کم و شلوغ شدن صفحه خوانایی متن را کاهش می دهد و کاربران تمایل خود را برای دنبال کردن محتوای شما از دست می دهند.
-
جهت (Alignment)
جهت نوشته را از چپ به راست یا از سمت راست به چپ بر اساس زبان مدنظر خود بچینید. همچنین می توانید نوشته را نیز در وسط قرار دهید. کاربرد این گزینه برای زمانی است که قصد تاکید بیشتر برای یک بخش از متن را دارید.
طبق عادت در انتهای هر مقاله آموزشی، نکته ای مهم برای پیشرفت و توسعه سریعتر وب سایت گفته می شود. وجود درگاه پرداخت چه در وب سایت های فروشگاهی و چه در وب سایت هایی که خدمات خاصی را ارائه می دهند الزامی است. شما می توانید با مراجعه به مقاله درگاه پرداخت در وردپرس، و مطالعه آن، درگاه وب سایت خود را به راحتی راه اندازی کنید.
