تایپوگرافی یکی از مهم ترین عناصر طراحی در وب هست. در سال 2006, Richenstein مقاله ی قانع کننده ای نوشت که استدلال می کرد 95 درصد از طراحی در وب, تایپوگرافی هست. پس اگر تایپوگرافی چنین اهمیتی دارد, پس عجیب نیست اگر به خاطر ضعف در این بخش, کاربران خود را از دست بدهید.
وقتی من از تایپوگرافی حرف میزنم, فقط منظورم انتخاب فونت نیست ( اگرچه اون هم فاکتور مهمی هست), منظور من کلیت ترکیب بندی اون هست. در این مقاله, من لیستی از چند عنصر مهم رو تهیه کردم که شما میتونید برای ساخت تایپوگرافی های زیبا از اونها استفاده کنید.
اما قبل شرح این لیست یک تعریف مناسب از تایپوگرافی خواهیم داشت.
تایپوگرافی چیست؟
تایپوگرافی در واقع جزء بصری کلمه ی نوشته شده هست.
یک متن شامل دنباله ای از کلمات است. یک متن بدون توجه به نحوه ی ارائه ی اون معنی ثابتی داره. جمله ی "من پیتزا را دوست دارم" رو در نظر بگیرید. من میتونم اون رو بر روی یک قطعه کاغذ پرینت بگیرم یا بلند بخونمش یا اون رو در یک فایل در لپ تاپم ذخیره کنم. در تمام این حالات اون متن ثابت هست و فقط در نحوه ی ارائه متفاوت عمل می کنه.
اما وقتی "من پیتزا را دوست دارم" پرینت گرفته شد, نقش تایپوگرافی مشخص میشه. تمام عناصر بصری متن پرینت گرفته شده تایپوگرافی نامیده می شود - چه در برگه باشد چه روی اسکرین کامپیوتر و چه در یک بیلبورد!
برای مثال تفاوت بین این دو تابلو در چیست؟ متن یا تایپوگرافی؟
آیا تایپوگرافی یک هنر است؟ مثل این می مونه که بپرسیم آیا عکاسی یک هنر است. مطمئنا عکاسان و تایپوگراف هایی وجود دارند که ایده ها و تکنیک هاشون کار اون ها رو به سطح هنر میرسونه. اما هر دو چه عکاس چه تایپوگراف یک عمل سودآور رو انجام می دهند. برای این که یک تایپوگرافر خوب باشید بیشتر به مهارت نیاز دارید تا سلیقه!
در ادامه به چند نکته برای بهبود تایپوگرافی می پردازیم.
از فاصله های مناسب استفاده کنید
اگر یک نکته ی یک نکته ی طراحی وجود داشته باشه که من بتونم برای کسایی که طراح نیستند, مطرح کنم این هست که از فاصله ها بصورت متعادل استفاده کنید. با افزودن فاصله ی بیش از حد به ترکیب تون, شما میتونید طراحی رابطتون رو از حالت کسل کننده و نا امید کننده به یک حالت زیبا و جذاب در بیارید. فاصله ها میتونه هر چیزی در طراحی شما رو بالا ببره, از تایپوگرافی گرفته تا طرح بندی صفحه, اما این هم مهم هست که با دقت این کار رو انجام بدید.
با استفاده از پراپرتی ارتفاع خط (line height) می تونید فاصله ها رو به تایپوگرافی معرفی کنید. و زمانی که دارید ارتفاع خط رو تغریف می کنید, باید خیلی چیز ها رو در نظر بگیرید, مثل فونت انتخابی و سایز اون, اما عموما یک ارتفاع خط مناسب برای متن پاراگراف میتونه بین 1.4 و 1.6 بسته به نوع فونت باشه. خطوط هدر هم بسته به سایزشون باید فشرده تر باشند. هدف اصلی این هست که شما بتونید به راحتی از یک خط به خط دیگر بروید و هیچ بهم خوردگی وجود نداشته باشد.
وقتی صحبت از تعریف margin ها و padding ها در یک رابط کاربری میشه, از سایز های مختلف استفاده نکنید و سعی کنید با استفاده از مقادیر متناسب یک هارمونی بصری ایجاد کنید. راحت ترین راه این هست که مجموعه ای از واحد های REM ااستفاده کنیم, به طوری که فقط از یک سری اندازه ها در طراحی مون بهره ببریم.
در تصویر زیر, من از مضارب 6 برای تعریف ارتفاع خط و margin ها استفاده کردم.
استفاده از رنگ و کنتراست
بعضی اوقات برای این که چیزی رو برجسته کنید, شما نیاز دارید عناصر دیگر طراحی رو عقب بکشید ( جلوی دید نگذارید) . با انجام این کار در متن شما میتونید برای ساخت سلسله مراتبی تایپوگرافی از کنتراست استفاده کنید.
اگر مطالب مهم سایت مثل هدر ها رو برجسته کنید, باعث میشه که سایت شما به سادگی قابل اسکن کردن بشه. معمولا اگر من دارم بر روی یک بلاک از متن که شامل هدر هست کار می کنم, کنتراست متن پاراگراف رو بسته به کنتراست هدر و رنگ بک گراند, بیست تا سی درصد کاهش میدم.
سعی کنید از سه تنوع سایه برای رنگ های متن در رابط کاربری استفاده کنید : یک سایه تاریک برای متنی که می خواهید روی اون تمرکز کنید, مثل هدر ها, یک متوسط برای متن نرمال رابط کاربری و یک روشن تر برای اطلاعاتی که کم تر اهمیت دارند. نگاهی به مثال پایین بیاندازید که نشان می دهد چطور سه سایه ی مختلف میتونه برای ساخت سلسله مراتب به کار بیاد :
این همیشه خوبه که انتخاب رنگ های طرحتون رو از طریق یک چک کننده ی کنتراست رنگ مثل این لینک انجام بدید تا مطمئن بشید یک نسبت کنتراست 4.5:1 یا بالاتر دارید.
هیچ وقت کامل سیاه ننویسید
همین طور که بالا اشاره کردیم, استفاده از انواع کنتراست همیشه یک موضوع مهم برای طرح شماست. اما آیا میدونستید خواندن متن خاکستری تیره راحت تر از متن سیاه در یک بک گراند سفید رنگ هست؟ متن کاملا سیاه بر بک گراند سفید میتونه تمرکز خواننده رو از چیزی که میخونه پایین بیاره اما با کم کردن چند درصدی تیرگی متن شما میتونید چشم های خوانندگان تون رو از تنش حفظ کنید.
در حالت مناسب, نکته اینه که شما میتونید بجای خاکستری تیره از رنگ های مختلف برند اپلیکیشن یا حتی رنگ اصلی اون بصورت تیره استفاده کنید. یک مثال عالی در این مورد فیس بوک هست.در نگاه اول, متن محتوای فیسبوک به نظر کاملا سیاه میرسه. اما اگر شما دقیق تر نگاه کنید متوجه خواهید شد که متن از رنگ های مختلف برند فیس بوک تشکیل شده. شما میتونید ببینید که این کار در تمام بخش های سایت از لینک ها گرفته تا متن جایگزین, استفاده شده. هر رنگ یا معادل رنگ متناظر برند هست یا از نظر تیرگی مقادیر مختلفی دارد.
ضمانت نمیشه که بتونید از هر رنگی استفاده کنید, اما میتونید تست کنید و ببینید چطور میشه. اگر در شک هستید, از سایه های خاکستری رنگ استفاده کنید, که هیچ وقت بد به نظر نمیاد.
از رنگ خاکستری بر روی بک گراند رنگی استفاده نکنید
وقتی با متن ها روی بک گراند های رنگی کار می کنید, هیچ گاه از متن خاکستری استفاده نکنید, چون ممکن هست به خوبی دیده نشه و حتی گاهی بصورت کدر دیده بشه. در عوض با توجه به رنگ بک گراند, رنگ متن رو انتخاب کنید. نه تنها باعث میشه متن واضح تر دید بشه, این حس رو میده که متن به تصویر چسبیده است!
به عنوان جایگزین یک راه دیگه این هست که میزان شفافیت متن رو کاهش بدید تا تاثیری که گفتیم رو داشته باشه. بهرحال در مورد انجام این کار بسیار دقت کنید, چون قطعا نمی خواهید متن شما ناخوانا مشاهده بشه.
طول متن ها رو مناسب بگیرید
یک اشتباه معمولی که میشه دید این هست که یک پاراگراف کل طول صفحه رو در برگرفته ! برای دلایلی اینکه تمام صفحه رو پر کنید بسیار بد است چون هیچ فضای سفیدی باقی نمی ماند و این برای خواننده ناخوشایند میشه. این میتونه گاهی مشکل ساز بشه چون در اکثر مواقع اگر طول صفحه زیادی عریض باشه, باعث میشه ردیابی نوشته ها در صفحه سخت بشه.
یک اشتباه دیگری که میشه دید این هست که پاراگراف ها بسیار کوتاه باشند. این نه تنها باعث میشه متن شما ناخوانا بشه, بلکه طرح صفحه ی شما رو غیر حرفه ای جلوه میده. این کار ممکن هست برای بلاک های کوچک از متن که بیش تر از سه یا چهار خط نیستند, قابل قبول باشه. اما برای بلاک های بزرگ متن این میتونه باعث بشه خواننده بیخیال یک سری از خطوط بشه و ازشون بگذره.
اینجا تعدادی قانون معمول وجود داره که برای اندازی گیری طول خط استفاده میشه. اگر شما بر روی بلاک بزرگی از متن کار می کنید که متن سمت چپ قرار گرفته, قانون عمومی این هست که بین 45 و 90 کاراکتر در هر خط بنویسید. این که طول متن هاتون رو بیشتر به سمت کوتاه بودن سوق بدید, ایده آل تر هست. اما سایز فونت نقش مهمی رو در تعیین اندازه طول متن بازی می کنه.
متاسفانه هر متغیری که شما استفاده می کنید تا متن رو فیکس کنید قابل انتقال از فونتی به فونت دیگر نیست. اگر شما می خواهید فونت رو تغییر بدید, ممکن هست لازم باشه سایر فونت, فاصله ی حروف و کلمات رو هم تنظیم کنید تا نتیجه ی بهتری بگیرید.
بلاک های متن سمت چپ
این چیزی هست که من خیلی زیاد می بینم : یک بلاک بزرگ از متن که وسط چین هست. به دلایلی افراد دوست دارند متن وسط قرار بگیره, پس این کاملا متعادل هست. وسط چین بودن میتونه خوب باشه اگر اون یک بلاک کوچک و باریک از متن باشه که بیش تر از سه یا چهار خط نیست اما شبیه طول خط, این میتونه در بلاک های بزرگ باعث سختی خوانندگان بشه.
اگر متن هاتون رو چپ چین یا راست چین کنید, باعث میشه راحت تر اسکنش بشه و بهتر بتونید لیست ها و سایر کامپوننت های رابط کاربری که به متن الحاق میشه رو به نمایش در بیارید.
نتیجه گیری
لازمه ی تایپوگرافی خوب صبر و دقت زیاد روی جزئیات هست اما وقتی این کار رو متفکرانه انجام بدید, میتونه ارزش طرحتون رو بسیار بالا ببره. امیدوارم این نکات به شما کمک کنه تا بیش تر روی جزئیات ترکیب بندی تایپوگرافی تمرکز کنید.
منابع
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید