قبل از خواندن این مطلب به شدت توصیه می کنیم بخش اول این مقاله با عنوان : اهمیت تایپوگرافی خوب در طراحی وب سایت را بخوانید.
اشتباهات تایپوگرافی در طراحی سایت
هنگام طراحی و ساخت یک وبسایت، ممکن است تایپوگرافی به راحتی نادیده گرفته شود و می دانیم که فونت گیج کننده ممکن است مشتریان و کاربران شما را به آسانی فراری دهد. ما برخی از اشتباهات اصلی را که طراحان باید در مورد تایپوگرافی از آنها آگاه باشد، برجسته کرده ایم.
1. نبودن ارتفاع خط مناسب/ نداشتن نسبت مناسب
یکی از مهمترین نکته های یک فونت خوب فاصله بین کلمات است. وقتی بین خطوط نوشتاری فضایی برای استراحت چشم‌ها وجود داشته باشد مطالعه متن هیجان انگیزتر می شود. به طور کلی سعی کنید 2 درجه تیترها را از سایز بقیه متن بزرگتر بنویسد. به عنوان مثال، برای خوانایی بهینه، فونتی با سایز 10pt باید دارای لید تیتر 12pt باشد. فاصله بیش از حد کلمات رسیدن به خط بعدی را برای خواننده دشوار می کند و می تواند مانع از درک درست متن باشد، این یکی از اصلی ترین مسائل اصلی خوانا بودن متن است که بسیاری از طراحان در تله آن گرفتار می شوند. برای یادگرفتن یک استاندارد در تنظیم اندازه فونت در تیتر و متن اصلی و همینطور اندازه فاصله خط ها، ایده بدی نیست که نگاهی به روزنامه ها و مجله ها بیاندازید.
2. نداشتن تناسب فاصله بین کلمات
به این مسئله اصطلاحاً ردیاب (Tracking) نیز می گویند. در حقیقت این فاصله بین حروف است. یعنی فاصله بین حروف در یک کلمه یا عبارت کامل. هرچه ردیاب شما بزرگتر باشد فضای بیشتری بین حروف تشکیل دهنده یک کلمه وجود خواهد داشت. طراحان معمولاً ردیاب را متناسب با نوع فونت یا کاربرد نوشته تغییر می دهند، البته تغییرات جزئی در این کار قابل قبول است، اما باید بگوییم که اضافه کردن فاصله بیهوده یا بیش از حد، در حروف یک کلمه ممکن است خوانایی آن را تحت تاثیر قرار دهد.
3. نداشتن تراز مناسب در چیدمان تایپوگرافی
وقتی صبحت از تایپوگرافی در وب می شود تراز بودن و هماهنگی یک عامل اساسی است. در یک صفحه نمایش کوچک مغز انسان ترجیح می دهد تا متن را به صورت بلوکه ای بخواند. متن ها اغلب از سمت راست به چپ تراز می شوند که در این صورت در صفحه نمایش های موبایل ممکن است منجر به ایجاد یک لبه ناهموار در سمت راست بلوک متنی شود. به عنوان یک طراح شما باید همیشه به این مسئله دقت کنید که یک ناهمترازی می تواند خوانایی و جذابیت متن ها را به شدت کاهش دهد.
4. کمبود یا ازدیاد کنتراست در متن
یکی دیگر از اجزای تایپوگرافی که ممکن است بر خوانا بودن متون تاثیر بگذارد، کنتراست است. اگر تضاد بین متن و پس زمینه کافی نباشد، ممکن است محتوا ناخوانا جلوه کند.
همین امر درباره کنتراست بیش از حد و برجسته شدن بیش از حد کلمات در یک پس زمینه نیز صدق می کند. اینکه چندین فونت برای نوشتن یک مطلب در یک صفحه واحد استفاده شود، بسیار غیرحرفه ای است و خواندن متن را نیز دشوار می کند، زیرا تایپوگرافی های متفاوت توجه بیننده را مرتب از سمتی به سمت دیگر می برند و این ممکن است حوصله سربر باشد، به طور خلاصه استفاده از کنتراست بیش از حد فونت و پس زمینه توجه خواننده را به جای متن و مفهوم آن به سمت فونت ها می برد و خواننده نمی تواند بر متن تمرکز کافی را داشته باشد. همیشه از یک یا نهایتاً دو فونت با دو نوع تنظیم در یک صفحه استفاده کنید تا جلوی این اشتباه را بگیرید.
5. نداشتن یک دستورالعمل واحد برای تایپوگرافی
دستورالعمل های تایپوگرافی در حقیقت به فونت ها شخصیت می دهند و سیستم چینش فونت و متن شما را هنگام طراحی برای یک برند یا یک وب سایت خاص، ثابت نگه می دارند و متاسفانه اغلب طراحان در توصیف و تنظیم آنها کم کاری می کنند. بدون وجود یک دستورالعمل ثابت تایپوگرافی، اندازه ها، فاصله ها، سازگاری و در یک کلام استفاده صحیح از حروف را نمی توان تعیین کرد. در نهایت شما باید بر سر دستورالعملهای ثابت برای طراحی یک تایپوگرافی به نتیجه ای واحد برسید.
قواعد تایپوگرافی که در طراحی وب به شما کمک می کنند
چند نکته مهم برای شما داریم که می تواند به شما کمک کند تا طراحی فونت های خود را به طور قابل توجهی ارتقا دهید و آن را برای خود و کاربران لذت بخش تر و موثرتر کنید:
1. هدر(Header) های کاربر پسند
فرقی نمی کند که محتوا چقدر مفید باشد اگر هدر یا همان سرصفحه خوبی نداشته باشید، مخاطب را جذب نخواهید کرد زیرا هدر یک مطلب اولین چیزی است که به چشم کاربر می آید. برای شروع باید بگوییم اندازه هدر باید به اندازه متن اصلی باشد، گسترده بودن بیش از حد هدر با محتوای بسیار کم ممکن است خواننده را از تعادلی که انتظار دارد خارج کند و باعث شود تمرکز خود را هنگام مطالعه از دست بدهد. همیشه از یک هدر کاربر پسند استفاده کنید، جملات اصلی و هدفمند را پررنگ (بولد) کنید و عباراتی را با حجم جستجوی بالا برای هدرها و سر تیترهای خود قرار دهید. هدر مطلب شما می تواند قابل کلیک نیز باشد.
2. داشتن فضای سفید
فضای سفید که اغلب به عنوان "فضای منفی" نیز شناخته می شود، فضای اطراف متن یا طرح گرافیکی شماست. استفاده مناسب از فضای سفید تضمین می کند که رابط کاربری و طراحی شما، مرتب و قابل مشاهده است و ظاهری تمیز و سازمان یافته به طراحی شما می دهد.
فضای سفید ممکن است حتی توجه بیشتری را نسبت به محتوای اصلی برانگیز و یک تجربه کاربری لذت بخش را از نظر زیبایی شناختی به مخاطبان وب سایت شما بدهد.
3. تراکم متن مناسب
تراکم متن به تعداد کلمات در یک ناحیه از وب سایت یا صفحه شما اشاره دارد. تراکم متن تاثیر زیادی بر خوانده شدن محتوای شما دارد. متغیرهایی مثل فاصله گذاری بین حروف و کلمات یا ارتفاع خطوط و اندازه فونت، همگی بر تراکم و چگونگی به نظر رسیدن آن در نظر کاربر تاثیر دارند.
برای اینکه این قاعده را رعایت کنید، باید یک چگالی متن واضح داشته باشید، باید بین همه عواملی که برشمردیم یک تناسب و تعادل برقرار باشد تا محتویات صفحه اعم از متن و عکسها نه خیلی فشرده و نه خیلی پراکنده باشند.
4. داشتن سلسله مراتب در تایپوگرافی
هر چیدمان تایپوگرافی به یک عنصر ضروری نیاز دارد و آن عنصر "سلسله مراتب" است. این کمک می کند تا نشان دهد کاربر باید از کجا شروع به خواندن کند و کجا باید متوقف شود، کجای متن دارای اهمیت بیشتری است و باید با دقت خوانده شود و کجای متن اهمیت کمتری دارد. با توجه به این قائده می توان اولویت های خواندن را به بینندگان ارائه داد و آنها می توانند مطالب را به ترتیب اهمیت دنبال کنند.
5. تاکید بر عناصر تایپوگرافی
تاکید بر جزئیات خاص در محتوای یک متن یکی دیگر از قائده های اصلی طراحی تایپوگرافی است. این شامل برجسته کردن لینک‌ها، پیوندها، پررنگ(بولد) کردن بخش های کلیدی متن و نمایش نقل قول است. همانطور که گفته بودیم تایپوگرافی در وب، نیازمند تعیین نقاط تمرکز برای خوانندگان دارد، شما با درست کردن این موارد، زمینه ای برای تمرکز به خوانند مطالبتان می دهید.
کلام آخر
خب امیدواریم با خواندن این اشتباهات بتوانید در طراحی و انتخاب فونت دقیق تر عمل کنید و با خواندن قواعد اصلی که برای شما بر شمردیم هم بتوانید طراحی موفقی داشته باشید . برای دیدن از آرشیو غنی فونت و تایپوگرافی در وبسایت ما می توانید به فروشگاه ما سر بزنید. اگر بیشتر علاقه دارید درباره دنیای فونت و تایپوگرافی بدانید مقاله قبلی ما با عنوان : از چه فونتی استفاده کنیم؟ 5 اصل برای انتخاب و استفاده از فونت مناسب را ببینید.