تصميم / الطباعة

مولّد مقياس الأحجام الطباعية (مقياس متدرج لـ CSS وTailwind)

أنشئ مقياسًا متدرجًا للخطوط بدءًا من حجم أساسي ونسبة مثل 1.25 أو النسبة الذهبية، وعاين كل خطوة باستخدام نصك، ثم انسخ الأحجام كخصائص مخصّصة في CSS أو إعداد fontSize في Tailwind بوحدتي rem أو px.

مولّد مقياس الأحجام الطباعية (مقياس متدرج لـ CSS وTailwind): يُحسب كل حجم بضرب الحجم الأساسي في النسبة مرة واحدة لكل خطوة: عند استخدام 16 px ونسبة الثلث الكبير، 1.25، تكون الخطوات الأعلى 20، 25، 31.25، 39.06، و48.83 px، والخطوتان الأسفل 12.8 و10.24 px. تُعرض الأحجام بوحدتي px وrem، وتُسمّى مثل أحجام النصوص في Tailwind، من xs إلى 4xl. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
مولّد مقياس الخطوطمعالجة محلية

تعمل بالكامل في المتصفح

4xl48.83 px · 3.0518 remالثعلب البني السريع
3xl39.06 px · 2.4414 remالثعلب البني السريع
2xl31.25 px · 1.9531 remالثعلب البني السريع
xl25 px · 1.5625 remالثعلب البني السريع
lg20 px · 1.25 remالثعلب البني السريع
base16 px · 1 remالثعلب البني السريع
sm12.8 px · 0.8 remالثعلب البني السريع
xs10.24 px · 0.64 remالثعلب البني السريع
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

كل خطوة تساوي الخطوة الأدنى مضروبة في النسبة: مع حجم أساسي قدره 16 px ونسبة قدرها 1.25، تكون الأحجام الأعلى 20 و25 و31.25 px، والأحجام الأدنى 12.8 و10.24 px. تناسب النسب الصغيرة مثل 1.125 الواجهات الكثيفة، بينما تمنح النسب الأكبر مثل 1.5 العناوين تباينًا أكبر. تفترض قيم rem أن حجم الجذر الافتراضي في المتصفح هو 16 px.

مصدر أسماء النسب

الأسماء مأخوذة من الفواصل الموسيقية: الخامسة التامة هي نسبة تردد مقدارها 3 : 2، لذلك ينمو مقياس الخطوط المبني على 1.5 بالنسبة نفسها التي تنمو بها النغمات التي تفصل بينها خامسة. وقد شاعت فكرة المقياس المعياري لـ Tim Brown على الويب.

تعطي النسبة الذهبية، 1.618، قفزات كبيرة جدًا؛ ويشرحها حاسبة النسبة الذهبية.

التقريب

تعرض المتصفحات أحجام البكسل الكسرية، لذلك لا مشكلة في استخدام 31.25 px كما هو. إذا احتاج نظام التصميم إلى بكسلات صحيحة، فقرّب كل خطوة واحتفظ بقيم rem إلى أربعة أرقام عشرية، كما تفعل الأداة؛ وحوّل القيم الأخرى باستخدام محول px إلى rem.

طريقة الاستخدام

  1. أدخل الحجم الأساسي واختر نسبة.
  2. حدّد عدد الخطوات صعودًا وهبوطًا، وعاينها باستخدام نصك.
  3. انسخ متغيرات CSS أو إعداد Tailwind.

الخصوصية والقيود

تجري جميع العمليات في المتصفح.

أدوات ذات صلة

CSS clamp()محول وحدات CSSالنسبة الذهبية

الأسئلة الشائعة

ما النسبة التي ينبغي استخدامها؟

تناسب الواجهات التي تحتوي على كثير من النصوص والشاشات الصغيرة نسب هادئة مثل 1.125 أو 1.2؛ بينما يمكن للصفحات التحريرية والصفحات التعريفية استخدام نسب من 1.333 إلى 1.618 لعناوين أكثر بروزًا.

لماذا أستخدم rem؟

تتبع أحجام rem إعداد حجم الخط في متصفح القارئ، لذلك يكبر النص لمن يحتاج إلى عرضه بحجم أكبر. يفترض التحويل أن الحجم الافتراضي لجذر الصفحة هو 16 px.

هل يمكنني جعل الأحجام مرنة؟

نعم: خذ أصغر وأكبر حجم تريده لخطوة ما، وحوّلهما إلى تعبير clamp() باستخدام مولّد clamp في CSS.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا