بهترین مقدار برای line-height در CSS - فاصله میان خط ها

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-02 05:25:48

خاصیت line-height در کدهای CSS برای فاصله میان خط ها استفاده می شود. با این ویژگی ما می توانیم فاصله بین هر خط از متن های سایتمان را تنظیم کنیم تا کاربر و بازدیدکننده هنگام خواندن متن ها، احساس راحتی بیشتری داشته باشد. در حالت عادی، در صورتی که این مقدار را خودمان تعیین نکرده باشیم، مرورگر خودش از مقادیر پیش فرض استفاده می کند تا متن ها خواناتر به نظر برسند ولی بر اساس هر نوع طراحی نیاز است تا این مقدار شخصی سازی شود.

مقدار این ویژگی در CSS می تواند به هر شکلی باشد. یعنی اعداد درصدی مثل:

line-height: 140%;

در این حالت ما اعداد درصدی معمولا بالاتر از 100 درصد باید استفاده کنیم. چرا که 100 درصد به معنای به‌هم چسبیده است. تصاویر پایینتر را نگاه کنید.

یا بر اساس پیکسل:

line-height: 25px;

 

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

در همین انجمن تاکینا ما سه حالت درصدی را به شما نشان می دهیم.

در این حالت فاصله بین خط ها 100% تنظیم شده. این مقدار به معنای به هم چسبیده تلقی می شود.

جلوه بد و نامناسبی داره. حالا روی 150% امتحان کنیم:

این حالت مناسب و زیبا هست. حالا 200% را مشاهده کنید:

بهترین حالت خواندن متن ها با 200 درصد و البته یک مقدار کمتر از آن شاید 180 درصد باشد. برای پیکسل هم همین مقدار خوانایی را می توان با 28 پیکسل به دست آورد. البته بر اساس طرح خودتان باید این عدد را کم و زیاد کنید تا به میزان دلخواه برسید. 

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