چه در تلفن هایمان باشد، چه در کتاب ها یا در وب سایت ها، ما دائماً در حال هضم کلمات نوشته شده هستیم. از دفترچه های آموزشی گرفته تا جلوی مغازه ها، تایپ در اطراف ما وجود دارد. ما اغلب به قدرت کلام نوشتاری فکر می کنیم، اما به ندرت نقش طراح را در تقلید لحن کلمه یا جمله در نظر می گیریم.
در پشت صحنه، یک طراح برای بررسی رابطه بین ظاهر متن و آنچه متن می گوید وقت گذاشته است. در واقعیت، حالات، فضاها و احساسات مختلف را می توان به سادگی از طریق انتخاب نوع بیان کرد. اما در واقع تایپوگرافی چیست و چرا اینقدر اهمیت است؟
در این مقاله، همه چیزهایی را که باید در مورد تایپوگرافی بدانید، باز می کنیم. ما با تعریف تایپوگرافی، از جمله تاریخچه مختصری از منشأ آن شروع می کنیم. سپس به مزایای تایپوگرافی خوب و تأثیری که می تواند بر کاربران شما بگذارد خواهیم پرداخت. در نهایت، ما به عناصر مختلفی که شامل تایپوگرافی هستند و معنای همه آنها می پردازیم.
1. تایپوگرافی چیست؟
بیایید با اصول اولیه شروع کنیم: در واقع تایپوگرافی چیست؟ در اصل، تایپوگرافی هنر چینش حروف و متن به گونه ای است که کپی را خوانا، واضح و از نظر بصری برای خواننده جذاب کند. تایپوگرافی شامل سبک، ظاهر و ساختار قلم است که هدف آن برانگیختن احساسات خاص و انتقال پیام های خاص است. به طور خلاصه، تایپوگرافی چیزی است که متن را زنده می کند.
تایپوگرافی را می توان به قرن یازدهم، در طول ابداع حروف متحرک، بازگرداند. قبل از عصر دیجیتال، تایپوگرافی یک هنر تخصصی بود که با کتاب ها و مجلات و در نهایت آثار عمومی مرتبط بود. اولین نمونه از تایپوگرافی را می توان در انجیل گوتنبرگ مشاهده کرد که آغازگر یک انقلاب تایپوگرافی در غرب بود. واقعیت جالب: سبک تایپ مورد استفاده در کتاب مقدس گوتنبرگ اکنون به عنوان Textura شناخته می شود و امروز آن را در منوی کشویی فونت در برنامه های اصلی دسکتاپ پیدا خواهید کرد!
سریع به سمت روز مدرن، جایی که تایپوگرافی بیشتر با دنیای دیجیتال و چاپ مرتبط است. با تولد اینترنت، انفجار خلاقانه هنر تایپوگرافی به وجود آمد. ناگهان، طراحان وب، فونت‌ها و گزینه‌های تایپ فراوانی در اختیار داشتند که تایپوگرافی را از نظر بصری متنوع‌تر از همیشه کرد.
2. چرا تایپوگرافی مهم است؟
تایپوگرافی بسیار بیشتر از انتخاب فونت های زیبا است: این یک جزء حیاتی در طراحی رابط کاربری است. تایپوگرافی خوب یک سلسله مراتب بصری قوی ایجاد می کند، تعادل گرافیکی را برای وب سایت ایجاد می کند و لحن کلی محصول را تعیین می کند. تایپوگرافی باید کاربران شما را راهنمایی کند و به آنها اطلاع دهد، خوانایی و دسترسی را بهینه کند و تجربه کاربری عالی را تضمین کند.
بیایید کمی عمیق تر به این موضوع بپردازیم که چرا تایپوگرافی بسیار مهم است.
تایپوگرافی باعث شناخت برند می شود
نه تنها تایپوگرافی خوب شخصیت وب سایت را افزایش می دهد، بلکه کاربران شما به طور ناخودآگاه شروع به مرتبط کردن حروف برجسته در سایت شما با نام تجاری شما می کنند. تایپوگرافی منحصربه‌فرد و ثابت به شما کمک می‌کند یک کاربر قوی دنبال کنید، با کاربران خود اعتماد ایجاد کنید و به پیشبرد نام تجاری خود کمک کنید.
تایپوگرافی بر تصمیم گیری تأثیر می گذارد
تایپوگرافی تأثیر عمیقی بر نحوه هضم و درک کاربران از اطلاعات منتقل شده توسط متن دارد. نوع چشم نواز بسیار متقاعد کننده تر از فونت های ضعیف است که پیام متن را تقویت نمی کند.
تایپوگرافی توجه خوانندگان را به خود جلب می کند
تایپوگرافی خوب می تواند تفاوت بین افرادی باشد که برای یک دقیقه یا نیم ساعت در وب سایت شما می مانند. مهم است که وب سایت شما از نظر بصری محرک و به یاد ماندنی باشد و تایپوگرافی نقش مهمی در این فرآیند ایفا می کند.
3. عناصر مختلف تایپوگرافی
برای شروع کار در تایپوگرافی، ابتدا باید با هشت عنصر ضروری طراحی تایپوگرافی آشنا شوید.
فونت ها و تایپ فیس ها
در مورد تفاوت بین حروف و فونت ها سردرگمی وجود دارد و بسیاری این دو را مترادف می دانند. تایپ فیس یک سبک طراحی است که شامل تعداد زیادی کاراکتر با اندازه ها و وزن های مختلف است، در حالی که فونت یک نمایش گرافیکی از کاراکتر متن است. به زبان ساده، تایپ‌فیس خانواده‌ای از فونت‌های مرتبط است، در حالی که فونت‌ها به وزن‌ها، عرض‌ها و سبک‌هایی اشاره دارند که یک فونت را تشکیل می‌دهند.
تایپوگرافی چیست؟ این تفاوت بین فونت و فونت را نشان می دهد
سه نوع اصلی تایپ فیس وجود دارد: سریف، سان سریف و تزئینی. برای اینکه رابط کاربری شلوغ و کارآمد باشد، یک طراح خوب هرگز از بیش از سه فونت استفاده نخواهد کرد - و فونت های تزئینی را به حداقل برسانید. اکثر طراحان رابط کاربری فونت‌های سریف را با فونت‌های sans-serif جفت می‌کنند، مانند قرار دادن متن اصلی در یک فونت سریف و قرار دادن عنوان خود در یک فونت sans-serif یا برعکس.
تضاد
همانند سلسله مراتب، کنتراست به انتقال ایده ها یا پیامی که می خواهید بر آن تاکید کنید به خوانندگان کمک می کند. صرف زمان برای کنتراست متن شما را جالب، معنادار و جلب توجه می کند. بیشتر طراحان با بازی کردن با حروف، رنگ‌ها، سبک‌ها و اندازه‌های مختلف کنتراست ایجاد می‌کنند تا تأثیری ایجاد کنند و صفحه را از بین ببرند.
انواع مختلفی در فونت ها برای تاکید استفاده می شود
ثبات
ثابت نگه داشتن تایپ‌فیس‌ها برای جلوگیری از رابط کاربری گیج‌کننده و نامرتب کلیدی است. هنگام انتقال اطلاعات، ضروری است که به همان سبک فونت پایبند باشید، بنابراین خوانندگان شما فوراً آنچه را که می‌خوانند بفهمند و متوجه یک الگو شوند. در حالی که بازی کردن با سطوح سلسله مراتبی تا حدودی مشکلی نیست، ایجاد یک سلسله مراتب منسجم از حروف چاپی (یک فونت ثابت برای سرصفحه ها، دیگری برای عنوان های فرعی) و رعایت آن تمرین خوبی است.
فضای سفید
فضای سفید که اغلب به عنوان "فضای منفی" نامیده می شود، فضای اطراف متن یا گرافیک است. اغلب نادیده گرفته می شود و معمولا مورد توجه کاربر قرار نمی گیرد، اما استفاده مناسب از فضای سفید باعث می شود رابط کاربری نامرتب و متن قابل خواندن باشد. فضای سفید حتی می تواند توجه را به متن جلب کند و یک تجربه کلی از نظر زیبایی شناسی دلپذیر ارائه می دهد. فضای سفید اغلب به شکل حاشیه، بالشتک یا فقط مناطقی بدون متن یا گرافیک است.
هم ترازی
تراز کردن فرآیند یکسان سازی و ترکیب متن، گرافیک و تصاویر برای اطمینان از وجود فضا، اندازه و فواصل برابر بین هر عنصر است. بسیاری از طراحان رابط کاربری حاشیه هایی ایجاد می کنند تا مطمئن شوند که لوگو، سربرگ و متن آنها با یکدیگر همسو هستند. هنگام تراز کردن رابط کاربری خود، خوب است که به استانداردهای صنعت توجه کنید. به عنوان مثال، تراز کردن متن خود به سمت راست برای خوانندگانی که از چپ به راست می خوانند، غیر منطقی به نظر می رسد.
رنگ
رنگ یکی از هیجان انگیزترین عناصر تایپوگرافی است. اینجاست که طراحان واقعاً می توانند خلاق باشند و رابط را به سطح جدیدی ارتقا دهند. با این حال، نباید رنگ متن را ساده تلقی کرد: میخکوب کردن رنگ فونت می تواند متن را متمایز کند و لحن پیام را منتقل کند - اما اشتباه گرفتن آن می تواند منجر به ایجاد یک رابط کاربری درهم و برهم و متنی شود که با رنگ های سایت در تضاد است.
رنگ دارای سه جزء کلیدی است: ارزش، رنگ و اشباع. یک طراح خوب می داند که چگونه این سه جزء را متعادل کند تا متن را چشم نواز و به وضوح خوانا کند، حتی برای کسانی که دارای اختلالات بینایی هستند. اغلب، طراحان این را با مشاهده متن در مقیاس خاکستری (بدون رنگ) و ایجاد تغییراتی در صورتی که متن خیلی تیره یا خیلی روشن در برابر رنگ پس‌زمینه باشد، آزمایش می‌کنند.
سلسله مراتب
ایجاد سلسله مراتب یکی از حیاتی ترین اصول تایپوگرافی است. سلسله مراتب تایپوگرافی با هدف ایجاد تمایز واضح بین قطعات برجسته کپی که باید ابتدا توجه شود و خوانده شود و نسخه استاندارد متن است. در عصری که رسانه‌های اجتماعی با فاصله زمانی کوتاهی ایجاد می‌کنند، از طراحان خواسته می‌شود مختصر باشند و حروفی بسازند که به کاربران اجازه دهد اطلاعات لازم را در مدت زمان کوتاهی مصرف کنند.
سلسله مراتب را می توان با استفاده از اندازه، رنگ، کنتراست و تراز ایجاد کرد. به عنوان مثال، اگر خطی از کپی با نماد علامت تعجب در ابتدا دارید که به رنگ قرمز و بزرگتر از نسخه قبلی است، این یک سرنخ بصری برای خوانندگان است که نشان می دهد این یک دعوت به عمل است. نمونه معمولی سلسله مراتب تایپی اندازه است: سرفصل ها باید همیشه بزرگتر از عنوان های فرعی و متن استاندارد باشند.
4. چگونه فونت مناسب وب سایت خود را انتخاب می کنید؟
اکنون که با عناصر مختلف تایپوگرافی آشنا شدیم، بیایید در مورد فرآیند انتخاب تایپ‌فیس برای رابط کاربری خود صحبت کنیم. با فونت‌ها و فونت‌های مختلف برای انتخاب، به راحتی می‌توان احساس ناراحتی کرد. انتخاب درست به چیزهای بسیار بیشتری بستگی دارد تا فقط دیدن چیزی که زیبا به نظر می رسد. در اینجا چند نکته کلیدی وجود دارد:
به شخصیت فکر کنید
دوست دارید کاربران شما در اولین ورود به وب سایت شما چه احساسی داشته باشند. آیا می خواهید یک فضای دوستانه را تقلید کنید؟ آیا می‌خواهید که سایت احساسی عالی، خوش‌آمد، بازیگوش یا جدی داشته باشد؟ ضروری است که تایپوگرافی شخصیت برند یا محصول را منعکس کند. یک نقطه شروع خوب در مواجهه با این چالش این است که ویژگی های اصلی برند خود را تعریف کنید و شروع به جمع آوری حروف چاپی کنید که منعکس کننده این ویژگی ها باشد. از آنجا، می توانید متوجه یک روند شوید.
روی لحن منعکس کنید
در نظر گرفتن اینکه چگونه فونت با لحن پیام هماهنگ می شود، به همان اندازه مهم است. برای مثال، اگر می‌خواهید اطلاعات جدی یا مهمی را منتقل کنید، فونتی با سبک کمتر یا تزئینی انتخاب کنید که هم به وضوح خوانا باشد و هم حواس‌پرتی را محدود کند.
در عملکرد کوتاهی نکنید
عملکرد به اندازه فرم حیاتی است: هیچ چیز بدتر از وب سایتی نیست که زیبا به نظر می رسد اما کاملاً ناخوانا است و باعث می شود که روی دکمه اشتباه کلیک کنید یا به دلیل نامشخص بودن دستورالعمل ها به سمت اشتباه بروید. وقتی تصمیم می‌گیرید چه نوع تایپ‌هایی را در رابط کاربری خود بگنجانید، سبک، زیبایی‌شناسی و صدا را کنار بگذارید و در مورد اینکه آیا فونت خوانا، خوانا و در دسترس است فکر کنید. آیا متن می تواند بدون فشار خوانا باشد؟ آیا شخصیت ها به اندازه کافی متمایز هستند؟
عملکرد را در نظر بگیرید
یکی از مواردی که بسیاری از طراحان اغلب نادیده می گیرند، انتخاب تایپ فیس هایی است که برای مرورگر وب مناسب هستند. کتابخانه‌های فونت‌های رایج مانند فونت‌های گوگل، فایل‌های فونت مبتنی بر وب را ارائه می‌کنند که می‌توانند بدون هیچ مشکلی در یک مرورگر به خوبی ارائه شوند. نکته حرفه ای: هنگام دانلود فونت های وب، هرگز مجموعه کاراکترهای بیشتری از آنچه نیاز دارید دانلود نکنید. به این ترتیب از اضافه وزن جلوگیری می کنید!
برای تست کمی زمان بگذارید
بهترین راه برای رمزگشایی از کدام فونت برای رابط کاربری خود استفاده کنید؟ تست، تست و تست! با جمع‌آوری بازخورد مفید از کاربران واقعی، بینش واضح‌تری در مورد اینکه چه چیزی کار می‌کند، چه چیزی خوب نیست، چه چیزی خوانا است و چه چیزی غیرمعمول یا بد است، دریافت خواهید کرد.
5. نتیجه گیری
تایپوگرافی اغلب نادیده گرفته می شود، اما یک جزء مهم در طراحی رابط کاربری است. تسلط بر تایپوگرافی شما را در مسیر تبدیل شدن به یک طراح رابط کاربری فوق العاده می بیند! اگر مطمئن نیستید از کجا شروع کنید، چرا به وب‌سایت‌های مورد علاقه‌تان سر نزنید و شروع به یادداشت‌برداری از چه نوع تایپ‌فیسی نکنید.
منبع: https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/