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

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

John Morrison

راهنمای 2023 برای اندازه و مقیاس‌های تایپوگرافی واکنش‌گرا

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

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

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

کاوش در منابع طراحی

پرایمر تایپوگرافی پاسخگو

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

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

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

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

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

مشاهده‌های طراحی تایپوگرافی واکنش‌گرا عبارتند از:

  • انتخاب تایپوگرافی: با فونتی شروع کنید که عالی به نظر می‌رسد و ابتدا روی صفحه کوچک به خوبی می خواند. سپس آن را روی یک صفحه بزرگتر آزمایش کنید.
  • گزینه‌های نوع محدود: مدیریت پالت کوچک‌تر آسان‌تر است و در زمان بارگذاری وزن کمتری دارد. فونت مورد نظر شما بارگیری نمی شود (شاید دستگاه آن را دوست نداشته باشد یا سرور CDN از کار افتاده باشد)، امکان انتخاب جایگزین را فراهم کنید که بسیار رایج است. (Arial یک انتخاب جایگزین محبوب برای تایپ‌های بدون سری است.)
  • اندازه و مقیاس طراحی بر اساس محتوا: تایپوگرافی خوانا می‌تواند به اندازه انتخاب فونت به محتوای دیگر بستگی داشته باشد. مقیاس و اندازه عناصر متنی اغلب بسته به مقدار متن ارائه شده در یک زمان و نوع محتوای روی صفحه متفاوت است.
  • مراقب ارتفاع خط باشید: کمی فاصله بیشتر بین خطوط می تواند باعث افزایش بیشتر شود.خوانایی در دستگاه های تلفن همراه تعادل ظریفی بین فضای خیلی زیاد و خیلی کم وجود دارد. برای اندازه‌های کوچک‌تر، ارتفاع خط 150% یا 1.5em می‌تواند محل خوبی برای شروع باشد.
  • دسته قلم: طراحان واقعاً تمایل خود را به استفاده از تغییرات بیشتر فونت - سری، تجربی و غیره - به عنوان یک تمرین عمومی. اینها می‌توانند چالش‌هایی را در زمان‌های کوچک یا روی صفحه‌هایی که کاربران ممکن است بیشتر از حالت تاریک استفاده کنند، ایجاد کند. اگر این مسیر را می‌روید، برای اطمینان از خوانایی، زود انتخاب نوع را امتحان کنید.

اندازه نوع واکنش‌گرا فراتر از پیکسل است

بیشتر طراحان از کار بر روی واحدهای عددی مطلق اجتناب می‌کنند و درصدها یا ems و rems را ترجیح می‌دهند.

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

محبوب ترین واحدهای اندازه عبارتند از:

  • Pixels: نماد متداول برای اندازه قلم دیجیتالی که یادداشت می کند. یک عدد مطلق
  • امتیاز: انتقال بیشتر از چاپ برای اندازه‌گیری که کمتر رایج آنلاین است
  • Ems: اندازه‌گیری نسبت به اندازه فونت اصلی
  • Rems: اندازه‌ای که استایل ریشه را به ارث می‌برد.
  • درصد: اندازه بر اساس درصد تغییر نسبت به سبک اصلی

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

اینمی‌تواند ریاضیات را آسان‌تر کند (1rem حدود 10 پیکسل است) و فقط با تغییر اندازه فونت پیش‌فرض امکان تنظیم در مقیاس کامل را فراهم می‌کند.

این برای اندازه پیش‌فرض چگونه به نظر می‌رسد؟

متن متن به طور کلی 16 پیکسل تا 18 پیکسل یا 1.6 رم تا 1.8 رم (از 14 تا 16 پیکسل برای تلفن همراه) است. سپس می توانید از مقیاسی که دوست دارید استفاده کنید تا همه چیز را مطابق با آن اندازه بگیرید.

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

یافتن مقیاس مناسب

مقیاس نوع تعیین می کند که چه مقدار فونت های بزرگتر یا کوچکتر در فونت پایه یا پیش فرض ریشه می گیرند. با استفاده از این روش، اندازه پایه شما 100٪ است اگر درصدها را دوست دارید یا 1em، اگر این واحد ترجیحی شما است.

سپس مقیاس و نحوه ارتباط آن مقیاس با موقعیت های CSS از H1 تا H6 و غیره را انتخاب کنید.

همچنین ببینید: 40+ بهترین فونت گرد (رایگان و حرفه ای)

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

مقیاس‌های نوع کنتراست بالا

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

این مقیاس ها شامل (عدد نسبت تغییر است):

  • چهارم افزوده، 1.414
  • پنجم کامل، 1.500
  • نسبت طلایی، 1.618

مقیاس های نوع کنتراست متوسط

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

همچنین ببینید: تایپوگرافی سه بعدی: روند طراحی الهام بخش

این مقیاسها عبارتند از:

  • سوم جزئی، 1.200
  • سوم عمده، 1.250
  • چهارم کامل، 1.333

مقیاس های نوع کنتراست کم

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

این مقیاس‌ها عبارتند از:

  • Minor Second، 1.067
  • مهم دوم، 1.125

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

  • ماشین حساب مقیاس تصویری (نشان داده شده در بالا)
  • فونت های پاسخگو در CSS خالص
  • ویژگی اندازه قلم MDN
  • ماشین حساب مقیاس تایپوگرافی
  • ماشین حساب اندازه قلم پاسخگوی ساده

نگاهی به تایپوگرافی ذاتی

موضوع بعدی که باید از نظر تایپوگرافی وب به آن فکر کنید نوع ذاتی است. در اوایل سال جاری اسکات کلوم برای CSS-Tricks آن را «آینده سبک‌دهی متن در وب» نامید.

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

نتیجه این است که متن "خود تنظیم می شود"به کانتینری که در آن زندگی می کند و به viewport متصل نیست. شما می توانید خیلی بیشتر از تعداد انگشت شماری از اندازه های از پیش تعیین شده در مقیاسی داشته باشید که برای کل طراحی اعمال می شود. واریانس تقریباً نامحدود می شود.

می توانید با استفاده از ابزار Typetura آن را امتحان کنید.

نتیجه گیری

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

این کار با یک پایه محکم برای تایپوگرافی و درک نحوه تنظیم برای بینندگان وب سایت بدون توجه به نحوه تعامل آنها با طراحی شروع می شود.

John Morrison

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