أداة تنسيق الخطوط
اعثر على تنسيق مثالي لموقعك. اختر خطوط العنوان والنص وعاينها لحظيًا وانسخ CSS جاهزًا.
أبجد هوز حطي كلمن سعفص قرشت
الخط الجيد لا يلفت الانتباه، والخط الرائع لا يُنسى. يصنع التنسيق الصحيح تسلسلًا بصريًا ويحسن القراءة ويعزز هوية علامتك، من صفحة الهبوط والمدونة إلى المتجر.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )
/* Heading */
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
h1 {
font-size: 48px;
}
/* Body */
body, p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
}
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400&display=swap');اصنع تباينًا
نسّق خطوطًا بشخصيات مختلفة، مثل عنوان مزخرف مع نص نظيف.
قلل عائلات الخطوط
التزم بعائلتين أو ثلاث كحد أقصى لتجنب الفوضى.
قدّم سهولة القراءة
يجب أن يبقى النص واضحًا في الأحجام الصغيرة. اختر خطوطًا للشاشات.
اختبر أجهزة متعددة
ما يبدو رائعًا على الحاسوب قد لا يناسب الهاتف. عاين أحجامًا مختلفة.
ناسب علامتك
الخطوط ذات الزوائد تقليدية وموثوقة، ومن دون زوائد حديثة وقريبة. اختر ما يعكس صوتك.
انتبه للوزن
استخدم أوزانًا مختلفة للإبراز والتسلسل بلا إضافة عائلات أخرى.
كيفية استخدام أداة تنسيق الخطوط
اضبط نظام الخطوط في أربع خطوات. صُممت الواجهة للمصممين والمطورين والفرق التي تقدر السرعة والدقة.
الخطوة 1: اختر خط العنوان
اختر خطًا من لوحة التحكم مثل Archivo Black، ثم اضبط الحجم والوزن لتحديد التسلسل مع معاينة حية.
الخطوة 2: اضبط خط النص
اختر خطًا مكملًا واضبط حجمه ووزنه وارتفاع السطر لضمان القراءة والتوازن.
الخطوة 3: استخدم العشوائية للإلهام
انقر عشوائي لإنشاء تنسيقات منتقاة ورؤية المعاينة المحدثة.
الخطوة 4: انسخ CSS فورًا
عندما يكتمل النظام، انسخ CSS والصقه في ملف الأنماط.
لماذا تستخدم أداة تنسيق الخطوط؟
تربط الاستكشاف الإبداعي بالتنفيذ التقني لتعمل الفرق أسرع بمعايير احترافية.
معاينة بصرية فورية
شاهد تفاعل خطوط العناوين والنصوص وقيّم التباين والتسلسل والإيقاع.
تحكم متقدم بالخطوط
اضبط الحجم والوزن وارتفاع السطر لتحسين القراءة والإتاحة.
تنسيقات منتقاة للإلهام
استخدم مجموعات اختارها خبراء من الخطوط الكلاسيكية والهندسية الحديثة.
CSS جاهز للإنتاج
صدّر CSS نظيفًا يندمج مع نظامك ويوفر وقت التطوير ويحفظ الاتساق.