تایپوگرافی ماکرو و میکرو در طراحی وب

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 23 بهمن 1397
دسته بندی ها : طراحی وب

در رابطه با تایپوگرافی در صفحات وب، نمی‌شود به سادگی از آن گذشت. بسیار مهم است که بتوانید تفاوت‌ها و نکات ظریف حالات مختلف را در تایپوگرافی درک و تحلیل کنید. تنها به این شیوه است که می‌شود قابلیت خوانایی و بهینه‌ بودن کارایی کلی وبسایت‌تان را بهتر نمایید. در دنیای تایپوگرافی ما به صورت کلی دو دسته متفاوت را در اختیار داریم – ماکرو و میکرو.. حال قبل از آنکه شروع به ساختن یک برگه وب کنید، بسیار مهم است که درک درستی از هر کدام این موارد داشته باشید. این موضوع به طراحان وب کمک می‌کند تا بتوانند به خوبی روی خوانایی و استفاده‌پذیری کلی وبسایت‌شان تمرکز داشته باشند.

تایپوگرافی به صورت میکرو روی جزئیات یک تایپ‌فیس تمرکز دارد. زمانی که یک طراح تصمیم می‌گیرد که به دقت و تمرکز بالا روی انتخاب استایل فونت‌ش فکر بکند،‌ در این سبک سعی دارد تا از رویکرد تایپوگرافی میکرو استفاده نماید. به صورت کلی تایپوگرافی میکرو سعی دارد تا ریزه‌کاری‌ها و ظرافت کار را بسیار بالا ببرد و طراحی کلمات را بهتر کند. تایپوگرافی میکرو باعث می‌شود که خوانایی یک متن بهتر شود و به صورت کلی روی تجربه خوانایی یک کاربر تاثیر مثبت می‌گذارد.

از طرفی دیگر تایپوگرافی ماکرو به طراحی لایه‌بندی پاراگراف‌ها و کلمات روی صفحه وب اشاره دارد. با تنظیم کردن پاراگراف‌ها در یک مسیر مشخص، طراحان می‌توانند قابلیت خوانایی برگه‌های‌شان را بالاتر ببرند.

هر دو شکل از تایپوگرافی (میکرو و ماکرو) برای ایجاد یک صفحه وب مؤثر و زیبا مهم هستند. خوانایی یا Readability کمک می‌کند تا یک کاربر بتواند به آسانی یک صفحه وب و یا مقاله را مطالعه نماید. اما موضوع دیگری که وجود دارد Legibility است که در زبان فارسی همان خوانایی ترجمه می‌شود اما این دو مورد با همدیگر متفاوت هستند. در واقع Legibility سعی دارد تا شکل قرارگیری کلمات و فضاگذاری را بهینه نماید. 

هر گاه بشود این دو رویکرد را در کنار همدیگر قرار داد می‌شود صفحه‌ای بهینه و بسیار کاربردی ساخت.

تکنیک‌های تایپوگرافی ماکرو برای بالا بردن خوانایی

حاشیه گذاری: اضافه کردن حاشیه کمک می‌کند تا ساختار محتوایی یک برگه وب به شکلی بسیار ظریف آراسته شود. با اضافه کردن حاشیه شما می‌توانید کانتینر متنی را از دیگر المان‌های صفحه وب فاصله دهید. وقتی فضای آزاد زیادی دور یک متن را بگیرد، به خوانایی و بهتر شدن Legibility آن کمک بسیار زیادی می‌کند. حاشیه‌گذاری می‌تواند روی ایجاد هارمونی در طراحی کلی تاثیر بسیاری نیز بگذارد.

برای مثال، اگر به تصویری زیر نگاهی بیاندازید متوجه می‌شوید که دو ستون از متن وجود دارد که بین آن‌ها را با استفاده از حاشیه‌گذاری پر کرده‌ایم. حاشیه گذاری در این حالت باعث شده که متون در دو سمت راست و چپ به خوبی قرار بگیرند. این موضوع به بالا رفتن قابلیت خوانایی متن کمک بسیار زیادی کرده است.

برای ایجاد یک هارمونی و ارتباط در بین اجزای مختلف بسیار مهم است که به کانتینر متنی و شکل خود متن توجه کنید.

تکنیک‌های تایپوگرافی میکرو برای بالا بردن خوانایی

انتخاب فونت‌ها

انتخاب فونت بستگی به legibility و readability محتوا دارد. وقتی می‌خواهید یک فونت را انتخاب کنید به legibility کلی دقت نمایید. انتخاب فونت براساس المان‌های صفحه نیز موضوع مهمی است. برای مثال عنوان‌ها و زیرعنوان‌ها بخش مهمی از یک صفحه وب هستند که کاربران به آن بسیار توجه دارند. از این رو بسیار مهم است که انتخاب فونت در این باره مورد توجه قرار بگیرد. البته فرمولی کردن این موارد می‌تواند گاهی اوقات خطرناک باشد چرا که خلاقیت در این صورت از بین می‌رود، اما در نهایت legibility و readability نباید فراموش شوند.

کنتراست

کنتراست نقش بسیار بزرگی را در تایپوگرافی و طراحی وب ایفا می‌کند. قرار دادن یک متن روی یک پس زمینه که کنتراست بالایی با همدیگر دارند، می‌تواند باعث شود که متن قابلیت خوانایی بسیار بالایی به خود بگیرد. قرار دادن یک متن سیاه روی یک پس زمینه سفید حالتی بسیار معروف و همگانی است که در آن میزان کنتراست بالا به ما کمک می‌کند تا به خوبی متن را بخوانیم. استفاده از کنتراست رنگی در کانتینر‌های متنی نیز کمک بالایی به خوانایی متن می‌کند.

اندازه فونت

اندازه فونت موضوعی است که بعد از حاشیه‌گذاری بسیار مهم است به آن توجه شود. اندازه فونت باید به صورتی باشد که بتوانیم بین ۸ الی ۱۲ کلمه را در یک خط قرار دهیم. اینگونه می‌شود محتوا را به بهتری شکل ممکن به کاربران تحویل داد.

ارتفاع خط

ارتفاع خطوط موضوع دیگری است که بعد از اندازه فونت باید به آن توجه کرد. برای تعیین این ارتفاع شما باید براساس نوع فونت‌تان حالت‌های متفاوتی را پیاده‌سازی کنید. در تصویر بالا به بهترین شکل ممکن این موضوع به تصویر کشیده شده است. 

اندازه‌گیری، سازمان‌دهی و تنظیم کردن تمام این موارد می‌تواند سخت و طاقت‌فرسا باشد، اما زمانی که این موارد انجام شود، شما می‌توانید بیشترین کارایی را از آن‌ها دریافت کنید. بهتر است به تمام المان‌های موجود نگاهی دقیق بیاندازید، استایل، کنتراست، اندازه‌ها، فضا، حاشیه‌گذاری و... . 

ما در این مطلب سعی کردیم که موارد بسیار پایه از تایپوگرافی ماکرو و میکرو را به شما معرفی کنیم، با این حال باید سعی کنید که در ارتباط با این موارد موضوعات بیشتری را متوجه شوید و درک بالایی از آن‌ها پیدا کنید.

منبع

مقالات پیشنهادی