اندازه فونت، ارتفاع خط و عرض خط، به روش نسبت طلایی

طراحی سایت

..اندازه فونت، ارتفاع خط و عرض خط، به روش نسبت طلایی..
طراحی سایت

اندازه فونت، ارتفاع خط و عرض خط، به روش نسبت طلایی

در چند روز اخیر، من این سوال را در ذهن داشتم:

«بهترین ارتفاع خط برای اندازه فونت 14px بر روی صفحه من چیست؟»

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

ارتفاع خط

وبسایت Twitter Bootstrap در حال استفاده از عدد «۱.۴۲۸۵۷» به عنوان نسبتی بین اندازه فونت و ارتفاع خط می‌باشد. (۱.۴۲۸۵۷ * اندازه فونت = ارتفاع خط (line-height))

وبسایت HTML5 Boilerplate هم از «۱.۴» که تقریبا همین عدد است، استفاده می‌کند.

وبسایت Meduim و موسسه Zurb در حال استفاده از عدد مشابهی هستند: ۱.۵.

و صرفا جهت اطلاع، Adobe Topcoat از عدد ۱.۳۱۳ و Yahoo Purecss از عدد ۱.۵۸ استفاده می‌کنند، پس ما بهتر است از کدام مورد استفاده کنیم؟

دقت کنید که عدد ۱.۵ در کتاب‌های تایپوگرافی کلاسیک خیلی پیشنهاد می‌شود، پس مطالعه ما از این قانون کلیدی پشتیبانی می‌کند.

من به شخصه نمی‌دانم از کدام مورد استفاده کنم. آیا این اعداد جادویی هستند؟ آیا من می‌توانم عدد مختص خودم را بسازم؟

طبیعت یک نسبت شگفت‌انگیز به ما می‌دهد و این نسبت همه جا در اطراف ما، به عنوان نسبت طلایی (۱.۶۱۸) شناخته می‌شود. پس من از 14px * 1.618 به عنوان ارتفاع خط خود استفاده خواهم کرد. خب، حال پاسخ سوال اول خود را می‌دانم، اما یک سوال دیگر به ذهنم رسید:

«بهترین عرض خط برای اندازه فونت 14px و ارتفاع خط 23px چیست؟»

عرض خط

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

پس از مقداری تحقیق درباره بهترین CPL (Character Per Line = کاراکتر به ازای هر خط)، پی بردم که ۶۰ درصد مردم با هفتاد CPL سریع‌تر متون را می‌خوانند و خلاصه آن را در اینجا مشاهده می‌نمایید:

خطوط وبسایت Medium، در جهت سادگی در خواندن و درک مطلب بهتر، نرخ پنجاه و پنج CPL را به عنوان طول خود برای یک متن بر روی صفحه در مقایسه با خط‌های بیست و پنج یا صد CPLای دارند.

عرض خط بهینه برای یک ستون تکی، از ۴۵ تا هفتاد و پنج CPL متفاوت است. برای چند ستون، طول خط باید سی تا پنجاه CPL باشد.

طول خط باید حدود ۳۰ برابر اندازه نوع فونت باشد.

خوانندگان، خطوط کوتاه‌تر دارای ۸ تا ۱۰ کلمه یا ۴۵ تا ۶۰ کاراکتر را ترجیح می‌دهند.

هیچ مقدار ثابتی برای عرض خط در اینجا وجود ندارد؛ این عدد چیزی میان سی تا نود CPL یا ۸ تا ۱۲ کلمه است.

بیایید قدم آخر را با محاسبه عرض خط با این فرمول انجام دهیم:

cpl * میانگین عرض کاراکتر = عرض خط

constant کاراکتر / اندازه فونت = میانگین عرض کاراکتر

پس در نهایت:

اندازه فونت 14px

ارتفاع خط: (14 * 1.618) = 23px

عرض برای 50 CPL: 50 * (14 / 1.618) = 433px

دموی زنده

من این دمو را ساختم تا شما بتوانید ترکیبات ارتفاع خط و عرض خط مختلف را امتحان کنید.

منبع

165
30 آذر 1397
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

5550
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

573
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

480
04 دی 1397