راهنمای ساده برای تایپوگرافی پاسخگو

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

اما، برای اکثر وب‌سایت‌ها، متن، محتوا، مهمترین عنصر است.

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

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

اصول نوع پاسخگو

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

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

نوع قابل تغییر اندازه با استفاده از rems

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

Rems جایگزین بهتری برای ems ارائه می دهد. آنها به روشی تقریباً یکسان کار می کنند، به جز یک تفاوت کلیدی: واحدهای rem نسبت به عنصر html هستند، نه عناصر والد منفرد. این باعث می‌شود که اندازه‌بندی مناسب نوع شما بسیار ساده‌تر باشد.

واحدهای رم اکنون در همه مرورگرهای اصلی مدرن از جمله Opera نسخه 11.6 و IE9 پشتیبانی می شوند. در حالی که ممکن است بخواهید برای مرورگرهای قبلی نسخه های جایگزین اضافه کنید، اما پشتیبانی گسترده ای برای rems وجود دارد که اکنون از آنها استفاده کنید.

از آنجایی که از واحدهای rem برای نوع اندازه استفاده می‌کنید، مطمئن شوید که بازنشانی را روی عنصر html خود اعمال کرده‌اید و نه عنصر body. بنابراین باید به این شکل باشد:

اکنون واحدهای rem شما به اندازه فونت پیش‌فرض دستگاه اعمال می‌شوند.

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

احتمالاً می خواهید چندین اندازه فونت را بر اساس اندازه های مختلف صفحه مشخص کنید، که کاری کاملاً ساده است. به عنوان مثال، CSS شما ممکن است چیزی شبیه به این باشد:

@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body { font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) {body {font-size:1.5rem;} } 

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

البته، می‌خواهید مشخصات بیشتری برای مواردی مانند عناصر h1 و مواردی از این قبیل ایجاد کنید. من به شدت توصیه می کنم از ابزاری مانند نمونه قلم وب استفاده کنید تا ببینید نوع شما واقعاً چگونه به نظر می رسد.

حفظ طول خط بهینه

در حالی که نوع قابل تغییر اندازه مفهومی کاملاً ساده است، حفظ طول خط مناسب در چندین دستگاه کمی فریبنده است. بحث های زیادی در مورد اینکه طول خط بهینه برای خوانایی چیست، وجود داشته است، اما با توجه به موسسه بایمرد، به نظر می رسد اجماع بین 50 تا 75 کاراکتر در هر خط باشد.

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

ابتدا، به اندازه‌های مختلف صفحه‌ای که برای آن طراحی می‌کنید نگاه کنید و بفهمید که از چه اندازه قلمی باید برای دریافت تقریباً 50 کاراکتر در یک خط استفاده کنید. برای صفحه نمایش های بسیار کوچک، ممکن است لازم باشد برای حفظ اندازه فونت خوانا، کمتر از 50 کاراکتر در هر خط داشته باشید، اما 50 باید هدف باشد. این یک نقطه شروع خوب برای اندازه فونت به ما می دهد.

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

بگذارید بگوییم که اندازه فونت پیش‌فرض برای یک دستگاه معین 16 پیکسل است، و شما می‌خواهید اندازه فونت شما 20 پیکسل باشد (فرض کنید ما از یک تایپ سریف مانند Droid Serif برای این مثال استفاده می‌کنیم). این بدان معناست که نوع آن را 1.25rem تعیین می کنید. در آن اندازه، عرض ظرفی با عرض حدود 675 پیکسل می خواهید. این به ما یک تعداد کاراکتر در دهه 60 را به طور متوسط ​​می دهد، که درست در عرض هدف ما است.

برای تعیین عرض ظرف، فقط از این کد استفاده کنید:

@media (min-width: 950px) { .container {width:675px;} } 

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

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

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

دوباره، کد انجام این کار بسیار ساده است:

@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; تعداد ستون: 2; شکاف ستون: 1em; } 

اکنون، در صفحه‌هایی با عرض بزرگتر از ۱۱۴۰ پیکسل، محتوای خود را به دو ستون تقسیم می‌کنید و طول خط خود را بسیار خوانا می‌کند.

استفاده از حروف نوشتاری جایگزین

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

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

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

کاری که در اینجا می‌توانیم انجام دهیم این است که از League Script برای نمایشگرهای بزرگ‌تر (iPad، دسکتاپ و غیره) استفاده کنیم، در حالی که برای نمایشگرهای کوچک‌تر (مانند آیفون یا سایر گوشی‌های هوشمند) به نسخه بزرگ‌تری از فونت بدنه تغییر می‌کنیم.

>

برای انجام این کار، به سادگی چیزی شبیه به این را مشخص کنید:

@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px ) { h1 {font-family:"Droid Serif", serif;} } 

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

نتیجه گیری

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

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

آیا در طراحی های خود به اندازه شبکه ها و تصاویر واکنش گرا بر تایپوگرافی واکنش گرا تاکید می کنید؟ چرا یا چرا نه؟