خب تو این مقاله قراره که به موضوع جذاب و دل انگیز تایپوگرافی بپردازیم! بهترِ بدونید که ما دائماً داریم توی تلفن ها، کتاب ها و وبسایت ها کلمات نوشتاری رو هضم میکنیم. ما معمولاً راجع به این که این کلمات چقدر قدرتمند هستن فکر میکنیم اما کمتر پیش میاد نقش اون طراحی که پشت صحنه وجود داره رو در نظر بگیریم.
در پشت صحنه این ماجرا طراح ممکن ساعت ها وقت گذاشته باشه تا رابطه بین زبان بصری با زبان نوشتاری رو طرح بزنه.
این مقاله قراره هرچیزی که شما نیاز دارین و دوست دارین راجع به تایپوگرافی بدونید رو بهتون بگه پس از دستش ندین!!
تایپوگرافی Typography چیه؟
خب بیاین با یه تعریف اصولی شروع کنیم! تایپوگرافی در اصل هنر تنظیم حروف و متن به شکلیه که نسخه رو برای طرف خوانا و واضح کنه و به اون یک فرم بصری بده.
تایپوگرافی شامل: سبک، ظاهر، و ساختار قلم هستش که هدف از اون ایجاد احساسات خاص و انتقال پیام های خاصِ.
به طور خلاصه میشه گفت که تایپوگرافی همون چیزیه که به متن شما جون میده و اون رو زنده میکنه!
تاریخچه Typography
Typography برمیگرده به قرن یازدهم میلادی (حالا شما ببین چقدر قدمت داره!) قبل از این که وارد این عصر دیجیتال بشیم تایپوگرافی یه کار دستی و تخصصی بود که با کتاب و مجله و در نهایت کارهای عمومی در ارتباط بود.
اولین نمونه از تایپوگرافی رو میشه تو کتاب مقدس گوتنبرگ Gothenburg Bible مشاهده کرد که میشه اونو شروعی برای انقلاب تایپوگرافی در غرب در نظر گرفت.
یه موضوعی که فکر میکنم جالب باشه که شمام بدونید، اینه که سبک مورد استفاده گوتنبرگ الان به عنوان Textura شناخته میشه و امروزه میشه اونو تو فهرست کشویی فونت‌ها در برنامه های اصلی دسکتاپ ببینید.
بیایم به روزگار مدرن خودمون، جایی که Typography بیشتر با دنیای دیجیتال و چاپ در ارتباطه. با تولد اینترنت، انفجار خلاق هنر تایپوگرافی به وجود اومد. تا به خودمون اومدیم دیدیم طراحان وب یه عالمه فونت و گزینه‌های متنوع در اختیار ما گذاشتن و تایپوگرافی از نظر بصری خیلی از قبل متنوع‌تر شده.
چرا تایپوگرافی مهمه؟
اگه راستش رو بخواین Typography یه چیزیه که به مراتب فراتر از انتخاب یک فونت زیباست. بلکه تایپوگرافی یک جز اساسی در طراحی رابط کاربری هستش.
یک تایپوگرافی خوب:
- یک سلسله مراتب بصریِ قوی ایجاد میکنه
- یک تعادل گرافیکی نسبی به وبسایت میده
- لحن کلی محصولی رو تعیین میکنه
تایپوگرافی باید کاربران رو راهنمایی و آگاه کنه و خوانایی رو ارتقاء بده و یک تجربه کاربری خوب بسازه.
خب به نظرم بد نیست که یکم عمیق‌تر بررسی کنیم که اهمیت Typography تو چیه.
تایپوگرافی باعث شناخته شدن برند میشه
یک تایپوگرافی خوب نه تنها باعث بالا رفتن شخصیت و پرستیژ سایت شما میشه، بلکه باعث میشه کاربرهای شما به طور چشمگیری شروع به پیوند دادن سبک و طرح حروف شما با برند شما بکنند.
تایپوگرافی قدرتمند باعث میشه تا شما کاربرهای پروپاقرص داشته باشین، اعتماد به نفستون بالا بره و در نهایت به پیشبرد برندتون کمک میکنه.
تایپوگرافی بر نحوه تصمیم گیری اثر میگذاره
Typography تاثیر عمیقی در هضم و درک کاربرها از اطلاعات منتقل شده داره. یه طرح چشم‌نواز از یک فونت ضعیف خیلی میتونه تاثیرگذارتر باشه و پیام متن رو بهتر تقویت میکنه.
تایپوگرافی توجه خواننده ها رو به خودش جلب میکنه
یک تایپوگرافی خوب میتونه خیلی کارا بکنه. مثلاً میتونه باعث بشه کسی که همیشه یک دیقه تو وبسایت شما می‌مونده، این دفعه نیم ساعت توی وبسایت شما چرخ بزنه. این خیلی مهمه که وبسایت شما از لحاظ بصری تحریک کننده و به یاد موندنی باشه و تایپوگرافی نقش خیلی زیادی تو این فرآیند داره.
عناصر مختلف Typography
برای شروع تایپوگرافی ابتدا باید 8 عنصر اصلی طراحی تایپوگرافی رو بلد باشین.
فونت ها و تایپوفیس ها
با اینکه این که بین فونت و تایپوفیس تفاوت هایی وجود داره ولی خیلی پیش میاد که به جای هم به کار برده بشن.
تایپوفیس یک سبک طراحیه که شامل هزاران کاراکتر و اندازه و ضخامت مختلف میشه درحالی که فونت یک نمایش گرافیکی از متنه.
به عبارت ساده‌تر میشه گفت که تایپوفیس یک خانواده از فونت های مرتبطه، و در همین حال فونت ها به ضخامت‌ها، اندازه‌ها و سبک هایی که یک تایپوفیس رو تشکیل میدن اشاره میکنه.
تایپوفیس سه نوع اصلی داره:
- Serif
- Sans-Serif
- Decorative
برای حفظ رابط کاربری، یک طراح خوب هیچ وقت نباید بیشتر از 3 تا فونت استفاده کنه و باید به صورت حداقلی از فونت های تزئینی استفاده کنه. بیشتر طراحان UI فونت های Serif و Sans-Serif رو باهم ترکیب میکنن. مثلاً میان بدنه محتوا رو باSans-Serif تایپ میکنن و عنوان رو با Serif یا برعکس.
تضاد یا کنتراست
تضاد یا کنتراست به شما کمک میکنه تا روی ایده‌ها یا پیام‌های موردنظرتون تاکید کنین. اگه یکم توجه کنین به این اصل، بهتون کمک میکنه متنتون معنی دار و جالب تر به نظر برسه.
بیشتر طراح‌ها با به کار گرفتن انواع مختلفی از شکل‌ها، رنگ‌ها، سبک‌ها و اندازه‌های مختلف تضاد یا کنتراست ایجاد می‌کنند تا صفحه رو جالب‌تر و تاثیرگذارتر کنند. با انتخاب یه تایپوگرافی مناسب، میتونین به بهترین روش و با بالاترین کارائی، پیام خودتون رو به مخاطب برسونین.
ثبات
اینجا وقتی میگیم ثبات یعنی داریم در مورد یکی از اصول صحبت میکنیم. یعنی این که انتخابتون یه جوری نباشه که گیج کننده یا کثیف به نظر برسه. وقتی میخواین یه سری اطلاعات مهم به کاربر بدین این خیلی مهمه که از یه فونت مشخص و ثابت استفاده کنین تا ذهن کاربر ازش یک الگو تشکیل بده. البته نمیگم بده که از سلسله مراتب مختلف استفاده کنید! نه!! ولی خب یه نظم و الگوی مشخص بدین به کار. یعنی یه فونت ثابت برای هدرهاتون و یه فونت ثابت برای بدنه متنتون انتخاب کنید و بهش بچسبید. وقتی میگیم موقع انتخاب تایپوگرافی باید ثبات رو در نظر بگیریم، یعنی باید حواسمون باشه که کاربر رو به یک سبق و سیاق از فونت ها و سایزها عادت بدیم.
فضای سفید
فضای سفید که اغلب بهش “فضای منفی” هم میگن، فضای اطراف متن یا گرافیک هستش. اصولاً من و شما به عنوان تماشاگر متوجه یه همچین نکته‌ای نمیشیم. اما استفاده صحیح از این فضای سفید کمک میکنه ک متن قابل خوندن باشه. فضای سفید حتی این قابلیت رو داره که توجه شما رو به متن جلب کنه و یه تجربه کلی از نظر زیبایی شناسی فراهم کنه. این فضای سفید همون حاشیه ها، یا مناطقی هستن که بدون متن و گرافیک باشن.
هم ترازی
تراز کردن به فرآیند یکپارچه کردن گرافیک و تصاویر میگن. یعنی که بیایم مطمئن بشیم بین هر عنصر فضا و اندازی مساوی وجود داره. خیلی از طراحان UI حاشیه‌هایی رو ایجاد میکنن تا مطمئن بشن که لوگو، هدر و بدنه متن اصلی اونا با همدیگه هماهنگ هستن.
رنگ
رنگ یکی از مهمترین و مهیج‌ترین عناصر اینفوگرافیک به حساب میاد! اینجاست که طراحان واقعاً میتونند خلاقیت پیدا کنند و رابط رو به سطح جدیدی ارتقاء بدن.
با این حال استفاده کردن از رنگ در اینفوگرافیک همچین مسئله ساده ای هم نیست. این که به فونت انتخابی یه رنگی بدین باعث میشه متن جذاب‌تر بشه و پیامی که دارین منتقل میکنین، بهتر منتقل بشه. اما اگه این کار رو اشتباه انجام بدین میتونه در نهایت منجر به یه متن کثیف بشه که با رنگ سایت همخونی نداره.
رنگ سه جزء داره:
- مقدار
- رنگ
- اشباع
یک طراح خوب میدونه که چطوری میتونه این سه تا مولفه رو متعادل کنه تا حتی افرادی که مشکلات بینایی دارن یا دارای نقص دید هستند، بتونن اونو به وضوح ببینند و براشون خوانا باشه. حتماً حواستون باشه که وقتی دارین یه تایپوگرافی برای سایت خودتون انتخاب میکنین، افراد دارای نقص دید رو در نظر بگیرین. شاید باور نکنین، اما گوگل به سایت هایی که به افراد دارای نقص بینایی توجه میکنن، اعتبار بیشتری میده.
سلسله مراتب
ایجاد سلسله مراتب یکی از مهمترین اصول تایپوگرافی به حساب میاد. یعنی چی سلسه مراتب ایحاد کنیم؟ یعنی بیایم تمایز ایجاد کنیم بین قطعات برجسته متن که باید اول خونده بشه و بدنه متن. در این عصر دیجیتالی که ما داریم توش زندگی میکنیم به دلیل محدودیت‌هایی که رسانه های اجتماعی واسمون ایجاد کردن، از طراح ها خواسته میشه که یه کاری ارائه بده که مختصر باشه و در عین حال متنوع! که این ویژگی به کاربر این امکان رو میده تا در مدت زمان کوتاه اطلاعات لازم خودش رو به دست بیاره.
سلسله مراتب رو میشه با استفاده از اندازه، رنگ، تضاد و تراز ایجاد کرد. مثلا اگه شما یه جایی یک علامت تعجب قرمز و بزرگ دارین، این یه نشونه و سرنخ تصویریه که به شما بگه این یه CTA یا Call To Action است!
بارزترین نمونه سلسلسه مراتب اندازه است. عناوین همیشه باید بزرگتر از زیرنویس ها و متن استاندارد باشند.
چطور یه Typoface خوب برای وبسایت انتخاب کنیم؟
خب الان که دیگه با عناصر مختلف تایپوگرافی آشنا شدین، بیاین راجع به روند انتخاب تایپوفیس برای رابط شما صحبت کنیم. وقتی شما فونت های زیاد و خیلی متنوعی دارین ممکنه توش غرق بشین. انتخاب یه تایپوفیس مناسب صرفاً این نیست که شما یه چیز خوبی ببینی و بگی خب دیگه همین خوبه! به خیلی چیزا بستگی داره که ما اینجا به چند تا نکته اساسی در همین رابطه اشاره کردیم:
شخصیت
به شخصیت وبسایت خودتون فکر کنین. دوس دارین وقتی کاربرها برای اولین بار میخوان وارد سایت شما بشن چه احساسی داشته باشن؟ میخواین یه فضای دوستانه و صمیمی داشته باشه؟ یا میخواین یه وبسایت سطح بالا به نظر برسه؟ یا فانتزی؟ یا یه وبسایت کاملاً جدی؟
این خیلی مهم و ضروریه که تایپوفیس شما بتونه شخصیت وبسایت شما، برند و محصول شما رو منعکس کنه. اولین کاری که باید بکنید اینه که هسته و مرکز کار خودتون رو انتخاب کنید (یعنی مثلاً هدف بیزینس و برند خودتون) و مطابق با اون یه تایپوفیس انتخاب کنید که اون حس دلخواه شما رو منتقل کنه. تایپوگرافی در شکل‌دهی شخصیت سایت شما و برندیگ شما اهمیت زیادی داره.
لحن
این خیلی مهمه که فونتی که شما انتخاب میکنید با پیامی که قراره برسونید همخونی داشته باشه. مثلاً اگه میخواین اطلاعات جدی و مهمی رو منتقل کنید، یک فونتی باید انتخاب کنید که زیاد جنبه تزئینی نداشته نباشه و ساده‌تر باشه که هم خوانایی رو ارتقاء بده هم حواس خواننده رو پرت نکنه.
کارآیی
کارآیی یکی از اساسی‌ترین اصل‌های مطرح شده راجع به تایپوگرافی و فونت است. هیچ چیزی بدتر از این نیست که یه وبسایت خوب و خوشگل به نظر برسه اما معلوم نباشه اصلاً چی هست! این میتونه باعث بشه که طرف مقابل انتخاب اشتباه داشته و رو دکمه‌های اشتباهی کلیک کنه، چون دستورالعمل ها مشخص نیست.
موقع تصمیم‌گیری درمورد نوع حروف در رابط کاربری، استایل و زیبایی شناسی رو کنار بگذارین و تمرکزتون رو بزارین روی این موضوع که فونت خوانا و قابل دسترس باشه.
عملکرد
یه نکته ای که خیلی از طراح ها ازش غافل هستن انتخاب حروف متناسب با مرورگر وب هستش. لیست فونت های معمولی مانند فونت های گوگل، فایل‌های فونت مبتی بر وب رو ارائه میدن. پس وقتی دارین راجع به تایپوگرافی سایت خودتون تصمیم میگیرین، محدودیت‌های مرورگر وب رو هم باید در نظر بگیرین.
نکته اینه که باید موقع دانلود فونت های وب، به هیچ عنوان کاراکترهایی بیشتر از اون چیزی که نیاز دارین رو انتخاب نکنید. چون اینطوری فقط بارتون رو سنگین کردین!
الهام گرفتن
اگه مطمئن نیستین که از کجا باید شروع کنید، یه تایمی بذارین و ببینین بقیه دارن چیکار میکنن. چشمتون رو باز کنید و به تایپوگرافی که دور و برتون هست نگاه کنید. آیا متوجه الگوهای مشابهی میشین؟ آیا میتونین نمونه های خوب و بد تایپوگرافی رو تشخیص بدین؟ حتی دنبال کردن هشتگ های تایپوگرفی در رسانه های اجتماعی یا جستجوی تایپوگرافی تو پینترست، میتونه ایده های خیلی خفنی بتون بده.
آزمایش
بهترین روش برای این که متوجه بشین کدوم فونت برای رابط کاربری شما مناسبه چیه؟ آزمایش، آزمایش و آزمایش.
با جمع آوری بازخوردهای مفید از کاربر های واقعی، شما میتونید درک بهتر و واضح تری در مورد این که چه عنصری کار میکنه، چه عنصری کار نمیکنه، آیا فونت خوانا هست یا نه، آیا فونت انتخابی حس خوبی منتقل میکنه یا نه و … بدست بیارین.
نتیجه گیری
تایپوگرافی غالباً نادیده گرفته میشه، اما این یه مولفه مهم در طراحی رابط کاربری به حساب میاد. تسلط روی تایپوگرافی به شما در راه تبدیل شدن به یک طراح UI فوق العاده کمک میکنه.
اگه نمیدونید از کجا شروع کنید بهتره به سایت های موردعلاقتون یه سر بزنید و ببینید که اونا از چه تایپوفیسی استفاده کردن.
خب بیاین اینجا ببینیم! خداوکیلی میدونستین انقدر تایپوگرافی مقوله مهم و موثری هستش؟ خودتون وبسایت دارین؟ اصلاً توجه کرده بودین به این قضیه؟ این مقاله چقدر بهتون کمک کرد؟
