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

از یک سایز پایه و نسبت مقیاس (Golden Ratio، Perfect Fourth و…) پله‌های اندازه فونت بسازید و CSS آن را کپی کنید.

سایز پایه (px)

نسبت مقیاس

پله‌های بزرگ‌تر از پایه

پله‌های کوچک‌تر از پایه

+۴39.06px / 2.441rem

نمونه متن فارسی

+۳31.25px / 1.953rem

نمونه متن فارسی

+۲25px / 1.563rem

نمونه متن فارسی

+۱20px / 1.25rem

نمونه متن فارسی

پایه16px / 1rem

نمونه متن فارسی

‎−۱12.8px / 0.8rem

نمونه متن فارسی

‎−۲10.24px / 0.64rem

نمونه متن فارسی

خروجی CSS Custom Properties

:root {
  --font-up-4: 2.441rem; /* 39.06px */
  --font-up-3: 1.953rem; /* 31.25px */
  --font-up-2: 1.563rem; /* 25px */
  --font-up-1: 1.25rem; /* 20px */
  --font-base: 1rem; /* 16px */
  --font-down-1: 0.8rem; /* 12.8px */
  --font-down-2: 0.64rem; /* 10.24px */
}

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

یک سایز پایه و نسبت مقیاس (مثل Golden Ratio یا Perfect Fourth) انتخاب کنید تا مجموعه‌ای از اندازه‌های فونت هماهنگ ساخته و کد CSS آن آماده شود.

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

طراحان و توسعه‌دهندگان برای ساخت سیستم تایپوگرافی از این ابزار استفاده می‌کنند. برای واکنش‌گرا کردن این اندازه‌ها از ساخت CSS Clamp و برای انتخاب فونت از پیشنهاد ترکیب فونت کمک بگیرید.

سوالات متداول

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

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

نسبت طلایی در تایپوگرافی چیست؟

نسبت طلایی (حدود ۱.۶۱۸) نسبتی است که ترکیب‌های ساخته‌شده با آن معمولاً برای چشم خوشایند و متعادل به نظر می‌رسند.

از کجا بدانم کدام نسبت مناسب است؟

نسبت‌های کوچک‌تر تفاوت ملایم و نسبت‌های بزرگ‌تر کنتراست شدیدتری بین تیتر و متن می‌سازند؛ انتخاب به لحن طراحی بستگی دارد.

ابزارهای مرتبط

ساخت گرادیان CSSگرادیان خطی یا شعاعی با چند رنگ بسازید و کد CSS آن را کپی کنید.

ساخت سایه CSSبا اسلایدر آفست، بلور، گسترش و رنگ، سایه‌ی دلخواه بسازید و کد CSS آن را کپی کنید.

ساخت افکت شیشه‌ای CSSافکت Glassmorphism (شیشه‌ای مات) با کنترل بلور، شفافیت و حاشیه بسازید.

انتخاب و تبدیل رنگیک ابزار کامل رنگ در چند بخش: انتخاب رنگ و گرفتن کد HEX/RGB/HSL/RGBA، تبدیل بین فرمت‌های رنگ (HEX، RGB، HSL، HSV، CMYK و نام CSS)، و برداشتن رنگ از روی هر پیکسل یک تصویر.

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

بررسی کنتراست رنگنسبت کنتراست دو رنگ را بر اساس استاندارد WCAG بسنجید و نتیجه‌ی AA/AAA را ببینید.