أنشئ مقياسا طباعيا لمستويات العناوين
ابدأ بنص أساسي بحجم 16 بكسل ونسبة 1.25، فتتدرج العناوين صعودًا: h6 بحجم 20 وh5 بحجم 25 وh4 بحجم 31.25، وكل مستوى أعلى يُضرب في النسبة نفسها. مجانًا في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
يحوّل المقياس الطباعي حجم النص الأساسي ونسبة واحدة إلى تسلسل هرمي متوقع للعناوين. أدخلوا حجما أساسيا مثل 16 ونسبة موجبة مثل 1.25 للثالثة الكبرى. يخصص المولد قوى متتالية من تلك النسبة لمستويات العناوين، ثم يعيد قائمة مرتبة قابلة للمعالجة آليا ابتداء من h1. يفيد ذلك في إنشاء رموز CSS، وتوثيق نظام التصميم، والتحقق من أن التسلسل الهرمي يتبع قاعدة رياضية متسقة بدلا من مجموعة أحجام منفصلة لا رابط بينها.
اختاروا الأساس والنسبة بما يلائم سياق القراءة
ابدؤوا بالحجم المستخدم للنص العادي. يعد الأساس 16 بكسل شائعا على الويب، لكنه ليس شرطا عاما؛ فقد تستخدم واجهة تطبيق كثيفة قيمة أصغر، بينما يبدأ التخطيط التحريري من 18 أو 20 بكسل. تحدد النسبة سرعة ابتعاد العناوين عن الأساس.
تنتج 1.125 تدرجا هادئا، وتمنح 1.2 تسلسلا متوسطا واضحا، أما 1.25 فتسمى غالبا الثالثة الكبرى. تؤدي النسب الأكبر إلى أحجام عرض ضخمة بسرعة، ولا سيما عند طلب مستويات HTML الستة. تقبل هذه القدرة كل نسبة موجبة منتهية.
تجعل النسبة 1 جميع الأحجام متساوية، وتنتج النسبة الأقل من 1 قيما تتناقص مع زيادة الأس. لا يعد خطأ إلا الصفر والقيم السالبة. حافظوا على وحدة واحدة داخل نظامكم.
تعرض النتيجة px لتسهيل استخدامها على الويب، لكن العلاقة العددية نفسها بلا وحدة. اختاروا المدخلات وفقا للمحتوى الفعلي والعرض المتاح ومقاييس الخط والأجهزة المستهدفة، ولا تعتمدوا على الاسم التقليدي للنسبة وحده.
افهموا طريقة حساب مستويات العناوين
يمثل حجم الخط الأساسي الخطوة صفر ولا يدرج بوصفه عنوانا. عند طلب ستة مستويات، يحصل h6 على الأساس مضروبا في النسبة للقوة 1، ويستخدم h5 القوة 2، ويستمر التسلسل حتى h1 بالقوة 6. لذلك يكون h1 أبعد حجم عن النص عندما تتجاوز النسبة 1، مع بقاء ترتيب الناتج المعتاد من h1 إلى h6.
إذا طلبتم ثلاثة مستويات، تتضمن الاستجابة h1 وh2 وh3؛ يستخدم h3 القوة الأولى، وh2 الثانية، وh1 الثالثة. يبين كل صف اسم المستوى والأس والحجم المحسوب، فلا يحتاج المستهلك إلى استنتاج العلاقة من موضع العنصر في المصفوفة. تقرّب النتائج إلى ست منازل عشرية لإزالة ضوضاء الفاصلة العائمة مع الاحتفاظ بدقة كافية لمتغيرات CSS.
القيمة الافتراضية للحقل الاختياري levels هي 6، ويجب أن يكون عددا صحيحا من 1 إلى 6. ترفض الأحجام المفرطة قبل أن تصبح النتيجة غير منتهية أو غير عملية.
طبقوا المقياس من دون الخلط بين الحجم وبنية المستند
تعاملوا مع القيم المولدة بوصفها مقترحات تصميم، لا تعليمات لاختيار الوسوم حسب مظهرها. تنقل مستويات HTML بنية المستند إلى المتصفحات ومحركات البحث والتقنيات المساعدة؛ وينبغي أن يظل h2 قسما فرعيا من h1 حتى إذا عرضته إحدى المكونات برمز أصغر. يتضمن سير العمل العملي توليد المقياس، ونسخ الأحجام إلى رموز ذات أسماء دلالية، ثم ربطها بالعناصر البنيوية عبر الأنماط.
اختبروا أكبر قيمة باستخدام عناوين حقيقية وشاشات هاتف ضيقة وترجمات وأوزان غليظة وخطوط ذات مقاييس مختلفة. يمكنكم استخدام جزء من المقياس فقط، أو تقييد الأحجام الكبرى بصورة متجاوبة، أو مشاركة حجم واحد بين عدة مستويات دلالية. تجعل هذه التعديلات النظام ملائما لقيود التخطيط الواقعية.
ولأغراض المراجعة، احفظوا الأساس والنسبة وعدد المستويات والصفوف الناتجة معا، حتى يمكن معرفة ما إذا كان أي تغيير لاحق ناتجا من حجم النص أو النسبة أو عدد المستويات المختارة.
حالات الاستخدام
إنشاء رموز تصميم CSS
ولدوا أحجام عناوين قابلة للتكرار، ثم انقلوا القيم إلى الخصائص المخصصة أو مسار بناء الرموز لديكم.
توثيق التسلسل الهرمي للعلامة
سجلوا الأساس والنسبة إلى جانب قيم h1 حتى h6 كي يعيد الفريق إنتاج الطباعة بصورة متسقة.
مقارنة المقاييس المرشحة
شغلوا عدة نسب موجبة مع الأساس نفسه، ثم قارنوا سرعة نمو أحجام عناوين العرض.
الأسئلة الشائعة
هل يمكن أن تقل النسبة عن واحد؟
نعم. كل نسبة موجبة منتهية صالحة. تتناقص القيم تحت الواحد كلما زاد الأس.
كم مستوى يمكن توليده؟
من 1 إلى 6، بما يوافق عناوين HTML القياسية. إذا حذف levels تكون قيمته الافتراضية 6.
ما النسبة المناسبة للبداية؟
تعطي النسبة 1.125 تدرجًا هادئًا، والنسبة 1.2 تسلسلًا واضحًا ومعتدلًا، والنسبة 1.25 ما يُعرف بالثالثة الكبرى. أما النسب الأكبر فتصل بسرعة إلى أحجام ضخمة عند طلب المستويات الستة كلها.
أي درجة من المقياس يأخذها كل عنوان؟
النص الأساسي هو الدرجة صفر. أصغر عنوان، h6، يساوي الأساس مضروبًا في النسبة مرة واحدة، وh5 يستخدم مربع النسبة، وهكذا حتى h1 الذي يستخدم القوة السادسة.
هل يمكن استخدام rem بدل البكسل؟
نعم. تظهر الأحجام بوحدة px، لكن العلاقة نفسها بلا وحدة، فإذا بدأت بقيمة rem تحصل على النسب ذاتها. احرص فقط على استخدام وحدة واحدة في نظامك كله.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/doc/typography-scale-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base_font_size":16,"ratio":1.25}'const res = await fetch("https://api.kit.forhosting.com/doc/typography-scale-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base_font_size": 16,
"ratio": 1.25
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/typography-scale-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base_font_size": 16,
"ratio": 1.25
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/typography-scale-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base_font_size":16,"ratio":1.25}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base_font_size":16,"ratio":1.25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/typography-scale-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"base_font_size": 16,
"ratio": 1.25
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.typography_scale_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_mb | 25 |
max_pages | 200 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
افهموا طريقة حساب مستويات العناوين
لا تتصل الخوارزمية بالشبكة ولا تقرأ الساعة ولا تستخدم العشوائية، ولذلك تعيد المدخلات المتطابقة JSON مطابقا دائما. يمثل base وfont_size اسمين بديلين للحجم الأساسي، ويمثل scale_ratio النسبة.
طبقوا المقياس من دون الخلط بين الحجم وبنية المستند
تبلغ تكلفة طلب API الناجح $0.002، ويمكن إجراء الحساب الحتمي نفسه في المتصفح. تعيد القيم غير الصالحة، ومنها النسبة غير الموجبة، الخطأ invalid_input بدلا من مقياس جزئي.
أسئلة تقنية
ما الصيغة التي يستخدمها المولد؟
يساوي كل حجم base_font_size مضروبا في ratio مرفوعة إلى الأس المبين في صفه.
لماذا ترفض النسبة صفر؟
لا يستطيع الصفر تكوين مقياس تناسبي موجب. تعيد القدرة invalid_input للصفر ولكل قيمة سالبة.
ما تكلفة طلب API؟
يكلف الطلب الناجح $0.002. يعيد الإدخال غير الصالح خطأ بدلا من مقياس مولد.