تایپوگرافی ۹۰٪ طراحی وب سایت را تشکیل میدهد. دلیل اصلی مراجعه افراد به یک وب سایت خواندن متن است (تایپوگرافی در طراحی سایت)، خواه این به معنای یافتن اطلاعات مربوط به شرکت باشد یا خواندن مطالب مورد نظر. کلمات موجود در وب سایت شما اهمیت دارند، بنابراین نحوه ارائه این کلمات باید از اهمیت یکسانی برخوردار باشند.
هر وب سایت باید هدف و احساس تجارت را به بازدیدکنندگان خود و در یک دنیای دیجیتال منتقل کند، ساده‌ترین راه برای انجام این کار استفاده از تایپوگرافی است. تایپوگرافی کاملا اختصاصی است و می‌تواند به عنوان یک برند تجاری محسوب شود.
بنابراین اهمیت تایپوگرافی در طراحی سایت اینجا مشخص می‌شود که نشان‌دهنده صنعت و تجارت شما است. در ادامه بیشتر با مبحث تایپوگرافی در طراحی سایت آشنا می‌شوید پس همراه گروه تبلیغاتی فورسی در این مقاله باشید.
تایپوگرافی چیست؟
برای معنا کردن این واژه بهتر است ریشه‌ی این عبارت را بررسی کنیم. تایپوگرافی (Typography) از دو واژه‌ی تایپ و گراف (نمایش تصویری و هندسی) تشکیل شده است. بنابراین می‌توان متوجه شد که تایپوگرافی به هنر چیدمان تایپ و فونت برای رسیدن به یک زبان تصویری گفته می‌شود.
یا می‌توان گفت تایپوگرافی یعنی پردازش متن، نوشتن کلمه و حروف به شکلی که بار تصویری بالایی داشته باشد. کاربرد تایپوگرافی را در صنعت چاپ، گرافیک و طراحی بسیار دیده‌اید. برای نمونه در ادامه یکی از لوگو های معروف ایرانی که به کمک تایپوگرافی ساخته شده را مشاهده می‌کنید.
تایپوگرافی چگونه ایجاد می‌شود؟
اگر بخواهیم مراحل کار را بررسی کنیم همه چیز از یک نوشته ساده و تایپ شروع می‌شود. واژ‌ه‌ای تایپ می‌شود، بعد از آن با تغییر فونت، سایز و رنگ، نوشته ظاهر جدیدی می‌گیرد. سپس زمان هنرنمایی و نمایش خلاقیت طراح می‌رسد! باید با استفاده از کشیدگی‌ها، چرخش‌ها، خمیده کردن، ترکیب فونت و… ظاهر فونت اولیه به یک هنر مصور و تایپوگرافی تبدیل شود.
چرا تایپوگرافی در طراحی سایت مهم است؟
اهمیت تایپوگرافی در طراحی سایت به این منظوره که شما مولفه و جزئی فراتر از زیبایی سایت در اختیار دارید. این جمله بدین معناست که تایپوگرافی جزئی بسیار حیاتی برای ارتباط برقرار کردن با رابط کاربری است.
تایپوگرافی خوب یک سلسله مراتب بصری قوی ایجاد می‌کند، تعادل گرافیکی وب سایت را فراهم می‌کند و لحن کلی محصول را تعیین می‌کند. تایپوگرافی باید کاربران شما را راهنمایی و آگاه سازد، قابلیت خوانایی و دسترسی را بهینه کرده و از یک تجربه کاربری عالی اطمینان حاصل کند.
فواید تایپوگرافی:
- پیشرفت تکنولوژی و استفاده ی کاربران از نمایشگرهای با رزولوشن بالا (مانند رتینای اپل)،گزینه های بیشتری را برای تایپوگرافی فراهم کرده است.
- فراهم کردن فرصت برای نمایش هویت برند
- ارتقا و بهبود کیفیت محتوای متنی
- ابزاری برای ایجاد سلسله مراتب بصری (به طور خاص در زمینه CTAها کاربردی است)
تکنیک های تایپوگرافی
از جمله تکنیک های تایپوگرافی می توان به مواردی همچون فاصله ها، جهت ها، تایپ فیس (typefaces)، کنتراست ها (تضادها)، رنگ ها و سریف و سانس سریف (serif and sans serif) اشاره کرد.
در ادامه این مبحث هر کدام از این موارد را بررسی کرده و کاربردهای هر کدام از آن ها را در فضای وب سایت بیان خواهیم کرد.
تایپ فیس (typefaces) :
باید گفت که در واقع تعیین نوع فونت مورد استفاده در نوشته های یک سایت در این دسته قرار می گیرد که یکی از مهم ترین اصل های تایپوگرافی می باشد.
تایپ فیس که شکل ظاهری کاراکترهای الفبای مورد استفاده را تشکیل میدهد، یک مجموعه از یک یا چند فونت می باشد.
اهمیت این مسئله تا حدی زیاد می باشد که کارشناسان و متخصصان سئو سایت که وب سایت های اینترنتی را جهت هرچه بهتر دیده شدن در موتورهای جستجویی همچون گوگل و یا بینگ بهینه سازی می نمایند، نیز به اهمیت آن اشاره می کنند.
اهمیت تایپوگرافی برای طراحی وب سایت در دنیای اینترنت به حدی است که تا به امروز تعداد بسیار زیادی از فونت های مختلف برای استفاده در وب سایت ها طراحی و ارائه شده است.
به کمک این فونت ها می توان جذابیت سایت ها را بسیار بیشتر کرد و متن ها را با زیبایی بیشتری نوشت.
سریف و سانز سریف (serif and sans serif):
انواع قلم ها در تایپوگرافی دو دسته می باشد.
- سریف به حروفی گفته می شود که انتهای آن ها دارای کشیدگی است
- سانس سریف به حروفی گفته می شود که نگارش آن ها ساده تر بوده انتهایشان بدون کشیدگی است.
به صورت معمول از متن های سریف در بعضی تیترهای مهم و یا متن های نسبتا بلند و در نوشته های نشریات استفاده می کنند. و از سانس سریف معمولا در متن های اینترنتی و کامپیوتری کوتاه و یا متوسط استفاده می کنند.
اما در کل هیچ قاعده و قانونی برای استفاده از فونت های سریف و سانس سریف وجود ندارد.
با استفاده از تگ font-family در تگ های Html می توان نوع فونت را تعیین کرد.
اندازه ها و فاصله ها در تایپوگرافی
فاصله ها یکی دیگر از نکات مهم در تایپوگرافی یک وب سایت می باشد. فاصله های بین حروف یک کلمه و خود کلمات از اهمیت بسیار بالایی برخوردار است. با کمک تگ هایی همچون line height، word-spacing و letter-spacing در دستورات Html می توان این فاصله ها را تنظیم نمود.
با تنظیم درست این فاصله ها می توان به زیبایی بیشتر سایت ها کمک کرد، چرا که این فاصله ها می توانند تاثیر بسیار بالایی در جذابیت بصری متن ها از دید کاربران وب سایت ها داشته باشند.
رنگ پس زمینه
اگر سایز و نوع فونت درست انتخاب شده باشد اما رنگ پس‌زمینه (background-color) نامناسب باشد قطعاً این موضوع برای کاربر آزاردهنده خواهد بود. رنگ پس زمینه می‌توانند در UX تاثیر زیادی داشته باشد.
رنگ متن
رنگ متن (color) باید به گونه‌ای باشد که چشم را خسته نکند و متن به راحتی قابل خواندن باشد. علاوه بر این باید با رنگ پس‌زمینه هم تطابق داشته باشد. برای مثال رنگ در پس زمینه محو نشود.
چگونه نوع متن مناسب برای سایت خود را انتخاب کنیم؟
اکنون که با عناصر مختلف تایپوگرافی آشنا شدیم، بیایید در مورد روند انتخاب نوع حروف برای رابط کاربری خود صحبت کنیم. با داشتن تعداد زیادی از حروف و قلم ممکن است احساس غوطه‌وری در ما بوجود بیاید که البته انتخاب کردن بهترین از میان آنان ممکن است کمی کار دشواری باشد.
در این بخش به چند مورد اشاره می‌کنیم که ممکن است در تایپوگرافی در طراحی سایت به کمک شما بیایند:
به هدف و شخصیت اصلی سایت خود فکر کنید
آیا می‌خواهید وقتی کاربران برای اولین بار وارد وب سایت شما می‌شوند چه احساسی داشته باشند؟ آیا می‌خواهید از یک فضای دوستانه الگوبرداری کنید؟ آیا می‌خواهید سایت دارای سطح بالا، استقبال زیاد، بازیگوش یا جدی باشد؟ ضروری است که تایپوگرافی شخصیت سایت خود را مشخص کنید.
یک نقطه شروع خوب در مواجهه با این چالش‌ها این است که خصوصیات اصلی برند خود را مشخص کنید و شروع به جمع‌آوری حروف چاپی کنید که منعکس‌کننده این صفات هستند. آنجاست که می‌توانید روند سایت خود را مشاهده کنید.
استفاده از لحن مناسب
بسیار مهم است که چگونگی هماهنگی فونت با لحن پیام را در نظر بگیرید. به عنوان مثال، اگر می‌خواهید اطلاعات جدی یا مهمی را منتقل کنید، از یک قلم سبک استفاده کنید که هم کاملاً خوانا باشد و هم حواس‌پرتی خواننده را محدود کند.
تمامی عملکردها را کاملا در نظر بگیرید
نکته‌ای که بسیاری از طراحان غالباً از آن چشم‌پوشی می‌کنند انتخاب حروف چاپی متناسب با مرورگر وب است. کتابخانه‌های قلم متداول مانند فونت‌های گوگل، فایل‌های فونت مبتنی بر وب را ارائه می‌دهند که می‌توانند بدون هیچ مشکلی به طور کامل در مرورگر ارائه شوند.
نکته حرفه‌ای: هنگام بارگیری فونت‌های وب، هرگز از مجموعه کاراکترهای بسیار زیاد استفاده نکنید زیرا این کار نه تنها موجب کندی سایت می‌شود بلکه به علت شلوغی بیش از اندازه صفحه خواننده را از خواندن متن شما منصرف می‌کند.
الهام گرفتن
اگر مطمئن نیستید از کجا شروع کنید، کمی وقت بگذارید تا ببینید دیگران چه کاری انجام می‌دهند. چشم خود را به تایپوگرافی که در اطراف خود می‌بینید باز کنید. آیا می‌توانید الگوهای مشابهی را مشاهده کنید؟ آیا می‌توانید نمونه‌های خوب و بد تایپوگرافی را مشاهده کنید؟
حتی دنبال کردن هشتگ‌های تایپوگرافی در شبکه‌های اجتماعی یا جستجوی تایپوگرافی در Pinterest به شما ایده‌های خوبی درباره آنچه در آنجا وجود دارد می‌دهند.
تست گرفتن
بهترین راه برای اینکه ببینید کدام فونت طرفدار بیشتری دارد این است که صبر کنید و آزمایش کنید. با گرفتن بازخوردهای مختلف از کابران خود می‌توانید نتیجه بگیرید که چه کارهایی را باید انجام دهید و چه کارهایی را به هیچ‌وجه نباید سمتشان بروید.