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

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

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

بهترین اندازه فونت چیست؟

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

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

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

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

آنها دریافتند که سرعت خواندن زمانی سریع تر است که وقتی از بالا و پایین یک حرف به سمت چشم خطی بکشیم، ارتقاع حروف باید 0.3 زاویه سمت چشم باشد. پس با این فرمول حداقل اندازه متن 4.5 Point برای 16 اینچ است.

خوب این فرمولی علمی بود که شاید برای شما قابل درک نباشد. برای همین آن را در ادامه با اندازه فونت توضیح خواهم داد.

همه فونت ها مثل هم نیستند

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

تفاوت پوینت و پیکسل چیست؟

زمانی که شما اندازه فونت را مشخص می کنید از مقیاس پوینت Point استفاده می کنید. اما پوینت یک واحد اندازه گیری فیزیکی نیست. همیشه ما در هر اینچ 72 پوینت داریم، نه کمتر و نه بیشتر. اما اندازه پیکسل (کوچکترین واحد تصویر که می توان در یک نمایشگر ایجاد نمود) نسبت به اندازه صفحه و رزولوشن آن متفاوت است.

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

صفحات نمایش یکسان نیستند

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

برای مثال ما در یک لپ تاپ 11 اینچی می توانیم 135 پیکسل داشته باشیم، اما در یک تلویزیون 60 اینچ HD 37 پیکسل داشته باشیم. حتی این اعداد می توانند در انواع برند ها نیز متفاوت باشد.

کیفیت صفحه نمایش تلفن های همراه در دامنه وسیعی وجود دارند. از 167ppi تا 400ppi در بازار دیده می شود. اما به نظر می رسد بسیاری از مرورگر های موبایل با 167ppi کار می کنند (با اینکه شاید کیفیت اصلی صفحه نمایش بیشتر باشد). در واقع این رزولوشن اصلی  آیفون در سال 2007  است. و ما می توانیم از این عدد برای ساده نگه داشتن محاسبات استفاده کنیم، حتی با اینکه خیلی هم دقیق نیست.

تفاوت فونت در صفحه نمایش و کاغذ

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

با این حال یک صفحه نمایش با کیفیت یا Retina کیفیت تصویر بهتری را به چشم نسبت به صفحات نمایش قدیمی ارائه می دهد. شاید بتوان گفت این تحقیق برای دستگاه هایی مانند MacBook Pro ،Surface Book ، Chromebook Pixel و آی پد های Retina و تبلت ها و تلفن های همراه درست باشد.

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

چطور از این فرمول استفاده کنیم؟

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

1. ارتفاع فونت انتخاب شده
2. درجه قوس بصری
3. پیکسل های مجازی به نقاط فیزیکی
4. تراکم صفحه در ppi

بگذارید بگوییم ما از Times New Roman در 16 پونت استفاده می کنیم. ارتفاع آن 45٪ است. ویندوز صفحه نمایش را 96 پیکسل در نظر می گیرد، کاربر نیز در فاصله 16 اینچی (فاصله ای معمولی) بوده، و دستگاه نیز ThinkPad Carbon است. ارتفاع حاصله 0.26 درجه است. پس این یک اندازه مناسب است.

چقدر فونت می تواند کوچک باشد

چه اتفاقی می افتد اگر ما 12 پوینت برای Times New Roman انتخاب کنیم؟ شما ارتفاع 3.96pts را دریافت می کنید، که در فاصله 16 اینچ 0.20 درجه است. این فقط قابل خواندن برای کسانی که با دید 20/20 است، و برای بسیاری خیلی کوچک خواهد بود. برای متن اصلی یا Body نباید اندازه کمتری را انتخاب کنید. یا شما می توانید اندازه را تغییر نداده و فونتی انتخاب کنید که بلندتر است.

اندازه فونت در عمل

طراحی وب لزوما عملی است؛ ما همیشه نمی دانیم که محیط و تکنولوژی بازدید کنندگان سایت چیست. اجازه دهید برخی از داده ها را جمع آوری کنیم و با برخی از میانگین ها کار کنیم.

• فاصله چشم ها از صفحه نمایش به طور متوسط 23 اینچ برای کامپیوترهای دسکتاپ است و حدود 14 اینچ هنگام استفاده از یک لپ تاپ می باشد.
• میانگین صفحه نمایش دسکتاپ 104ppi است و میانگین لپ تاپ 121ppi است.
• اکثر ما هنگام خواندن یک پیام متنی، تلفن را 14 اینچ از چشمان مان دور نگه می داریم، هرچند می تواند که کاملا متفاوت باشد.

در این وضعیت 18pt برای فونت Times و 15pt برای Arial در دسکتاپ پیشنهاد می شود. (جدول کامل را در https://www.imarc.com/blog/best-font-size-for-any-device مشاهده نمایید)

توصیه ها

ما می توانیم اطمینان کامل داشته باشیم که حتی یک متن با ارتفاع کم مانند Times New Roman در اکثر دستگاه ها قابل خواندن است اگر اندازه آن را حداقل تا 14 پوینت باشددر اکثر دستگاه ها قابل خواند می باشد، اما انتخاب 18pt بهتر است البته اگر طراحی شما اجازه آن را می دهد. اگر از یک فونت خوانا تر مانند Arial استفاده می کنید، 12pt یک حداقل خوب است، 15pt بسیار ایده آل است.

خبر خوب این است که قانون سر انگشتی قدیمی ما شروع از 16pt به خوبی کار می کند. حداقل برای کاربران لپ تاپ، دسکتاپ و تلفن. اما اگر شما برای کامپیوتر اتاق کنفرانس طراحی می کنید، هیچگاه متن نباید از Arial 26pt کوچکتر باشد و بیشتر متن باید حداقل 33pt باشد.

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