راهنمای مبتدی برای تایپوگرافی وب سایت

طراحی برای خوانایی

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

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

تایپوگرافی وب سایت چیست؟

هر وب سایتی دارای متن است و زمانی که متن وجود دارد، تایپوگرافی نیز وجود دارد. برای تعریف کلی، تایپوگرافی وب سایت ظاهر متن را در وب سایت تعیین می کند. نحوه نمایش کلمات در صفحه، هم سبک (فونت، اندازه، فاصله) و هم نحوه نمایش متن در صفحه است.

 

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

دامنه توجه کوتاه تر، به خصوص آنلاین؛

دسترسی، زیرا افراد به روش های مختلف با متون آنلاین تعامل دارند.

سرچشمه‌پذیری، زیرا مردم اغلب وقت لازم برای خواندن کل متن را ندارند.

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

نکته مهمی که باید در مورد تایپوگرافی بدانید این است: اگر کار کند، متوجه آن نخواهید شد. اگر کار نمی کند، به احتمال زیاد، به اندازه کافی در وب سایت نخواهید ماند.

اصطلاحات تایپوگرافی وب

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

1. تایپ فیس و فونت

تایپ فیس یک ظاهر خاص و مجموعه ای از خصوصیات است که برای گروهی از عناصر الفبایی، عددی و نقطه گذاری اعمال می شود. اگر "آیا این فونت ها نیستند؟" اولین سوال شما بود، شما تنها نیستید: این یک تصور غلط رایج است.

فونت نمونه خاصی از فونت است. آنها بخش هایی از فونت هستند. سپس آنها را بر اساس وزن (پررنگ یا روشن)، اندازه (14 پیکسل یا 24 پیکسل)، یا سبک سازی دیگر (مورب، زیرخط دار، و غیره) متمایز می کنند. برای مثال، Helvetica Bold (16px) و Helvetica Regular Italic (24px) فونت هستند ، و بخشی از تایپ فیس هلوتیکا هستند. تایپ‌فیس‌ها اغلب خانواده فونت‌ها نیز نامیده می‌شوند، زیرا اصطلاح گسترده‌ای از فونت‌هایی با ویژگی‌های مشابه هستند.

بسیاری از فونت ها تنها با دو نوع قلم مطابقت دارند: Serif و Sans-Serif. فونت های Serif معمولاً حاوی تزئینات کوچک در انتها هستند، در حالی که فونت های Sans-Serif اینگونه نیستند. در اینجا یک راه آسان برای متمایز کردن آنها وجود دارد: "Sans" در فرانسوی به معنای بدون است.

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

2. کرنینگ

Kerning فضای افقی بین دو کاراکتر یک کلمه است. فونت های مختلف دارای هسته های متفاوتی هستند که برای بهبود خوانایی و جلوگیری از شکاف های ناخوشایند در کلمات طراحی شده اند. هسته ها همچنین ممکن است بین کاراکترهای مختلف یک کلمه برای اهداف یکسان متفاوت باشند.

در حالت دوم، هسته بین تکرار T برای بهبود خوانایی اضافه می شود.

3. ردیابی

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

4. پیشرو

لیدینگ یا ارتفاع خط اصطلاحی است برای فاصله خطوط در تایپوگرافی و نقش اساسی در خواندن متن در وب سایت شما دارد. با افزایش لید، فضای بین خطوط را افزایش می دهید که به طور کلی خوانایی را بهبود می بخشد. به عنوان یک قاعده، برای خوانایی خوب، علامت اصلی باید حدود 30٪ بیشتر از اندازه کاراکتر باشد. به عنوان مثال، اگر اندازه کاراکتر حروف شما 20 پیکسل است، پیشروی بین خطوط در 26 پیکسل توصیه می شود.

گفته می شود استفاده صحیح از فضای سفید در متن باعث افزایش درک متن می شود، زیرا به صورت بصری محتوا را به تکه های قابل هضم جدا می کند و صفحه را شلوغ نمی کند.

5. سلسله مراتب

سلسله مراتب ترتیب متن در وب سایت شما است. بیشتر وب‌سایت‌ها، به‌ویژه وب‌سایت‌های پرمتن (مانند پست‌های وبلاگ) سعی می‌کنند متن‌ها را به بخش‌های کوچک‌تر تقسیم کنند تا آنها را قابل هضم و اسکن‌تر کنند. این بخش ها به عنوان سرفصل ها شناخته می شوند.

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

در وب‌سایت‌ها، سلسله مراتب متن را می‌توان از طریق فونت‌ها، اندازه‌های فونت، رنگ‌ها یا سایر ویژگی‌های مختلف تأکید کرد. به عنوان مثال، در این مقاله، اصطلاحات تایپوگرافی وب یک عنوان 2 (H2) است در حالی که اصطلاحات ذکر شده عنوان 3 (H3) هستند.  عنوان وبلاگ معمولاً عنوان 1 است (H1.) در اینجا نمونه ای از سلسله مراتب متن در ویرایشگر متن ما به نمایش گذاشته شده است.

انتخاب بهترین فونت برای خواندن روی صفحه

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

 

با این اوصاف، نکاتی وجود دارد که باید هنگام انتخاب فونت برای وب سایت خود در نظر بگیرید. آنها تجربه خواندن در وب سایت شما را بسیار دلپذیرتر می کنند و تجربه مشتری بهتری را تضمین می کنند.

1. تعداد فونت های استفاده شده را به حداقل برسانید

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

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

به نمونه های ترکیب فونت زیر نگاه کنید. در تصویر اول، اگرچه فونت ها به خانواده های مختلف فونت تعلق دارند و به نظر کاملاً متفاوت از یکدیگر هستند، اما هیچ یک از فونت ها بر دیگری سایه نمی اندازد. این دو فونت تعادل خوبی دارند و ترکیبی هماهنگ را ایجاد می کنند.

حالا بیایید به گفته site.pro نگاهی به یک جفت فونت دیگر بیندازیم. در این مثال از ترکیب Baskerville + Impact، Impact بسیار باسکرویل را تحت الشعاع قرار می دهد. توجه را به خود جلب می کند و امکان نادیده گرفتن قسمت اول متن را ایجاد می کند.

2. سعی کنید و به فونت های استاندارد پایبند باشید

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

3. از حروفی استفاده کنید که در دستگاه های مختلف به خوبی به نظر می رسد

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

سعی کنید از اسکریپت هایی که خط شکسته یا تزئینی هستند اجتناب کنید. آنها بسیار زیبا به نظر می رسند، اما با کاهش اندازه آنها، مانند فونت Comforter Brush زیر، کمتر و کمتر خوانا می شوند.

وب سایت های جفت کردن فونت برای وب سایت شما

اکنون، بیایید نگاهی به چند جفت فونت زیبا بیندازیم که می توانید برای وب سایت خود برای دستیابی به ظاهری متعادل و زیبا از آنها استفاده کنید.

1. Lora & Merriweather
2. Roboto & Archivo Black
3. Bebas Neue & Old Standard TT

نتیجه

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