الرئيسيةأدوات التصميمتنسيق الخطوط

تنسيق الخطوط

تعرض أداة تنسيق الخطوط 12 تركيبة مختارة من Google Fonts للعناوين ونص المحتوى، وتتيح لك مزج الخطوط بنفسك، وتنسخ CSS @import المطابق.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

حول هذه الأداة

تعرض أداة تنسيق الخطوط 12 تركيبة مختارة من Google Fonts للعناوين ونص المحتوى، وتتيح لك مزج الخطوط بنفسك، وتنسخ CSS @import المطابق.

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

  1. اختر إحدى التركيبات المختارة، أو اختر بنفسك خطًا للعنوان وآخر للمحتوى.
  2. استخدم Random Pairing لاستكشاف تركيبات جديدة.
  3. اطّلع على المعاينة المباشرة للعنوان ونص الفقرة.
  4. انقر Copy CSS @import لتحميل الخطوط في موقعك.

معلومات مفيدة

  • تعتمد التركيبة الكلاسيكية على التباين بين خط serif وخط sans-serif، مثل Playfair Display مع Source Sans 3.
  • تشمل التركيبات Montserrat + Merriweather وRaleway + Lato وSpace Grotesk + Inter وDM Serif Display + DM Sans.
  • حصر الموقع في عائلتين من الخطوط يحافظ على اتساق الصفحات ويقلل حجم التنزيل.
  • تحمّل المعاينة الخطوط المختارة من Google Fonts بالوزنين 400 و700.
  • إضافة display=swap إلى رابط الخط تعرض نصًا بديلًا ريثما يُحمَّل خط الويب.

تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.

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

ما الخطوط التي تتناسب معًا؟

الخطوط المتباينة في الأسلوب والمتقاربة في النسب تتناسب عادةً، مثل عنوان بخط serif عالي التباين مع نص محتوى بخط sans-serif نظيف. والتركيبات المختارة هنا مجرّبة وناجحة.

كم خطًا ينبغي أن يستخدم الموقع؟

عائلتان — واحدة للعناوين وأخرى لنص المحتوى — تكفيان لمعظم المواقع، ونادرًا ما تحتاج إلى ثالثة.

هل خطوط Google مجانية للاستخدام التجاري؟

نعم. تُنشر خطوط مكتبة Google Fonts بتراخيص مفتوحة مثل SIL Open Font License، ويمكن استخدامها تجاريًا.

كيف أضيف الخطوط إلى موقعي؟

الصق @import المنسوخ في أعلى ملف CSS، أو حوّله إلى وسم link في قسم head من HTML، ثم اضبط font-family للعناوين ونص المحتوى.