نوع اندازه گیری با دنباله های لوکاس

ارتباط بین متن و بقیه صفحه یکی از ویژگی های کلیدی هر طراحی است.

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

در نتیجه ما اغلب متوجه می‌شویم که طراحان وب به گزینه‌های پیش‌فرض ارائه‌شده توسط برنامه‌ها – 8pt، 10pt، 12pt، 14pt، 18pt – برای یافتن راه‌حل بهتر، بازمی‌گردند.

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

 

دنباله های لوکاس

دنباله فیبوناچی — اولین بار در قرن سیزدهم توسط لئوناردو فیبوناچی در غرب ثبت شد — مجموعه اعداد صحیح زیر است (اعداد کامل):

0، 1، 1، 2، 3، 5، 8، 13، 21، 34، 55، 89، 144، 233، 377، 610، 987… تا بی نهایت

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

2، 1، 3، 4، 7، 11، 18، 29، 47، 76، 123، 199، 322، 521، 843… تا بی نهایت

دنباله فیبوناچی و اعداد لوکاس هر دو تغییرات خاصی از دنباله لوکاس عمومی هستند.

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

1. هر عدد داده شده در دنباله مجموع دو عدد قبلی است که در این فرمول توضیح داده شده است: n = n-1 + n-2
2. دو عدد اول در دنباله – که به عنوان اعداد دانه شناخته می‌شوند – به صورت دلخواه انتخاب می‌شوند.

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

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

مهمتر از آن، Lucas Sequences یک چارچوب مقیاس پذیر برای تنظیم نوع ارائه می دهد که هم برازنده و هم ریتمیک است.

 

تعیین شماره اولین دانه ما

بحث های زیادی در مورد اندازه متن متن صحیح برای یک وب سایت وجود دارد. 12px هنوز رایج ترین است، اما دیدن چیزی از 10px تا 16px غیرعادی نیست. این اساساً ناشی از عدم درک درستی از معنای اندازه گیری فونت است. عجیب است، برای آن دسته از ما که به استانداردسازی عادت داریم – یا حداقل آرزوهای استانداردسازی – هیچ معیار استانداردی در طراحی نوع وجود ندارد. دو طراح نوع متفاوت که دقیقاً یک طرح را در نرم افزار تولید فونت ترسیم می کنند، احتمالاً آن را در اندازه های مختلف ترسیم می کنند. تفاوت بین حروف چاپی مختلف، جای تعجب نیست که بسیار رایج است.

پاسخ به اینکه از کجا باید شروع کرد بسیار ساده است. اندازه متن پیش‌فرض ما 1em خواهد بود، به این معنی که اولین شماره اولیه ما 1 خواهد بود.

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

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

 

تعیین شماره دانه دوم ما

راهبردهای متعددی برای تعیین تعداد دانه دوم برای ما وجود دارد. برخی از طراحان ترجیح خاصی دارند و 1.2em یا موارد مشابه را انتخاب می کنند. طراحان دیگری که از عرفان نسبت طلایی لذت می برند ممکن است دوست داشته باشند از 1.618em استفاده کنند.

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

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

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

پیدا کردن قد x ما

برای یافتن ارتفاع x فونت خود، باید چیزی مانند Photoshop یا Illustrator را باز کنیم و متنی را اضافه کنیم که شامل یک ascender (مانند ‘d’) و حرف ‘x’ باشد. اگر از یک ویرایشگر بیت مپ مانند فتوشاپ استفاده می کنید، متن را تا حد امکان بزرگ کنید تا مطمئن شوید نتیجه دقیقی به دست می آورید. در این مثال‌ها، فونت را روی 500pt تنظیم کرده‌ام تا آن را اندازه‌گیری کنم.

بعد، ارتفاع را از خط صعودی تا خط پایه و ارتفاع را از بالای x تا خط پایه را اندازه بگیرید.

البته، اگر به اندازه کافی خوش شانس هستید که به نرم افزار طراحی فونت خوب دسترسی دارید، می توانید به سادگی فایل فونتی را که استفاده می کنید باز کنید و x-height و ascender height را بخوانید.

حالا x-height را بر ارتفاع صعودی تقسیم کنید تا ارتفاع x را به صورت درصدی از کل پیدا کنید:

x-height / ارتفاع صعودی * 100 = شماره دانه دوم

در مورد فونت در مثال (که Museo Slab است) نتیجه این است:

253 / 353 = 0.71671388

یا 0.716em

چرا ما از بالای صعود به پایین نزول اندازه گیری نمی کنیم؟ از آنجا که کاراکترها تمایلی به داشتن هر دو صعود و نزول ندارند (یک استثناء گاه به گاه حرف “f” است) و در نتیجه روابط درون اشکالی که طراحی حروف چاپی را تشکیل می دهند بر اساس رابطه بین ارتفاع x و یک ساقه بلندتر است. به جای آن می توان نزول را اندازه گرفت، اما از آنجایی که ارتفاع کلاهک (ارتفاع سرپنجه ها) معمولاً بسیار نزدیک به صعود است، ترجیح من است. اگر متوجه شدید که از یک تایپ با کیفیت غالب تر استفاده می کنید – برای مثال کنتراست در ضخامت خطوط مختلف – ممکن است بخواهید از آن مقدار به جای نسبت صعودی به ارتفاع x استفاده کنید.

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

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

 

ایجاد دنباله ما

بنابراین، ما دو عدد بذر خود را داریم: 1em و 0.716em و فرمول n = n-1 + n-2 را داریم:

1 + 0.716 = 1.716
0.716 + 1.716 = 2.432
1.716 + 2.432 = 4.148
و غیره

که به ترتیب زیر منجر می شود:

1، 0.716، 1.716، 2.432، 4.148، 6.58، 10.728، 17.308، 28.036… تا بی نهایت

 

بیت طراحی

تا کنون، ما راه خود را از طریق برخی از ریاضیات اساسی، اما مفید انتخاب کرده‌ایم، و به دنباله‌ای رسیده‌ایم که طیفی از اندازه‌ها را از 1em تا 28.036em و در صورت لزوم بیشتر می‌دهد.

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

متوجه می‌شوید که با p set روی 0.716 و h4 روی 1 شروع می‌کنیم، علی‌رغم این واقعیت که به ترتیب صحیح نیست. دلیل آن این است که از نظر سلسله مراتبی h4 از p اهمیت بیشتری دارد. دنباله لوکاس ما نباید سلسله مراتب را در صفحه دیکته کند، بلکه روابط مقیاس عناصر مختلف را دیکته می کند. فقط محتوای شما می تواند سلسله مراتب را دیکته کند.

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

دقیقاً از همان دنباله لوکاس نیز می‌توان برای ایجاد یک طرح محفوظ‌تر و تجاری‌مانند استفاده کرد:

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

 

انعطاف پذیری

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

خوشبختانه، CSS این وضعیت را به راحتی مدیریت می کند. از آنجایی که ما از ems برای اندازه‌های خود استفاده می‌کنیم، می‌توانیم نوع خود را با استفاده از Lucas Sequence خود تنظیم کنیم و سپس کل را با تنظیم یک اندازه پیش‌فرض روی برچسب بدنه، حفظ ریتم طراحی خود، اما افزایش یا کاهش مقادیر واقعی، مقیاس بندی کنیم.

در این تصویر توجه کنید که اندازه‌های p، h2 و h1 یکسان باقی می‌مانند، همه از دنباله ما گرفته شده‌اند. این تغییر در اندازه فونت تگ بدنه (0.8em در سمت چپ و 1.4em در سمت راست) است که به سمت پایین کاهش می یابد و نتایج کاملاً متفاوتی ایجاد می کند.

 

در نهایت

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

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