چگونه به تایپوگرافی واکنش گرا مسلط شویم

 

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

 

واحدهای تایپوگرافی از گذشته تا کامپیوتر

واحدهای باستانی ارائه شده بر روی مرد ویترویی که توسط لئوناردو داوینچی کشیده شده است.

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

فونت ها با اندازه نقطه اندازه گیری می شوند: شما هرگز نمی گویید “من از اندازه فونت 3.527 میلی متر استفاده کردم”، می گویید “من از اندازه فونت 10 نقطه استفاده کردم.”

1 اینچ = 72 امتیاز: 1 نقطه = 1/72 اینچ یا 1 نقطه = 0.3527 میلی متر. این از دهه 1980 در سراسر جهان پذیرفته شده است، قبل از اینکه چندین نقطه تایپوگرافی از فوت، اینچ یا میلی متر مشتق شده باشد.

Picas در PostScript استفاده می شود: PostScript یک زبان کامپیوتری است که ظاهر طرح بندی ها را توصیف می کند و برای چاپ طرح های با وضوح بالا استفاده می شود.

پیکسل‌ها و ems در CSS استفاده می‌شوند: طراحی‌های وب به واحدهای CSS ترجمه می‌شوند که معمولاً پیکسل هستند اما ems نیز قابل استفاده هستند.

 

اهمیت کاراکترها در هر خط (CPL)

 

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

این مثال از 60 در مقابل 90 CPL مشکلات خوانایی را نشان می دهد. خواندن کدام یک از این مثال ها راحت تر است؟

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

 

  • حداکثر 60 کاراکتر: هنگام کار با ردیف‌هایی از متن (که در ستون‌ها نیستند) از آن استفاده کنید.
  • حداکثر 45 تا 60 کاراکتر: هنگام قرار دادن متن در چندین ستون از آن استفاده کنید.
  • حداکثر 70-75 کاراکتر: هنگام قرار دادن متن در 1 ستون از آن استفاده کنید.

 

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

 

اندازه نقطه فونت ضربدر 2 = عرض ستون (در پیکا)

1 پیکا = 12 امتیاز

1 em = اندازه نقطه خاص فعلی

دلیل استفاده از واحدهای تایپوگرافی برای این منظور این است که تعریف این نوع روابط را سازگار و آسان می کند. بیایید به قوانین بالا در عمل نگاه کنیم … می گوییم می خواهیم بفهمیم که عرض ستون در ems چقدر است (نه picas) و از فونت 10 نقطه ای استفاده می کنیم:

 

10 امتیاز ضرب در 2 = عرض ستون 20 پیکا

اگر 20 پیکا برابر با 12 امتیاز باشد، 20 در 12 = 240 امتیاز ضرب می شود.

اگر 1 em برابر با 10 امتیاز باشد، 240 امتیاز تقسیم بر 10 امتیاز = 24 em

 

چالش های تایپوگرافی پاسخگو

یک متن سیال و 1 ستونی به این معنی است که ما CPL را کنترل نمی کنیم.

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

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

 

رویکرد Goldilocks (و محدودیت‌های آن)

درجه بندی نوری فونت Sybarite توسط Dunwitch Type Founders.

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

از متن بزرگتر و اندازه های نسبی استفاده کنید

از فونت ها برای آیکون ها استفاده کنید (اندازه آنها قابل تغییر است و می توان با CSS استایل دهی کرد)

استفاده از فونت های وب که برای دستگاه های تلفن همراه بهینه شده اند (از فونت های مختلف برای انواع صفحه نمایش استفاده کنید)

از مقیاس های معنی دار بر اساس نسبت طلایی استفاده کنید

از نسبت CPL مناسب (50-75) استفاده کنید

اندازه نوع پایه را برای مطابقت با اندازه و وضوح صفحه نمایش دستگاه تغییر دهید (هنگام استفاده از ems در CSS، همه اندازه‌های فونت به نسبت اندازه فونت پایه بیان می‌شوند)

اندازه فونت را بر اساس فاصله بین صورت و مانیتور تنظیم کنید (غیرعادی ترین مفهومی که من با آن مواجه شدم)

هر یک از مفاهیم دلایل خوبی در پشت خود دارند – درجه فونت، اشاره و مقیاس نوری به کیفیت نوع مربوط می شود، و نسبت طلایی مدولار موضوع شگفت انگیزی است، نه فقط برای نوع، بلکه به طور کلی طراحی. اما ما فقط مفاهیمی را که مستقیماً به فلسفه RWD و گردش کار مرتبط هستند، مورد بحث قرار خواهیم داد:

اندازه نوع پایه را برای مطابقت با اندازه و وضوح صفحه نمایش دستگاه تغییر دهید

از نسبت CPL مناسب (50-75) استفاده کنید

برخی از افراد با استفاده از واحدهای نسبی مانند em و % (و نه واحدهای مطلق یا ثابت مانند نقاط) با این مسائل برخورد می‌کنند – مزیت این است که همه اندازه‌های متن به یک پارامتر محدود می‌شوند. با این حال، این مفهوم قدیمی‌تر از خود RWD است و CPL یا وضوح صفحه نمایش را در نظر نمی‌گیرد. یکی از راه حل هایی که CPL و وضوح صفحه را در نظر می گیرد، رویکرد Goldilocks است.

رویکرد Goldilocks در وضوح های مختلف صفحه نمایش.

نکته منحصر به فرد در مورد این رویکرد با کمتر از 3 کیلوبایت CSS است، آن ادعا می کند که طرح بندی هایی ایجاد می کند که حدود 66 CPL را در هر ستون حفظ می کند و اندازه فونت را برای دستگاه های مختلف تنظیم می کند (با در نظر گرفتن وضوح!). اینها دستاوردهای بسیار خوبی هستند و همه آنها بدون یک خط کد جاوا اسکریپت هستند! اما… دنیا کامل نیست و این دستاوردها همچنان محدودیت هایی را تحمیل می کنند:

رویکرد Goldilocks برای تعیین اندازه em به اندازه فونت پیش‌فرض مرورگر متکی است. در نتیجه، ما درجاتی از کنترل روی ظاهر صفحه را از دست می‌دهیم، زیرا نگه داشتن چیزها در ems دشوار است، زیرا تصاویر همیشه با پیکسل اندازه‌گیری می‌شوند.

به ما اجازه نمی دهد از چیدمان های سیال استفاده کنیم.

 

راه حل تایپوگرافی پاسخگو من

مثالی که من ایجاد کردم که راه حل نوع پاسخگو من را در بر می گیرد.

در حالی که من از سادگی رویکرد Goldilocks بسیار قدردانی می‌کنم، اما راه‌حلی می‌خواستم که به من امکان می‌دهد 100٪ از املاک صفحه نمایش (بدون توجه به اندازه) استفاده کنم و به من اجازه دهد همیشه 60 CPL داشته باشم در حالی که از یک چیدمان روان استفاده می‌کنم. هیچکدام را پیدا نکردم با توجه به تعداد وب سایت های RWD که اخیراً ایجاد شده اند، این کمی تعجب آور بود. اما راه حلی که من پیدا کردم بسیار ساده است.

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

پیاده سازی طرح بندی ستون های متعدد: می توانید این کار را با استفاده از تعداد ستون های CSS انجام دهید.

تغییر عرض ستون از ems به پیکسل: می توانید با استفاده از این معادله ساده این کار را انجام دهید – اندازه فونت بدن = عرض ستون در پیکسل / عرض ستون مورد نظر در واحد em

این مثالی که من ایجاد کردم را بررسی کنید که این راه حل های نوع پاسخگو را در خود جای داده است. این یک راه اندازی محافظه کارانه بر اساس قانون قدیمی 24 ستون ems است. اسکریپت عرض ستون را بر حسب پیکسل بررسی می کند، این عدد را بر 24 تقسیم می کند و این عدد را به اندازه فونت بدنه اختصاص می دهد. این یک فریمورک CSS نیست – فقط نمونه‌ای از روش دیگری برای پاسخگو کردن تایپوگرافی و در عین حال بهینه‌سازی متن برای خوانایی در طرح‌بندی‌های سیال است.

 

برخی از راه حل های شما برای تایپوگرافی واکنش گرا چیست؟ لطفا در نظرات به اشتراک بگذارید.

بدون دیدگاه

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

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