فونت سایز خوانا و مناسب در طراحی وب سایت

فونت سایز خوانا و مناسب در طراحی وب سایت

استفاده از سایز فونت خوانا در طراحی وب‌سایت

Legible font size in web design

استفاده از فونت خوانا در طراحی وب سایت

معیارهای خوانا بودن فونت در طراحی وب‌سایت

متن باید براحتی خوانده شود

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

برای چک کردن سایز فونت (font-size) محتوای وب سایت خود، می توانید از ابزار سئوی موبایل استفاده کنید.

سایز فونت را طوری تعریف کنید که در تمام دستگاه ها خوانا باشد

روش های مختلفی برای رسیدن به هدف فوق وجود دارد که ما در اینجا لیست زیر را عنوان می کنیم:

  • خرید یک قالب ریسپانسیو (mobile theme)
  • استفاده از مدیا کوئری در طراحی واکنش گرا (media query in responsive design)
  • طراحی چند قالب برای ورژن های مختلف سایت (different themes for different versions)

انتخاب هریک از روش های بالا، معمولا به دو عامل بستگی دارد: مهلت زمانی که شما دارید و توانایی شما در طراحی یک قالب واکنش‌گرا (responsive template).

۱- خرید قالب واکنش‌گرا (Buy a mobile theme):

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

۲- استفاده از مدیا کوئری در طراحی واکنش گرا (media query in responsive design):

اگر شما تجربه ای در استفاده و تعریف استایل های css دارید، می توانید با فراگیری آموزش های لازم در زمینه طراحی قالب واکنش گرا، font size موردنظرتان را در اسکرین های متفاوت اعمال کنید.

Font-size چگونه کار می کند؟

 

Font-size چگونه کار می کند؟

سایز فونت (font size) در فایل css قالب سایت تان تعریف می شود. در صورتیکه font-size تعریف نشود، خود مرورگر از سایز پیش فرض (۱۶ پیکسل) استفاده می کند. استایلی که توسط آن شما می توانید بر روی سایز فونت تسلط داشته باشید، font-size می باشد که عموما بصورت زیر تعریف می شود:

p{font-size:120%;}

font-size را می توان با واحدهای مختلفی تعریف کرد: پیکسل (px)، پوینتس (ptEms (em) و درصد (%)

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

پیشنهادهای گوگل در مورد طراحی ریسپانسیو و اندازه فونت (font size) بصورت زیر می باشد:

  • اندازه فونت پیش فرض را ۱۶ پیکسل (font-size:16px) تعریف کنید.
  • Font size را نسبت به سایز فونت پایه (یعنی ۱۶ پیکسل) در اسکرین های مختلف بطور نسبی تعریف کنید تا استاندارد تایپوگرافیک (typographic) را رعایت کرده باشید.
  • متون در صفحات وب، نیاز به رعایت فاصله عمودی بین خطوط می باشند. بهتر است مقدار پیش فرض مرورگرها (یعنی line-height:1.2em) بعنوان ارتفاع خطوط (فاصله بین خطوط پاراگراف ها) انتخاب شود.
  • از تعریف فونت های زیاد و سایزهای متعدد اجتناب کنید. زیرا باعث بهم ریختگی در طرح قالب سایت خواهد شد.

استفاده از فونت سایز پیش فرض ۱۶ پیکسل:

 

استفاده از فونت سایز پیش فرض 16 پیکسل

فونت سایز بدنه صفحات وب سایت خود را روی ۱۶px ست کنید. بدین منظور باید font-size را برای html و یا body تعریف کنید. (بصورت body{font-size:16px;}).

تعریف فونت سایز نسبت به سایز پایه (۱۶px) و رعایت استاندارد تایپوگرافیک:

 

تعریف فونت سایز نسبت به سایز پایه (16px) و رعایت استاندارد تایپوگرافیک

اکنون فونت سایز ۱۶ پیکسل را برای کل صفحه وب تعریف کردیم. نوبت آنست که سایز فونت المان های مختلف مانند H1 و H2 و… را نیز ست کنیم. مسلما سایز اینگونه المان ها از اندازه پیش فرض ۱۶ پیکسل بزرگتر خواهد بود.

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

همانطور که در تصویر فوق مشاهده می شود، سایز هدینگ ۱ (HEADING1:H1) بصورت ۲۵۰% تعریف شده است. بدین معنی می باشد که سایز فونت H1 دو و نیم برابر حالت پیش فرض (۱۶پیکسل) باشد. بطور کلی تعریف فونت سایز بصورت درصدی، بدین معنی می باشد که سایز فونت هر المان چند برابر کوچکتر و یا بزرگتر از اندازه پیش فرض (۱۶پیکسل) می باشد.

فونت سایز ریسپانسیو

تعیین سایز فونت صفحات وب سایت بصورت درصدی، این فایده را دارد که بدون توجه به اینکه فونت سایز پیش فرض چقدر باشد، سایز المان های متنی وب سایت (مانند Heading1 و Heading2 و…) را بصورت نسبی تعریف کنیم. مثلا سایز فونت متن پاراگراف ۲/۱ برابر سایز پیش فرض باشد و یا اینکه سایز هدینگ اول (H1) 5/2 برابر سایز پایه باشد. چه وب سایت در یک موبایل کوچک نمایش یابد و چه در دسکتاپ های عریض و بزرگ تفاوتی در این نسبیت رخ نخواهد داد.

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

رعایت فاصله عمودی بین متون وب سایت (Line Height):

 

رعایت فاصله عمودی بین متون وب سایت (Line Height)

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

پیشنهاد گوگل، رعایت فاصله عمودی ۱٫۲ بین خطوط می باشد (line-height:1.2;) این بدین معنی است که فاصله بین خطوط یک متن در وب سایت، ۱٫۲ برابر سایز آن متن باشد.

بنابراین باید استایل های css خود را بصورت زیر تعریف کنیم:

p{font-size:120%;line-height:1.2;}

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

با تعریف ارتفاع خط برابر ۱٫۲ (line-height: 1.2;) می توان این به این اطمینان رسید که محتوای وب سایت در موبایل خوانا باشد و خطوط آن تو در تو نمی باشند.

مشکلات لیست لینک‌ها (Link list issues):

معمولا لینک ها به فضای بیشتری در موبایل نیاز دارند و این قضیه می تواند در لیست لینک‌ها یعنی ol یا ul (ordered or unordered lists) بروز بیشتری داشته باشد. به منظور حل این مشکل، استایل زیر را در فایل css سایت خود تعریف کنید:

ul{line-height:200%;}

با تعریف قطعه کد بالا، این اطمینان را کسب می کنید که لیست لینکها (معمولا ul) در اسکرین های کوچکتر مانند موبایل، فضای بیشتری برای نمایش خواهد داشت و اینکار با افزایش فاصله عمودی بین آیتم های لیست (line-height) انجام می شود.

در دستگاه های مختلف (موبایل، تبلت، دسکتاپ) می توانید با تغییر ۲۰۰% به نسبت سایز اسکرین موردنظر، خوانایی لینک ها را افزایش دهید.

اجتناب از تعریف فونت های زیاد و سایزهای متعدد:

 

اجتناب از تعریف فونت های زیاد و سایزهای متعدد

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

نحوه خوانا کردن فونت در تمام دستگاه‌ها:

سایز متن در دستگاه های مختلف توسط مدیا کوئری (media query) در css انجام می شود. ما می توانیم به مرورگر اعلام کنیم در اسکرین های کوچک مانند موبایل یک فونت و سایز خاصی نمایش داده شود و در دسکتاپ فونت سایز دیگری.

بیایید نگاهی به یک استایل ساده در این زمینه بیاندازیم:

html{font-size:100%;}

@media(min-width:60em){html{font-size: 100%}}

 

در استایل فوق اعلام کرده ایم فونت سایز تمام المان های صفحه وب در دستگاه های موبایل و دسکتاپ یکسان باشد (۱۰۰%) با توجه به اینکه فونت پایه ۱۶ پیکسل می باشد، بنابراین فونت سایز در موبایل و دسکتاپ ۱۶ پیکسل خواهد بود. این فونت سایز ممکن است در دستگاه های مختلف، بصورت متفاوتی نمایش یابد، اما مطمئنا مطابق تصویر زیر، در تمام اسکرین ها خوانا و منظم خواهد بود.

نحوه خوانا کردن فونت در تمام دستگاه‌ها

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

فوت سایز مناسب برای وب

بنابراین با این سناریو، راه حل مشکل، استفاده از مدیاکوئری (media query) می باشد. در مثال اول، فونت سایز را در هر دو دستگاه موبایل و دسکتاپ ۱۰۰% درنظر گرفته ایم. اما در این مثال می خواهیم فونت سایز را در دسکتاپ کمی کوچکتر از فونت سایز پایه (۹۰%) تعریف کنیم و در اسکرین های کوچک مانند موبایل، فونت سایز کمی بزرگتر از فونت پیش فرض باشد (۱۱۰%)

html{font-size:110%;}

@media(min-width:60em){html{font-size: 90%}}

با اعمال استایل های فوق به فایل css قالب سایت، تصویری مشابه زیر را خواهیم داشت:

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

۳- طراحی نسخه های مختلف از وب سایت:

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

توجه داشته باشید که فونت سایز پایه برابر ۱۶ پیکسل و فاصله عمودی بین خطوط نیز برابر ۱٫۲ باشد تا خوانایی محتوای سایت از بین نرود.

امیدوارم از این آموزش استفاده لازم را برده باشید و در صورتی که فونت سایز را با واحدهای متفاوتی در وب سایت خود تعریف کرده اید، لطفا تجربه خود را از طریق صفحه تماس با ما و با ایمیل [email protected] برای ما ارسال نمائید.

منبع: https://varvy.com

به این مقاله امتیاز دهید!

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

18 + 17 =

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"