CodeKitHub
العربية
أدوات الأكواد

أداة اختيار توليفات Google Fonts

آخر تحديث:

اختيار خطين يتناغمان فعليًا مع بعضهما أصعب مما يبدو — إن كانا متشابهين جدًا شعرت الصفحة بالرتابة، وإن كانا مختلفين جدًا شعرت بالفوضى. تتجاوز هذه الأداة مرحلة التجربة والخطأ بتقديم 28 توليفة مختارة للعناوين والنصوص، كل منها معروضة حيًا لترى التباين الحقيقي قبل أن تلتزم به. صنّف حسب الطابع، ثم انسخ رابط تضمين Google Fonts وقواعد `font-family` في CSS مباشرة إلى مشروعك.

The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Montserrat + Merriweather
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Poppins + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Oswald + Lato
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Raleway + Lora
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bebas Neue + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Merriweather + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Abril Fatface + Poppins
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cormorant Garamond + Nunito Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Archivo Black + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Libre Baskerville + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Josefin Sans + PT Serif
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Fjalla One + Noto Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Work Sans + Georgia
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Space Grotesk + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
DM Serif Display + DM Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Anton + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Crimson Text + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Quicksand + Nunito
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Rubik + Rubik
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bitter + Raleway
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Yeseva One + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Barlow Condensed + Barlow
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cinzel + EB Garamond
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Righteous + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Prata + Jost
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Staatliches + Karla
Embed code / CSS code

ما هي هذه الأداة؟

توليف الخطوط يعني اختيار خطين (وأحيانًا ثلاثة) لاستخدامهما معًا في الصفحة — عادةً خط للعناوين وآخر لنص المحتوى — بحيث تحصل الصفحة على تسلسل هرمي بصري دون أن تبدو غير متناسقة أو رتيبة.

تعرض كل توليفة أدناه نموذجًا معروضًا حيًا: خط العنوان في الأعلى، وخط النص أسفله، باستخدام ملفات Google Fonts الفعلية، بحيث يكون ما تراه هو ما ستحصل عليه فعلًا في موقعك.

تأتي كل توليفة مع وسم تضمين `<link>` جاهز للاستخدام من Google Fonts، ومقتطف CSS مطابق يحتوي على تعريفات `font-family` للعناوين ونص المحتوى — انسخهما معًا وينتهي الأمر.

لماذا تستخدمها؟

  • 28 توليفة مختارة يدويًا وليست قائمة مولّدة تلقائيًا — كل واحدة اختيرت لأن الخطين يكملان بعضهما فعليًا.
  • معاينة حية: كل توليفة تُعرض بالخطوط الحقيقية المحمّلة من Google Fonts، وليست صورة ثابتة أو تخمينًا لاسم الخط.
  • صنّف حسب الطابع — عصري، أنيق، جريء، بسيط، كلاسيكي — لتضييق الخيارات إلى الإحساس الذي يحتاجه مشروعك.
  • نسخ بنقرة واحدة لكل من وسم التضمين `<link>` وقواعد `font-family` في CSS.
  • مجانية، تعمل في متصفحك، بدون حساب أو تسجيل دخول.

كيفية الاستخدام

  1. اختياريًا، انقر على مرشّح طابع (عصري، أنيق، جريء، بسيط، كلاسيكي) لتضييق القائمة، أو اترك "الكل" محددًا لتصفح جميع التوليفات.
  2. تصفح بطاقات المعاينة الحية — يعرض السطر العلوي خط العنوان، ويعرض السطر الذي تحته خط النص.
  3. افتح توليفة تعجبك وانقر لتوسيع قسم كود التضمين.
  4. انسخ وسم `<link>` إلى `<head>` في ملف HTML الخاص بك، وانسخ مقتطف CSS إلى ورقة الأنماط لتطبيق الخطوط على العناوين ونص المحتوى.

مثال

الإدخال

مدونة أنيقة

الناتج

Playfair Display (للعناوين) + Source Sans Pro (للنص)

عند التصفية حسب "أنيق" تظهر عناوين serif عالية التباين مقترنة بنص sans-serif نظيف وسهل القراءة — تركيبة شائعة في تصاميم المدونات والمحتوى التحريري.

مبادئ التوليف الجيد للخطوط

  • التباين أفضل من التشابه: خطان يبدوان متطابقين تقريبًا (كخطي sans-serif هندسيين متشابهين مثلًا) يبدوان غالبًا كخطأ لا كاختيار متعمد. اقرن خط serif بخط sans-serif، أو خط عرض ثقيل بخط نص أخف، بحيث يُقرأ الفرق كأنه مقصود.
  • طابق ارتفاع الحرف x والنسب: الخطوط التي تقع حروفها الصغيرة عند ارتفاعات بصرية متقاربة تميل لأن تبدو منتمية لنفس الصفحة، حتى عندما تختلف أساليبها — وتفاوت ارتفاع الحرف x من أكثر أسباب شعور التوليفة بأنها "غير متناسقة".
  • اقتصر على عائلتين (وأحيانًا ثلاث): واحدة للعناوين، وأخرى لنص المحتوى، وربما ثالثة كحد أقصى للتفاصيل مثل الأزرار أو التسميات. أكثر من ذلك تبدأ الصفحة بالشعور بعدم التخطيط.
  • راعِ الطابع لا الشكل فقط: خط sans مستدير وودود مقترن بخط serif رسمي يرسل إشارات متضاربة حتى لو كانت أشكال الحروف تعمل تقنيًا معًا — اختر خطوطًا تتفق في النبرة كما تتفق في البنية.
  • اختبر بالأحجام الحقيقية: توليفة تبدو رائعة في معاينة كبيرة قد تفقد تباينها بحجم نص المحتوى، أو قد يصبح خط العرض غير مقروء بالأحجام الصغيرة — تحقق دائمًا من الحدّين.

اختيار توليفة حسب حالة الاستخدام

عادةً ما تستفيد صفحات الهبوط والمواقع التسويقية من مرشحات "جريء" أو "عصري" — خط عنوان قوي عالي التباين يجذب الانتباه في الجزء الظاهر أولًا، مقترن بخط نص نظيف ومحايد يبقي النص الطويل سهل التصفح.

غالبًا ما تُقرأ المدونات والمحتوى التحريري بشكل أفضل مع توليفات "أنيق" أو "كلاسيكي" — عنوان serif راقٍ يوحي بصوت مدروس ومحرَّر، بينما يبقي نص serif أو sans-serif مريح المقالات الطويلة مقروءة خلال جلسات قراءة ممتدة.

تميل مواقع التجارة الإلكترونية والمنتجات إلى تفضيل توليفات "بسيط" — خطوط محايدة ومنضبطة تُبقي التركيز على صور المنتج والأسعار بدلًا من الطباعة نفسها، وهو أمر مهم عندما تظهر عشرات بطاقات المنتجات في صفحة واحدة.

تمتلك ملفات الأعمال والمواقع الإبداعية أكبر مساحة للتجربة — توليفات "جريء" أو "أنيق" ذات شخصية أقوى قد تعمل جيدًا لأن الجمهور موجود جزئيًا لتقييم الذوق البصري.

ملاحظات حول الأداء والترخيص

يحمّل وسم التضمين `<link>` الخطوط من شبكة Google، وهي سريعة ومخزّنة مؤقتًا عبر مواقع كثيرة زارها زوّارك على الأرجح من قبل — لكنها تضيف طلبًا خارجيًا. للمواقع التي تهم فيها كل ميلي ثانية، فإن تنزيل ملفات الخط واستضافتها ذاتيًا (مع ضبط `font-display: swap` يدويًا) يزيل ذلك الاعتماد الخارجي مقابل بعض جهد الإعداد.

جميع خطوط Google Fonts مفتوحة المصدر ومجانية للاستخدام التجاري دون الحاجة لذكر المصدر، رغم أن الإشارة إلى مصمم الخط لفتة لطيفة حيث يسهل ذلك.

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

ما الذي يجعل خطين "يتناسقان جيدًا"؟

التوليفات الجيدة توازن بين التباين والانسجام. التباين — كاقتران خط serif مع sans-serif، أو خط عرض جريء مع خط نص بسيط — يخلق تسلسلًا هرميًا بصريًا يجعل العناوين والنص متمايزين. الانسجام — كتقارب ارتفاع الحرف x، وسمك الخطوط المتقارب، وشعور مشترك بالرسمية أو المرح — يمنع الخطين من التنافر. التوليفات هنا اختيرت مع مراعاة الأمرين معًا.

هل يجب أن تستخدم العناوين والنص خطوطًا مختلفة دائمًا؟

لا، استخدام عائلة خط واحدة في الاثنين (كتوليفة "Rubik + Rubik" في هذه الأداة) يعمل جيدًا أيضًا، طالما أن الخط يملك تنوعًا كافيًا في الوزن للتمييز بين العناوين والنص. إنه خيار صحيح ومبسّط — وليس خطأً.

كيف أطبّق توليفة على موقعي فعليًا؟

انسخ وسم التضمين `<link>` إلى `<head>` في صفحتك لتحميل الخطوط من شبكة Google، ثم انسخ مقتطف CSS إلى ورقة الأنماط — فهو يحدد `font-family` للعناوين (h1، h2، h3) ولنص المحتوى (body، p). عدّل محددات CSS إذا كانت بنية صفحتك مختلفة.

هل تحميل خطوط Google سيبطئ موقعي؟

كل ملف خط إضافي يضيف طلب شبكة وبعض خطر تعطيل العرض. اقتصر على وزن واحد للعناوين ووزن أو اثنين للنص، واستخدم `display=swap` (مضمّن بالفعل في كود التضمين) بحيث يظهر النص بخط احتياطي أثناء تحميل خط الويب، وفكّر في استضافة ملفات الخط ذاتيًا للمواقع الإنتاجية التي تحتاج أسرع تحميل ممكن.

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

نعم. كل خط في Google Fonts، بما فيها جميع التوليفات المعروضة هنا، مرخّص بموجب رخصة SIL Open Font أو رخصة Apache — وكلتاهما تسمحان بالاستخدام التجاري المجاني والتعديل وإعادة التوزيع دون رسوم.