آیا این نوع طراحی من را چاق می کند؟

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

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

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

 

مقیاس تایپوگرافی چیست؟

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

مقیاس به تعیین اندازه و قرارگیری عناصر متن در ارتباط با یکدیگر کمک می کند. مخصوصاً برای طراحی وب، مقیاس نوع بصری اغلب با برچسب‌های CSS شما مطابقت دارد (مانند h1، h2، h3، و غیره).

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

مقیاس باید بر اساس اندازه متن اصلی باشد. (همیشه ابتدا یک فونت و اندازه برای آن تعیین کنید). سپس مقیاس را حول این تایپوگرافی اصلی بسازید. مطمئن نیستم از کجا شروع کنم؟ Google یک توصیه محکم دارد:

1. از اندازه فونت پایه 16 پیکسل CSS استفاده کنید. اندازه را بر اساس ویژگی های فونت مورد استفاده تنظیم کنید.
2. از اندازه های مربوط به اندازه پایه برای تعریف مقیاس تایپوگرافی استفاده کنید.
3. متن نیاز به فضای عمودی بین کاراکترها دارد. توصیه کلی این است که از ارتفاع خط پیش فرض مرورگر 1.2 em استفاده کنید.
4. تعداد فونت های استفاده شده و مقیاس تایپوگرافی را محدود کنید.

 

ایجاد هماهنگی و ریتم

یک مقیاس تایپ بیشتر از اینکه به کاربران کمک کند در کپی حرکت کنند، هماهنگی و ریتمی را برای جریان متن ایجاد می کند. این در هر دستگاهی مهم است.

پس از کجا شروع می‌کنید؟

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

نوع دستگاه	حداقل اندازه	40% توصیه (برای استفاده آسان تنظیم شده است)	80% حداکثر (برای استفاده آسان تنظیم شده است)
تلفن کوچک	4	5.6 (6)	7.2 (7.5)
تلفن بزرگ	6	8.4 (8.5)	10.8 (11)
فبلت	7	9.8 (10)	12.6 (13)
تبلت	8	11.2 (11.5)	14.4 (14.5)
لپ تاپ/رومیزی	10	14 (14)	18 (18)

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

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

ساده‌ترین راه برای بزرگ‌تر کردن سرفصل‌ها و سایر عناصر آزمایشی بزرگ‌تر، کار بر حسب درصد بر اساس متن اصلی است. در حالی که هر طراح نقطه شروع متفاوتی دارد، 250 درصد بزرگتر از متن متن، نقطه مقابل خوبی برای تیتر است. 150 درصد برای h2، 75 درصد برای h3 و 50 درصد برای عناصری مانند قیمت بلوک. (این یک قانون نیست، فقط یک نقطه شروع است.)

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

 

دستورالعمل‌های کاراکتر و فاصله

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

• دستگاه‌های رومیزی و بزرگ: 60 تا 75 نویسه در هر خط
• تلفن ها و دستگاه های کوچک: 35 تا 40 نویسه در هر خط

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

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

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

 

نکاتی برای شروع

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

بهترین گزینه استفاده از طراحی پاسخگو با پرس و جوهای رسانه ای است. این گزینه طراح-توسعه دهنده است که بیشترین سطح کنترل را بر مشخصات متن ارائه می دهد. (برای اطلاعات بیشتر به توصیه‌های Google در بالا برگردید.)

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

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

 

3 ابزار برای ایجاد مقیاس نوع

تعدادی از ابزارها برای کمک به شما در دیدن تأثیر دقیق مقیاس تایپوگرافی بصری وجود دارد. در اینجا تعدادی از بهترین و کاربرپسندترین گزینه ها وجود دارد.

• مقیاس نوع: متن را وارد کنید و با گزینه هایی مانند اندازه، مقیاس و فونت بازی کنید درست روی صفحه نمایش؛ CSS را درجه بندی کنید یا کد را مستقیماً از ابزار ویرایش کنید؛
• مقیاس مدولار: مقیاس مانند یک قانون عمل می‌کند تا به تعیین اندازه‌ها برای نوع کمک کند. سپس نتایج را به عنوان یک افزونه Sass یا JS دانلود کنید یا آنها را روی صفحه مشاهده کنید؛
• ماشین‌حساب تایپوگرافی نسبت طلایی: این ابزار اندازه، ارتفاع خط، عرض و کاراکترها را بهینه می‌کند. در هر خط با استفاده از نسبت طلایی

 

نتیجه گیری

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

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