أفضل خطوط عربية للمواقع (2026): 12 خطًا جربناها في لوحة تحكم

أفضل خط عربي لواجهات المواقع والتطبيقات في أغلب الحالات هو IBM Plex Sans Arabic أو Noto Sans Arabic: كلاهما واضح بحجم 14px، وأرقامهما تصطف في أعمدة الجداول، ومع كل منهما حروف لاتينية متناسقة. اختر Cairo أو Almarai إن أردت مظهرًا أنعم وأقرب إلى الناس، وNoto Kufi Arabic أو El Messiri للعناوين، وAmiri للنصوص الطويلة فقط. الخطوط الاثنا عشر في هذا الدليل مجانية على Google Fonts بترخيص SIL Open Font License، وكلها تعمل في Next.js عبر next/font.

لم ننقل هذه القائمة من مكان آخر. كتبنا بطاقة لوحة تحكم عربية واحدة (عنوان، ورقمان رئيسيان، وجدول، وفقرة، وزرّان) بكل خط على حدة، والتقطنا لها صورة في Chrome 156، وقسنا الأرقام وارتفاع السطر وحجم الملفات، ثم بنينا إعداد Next.js المشروح أدناه على Next.js 16.4.5. آخر مراجعة: نوفمبر 2026.

كيف اختبرنا الخطوط

أعطينا كل خط المهمة نفسها: بطاقة لوحة تحكم داكنة بالعربية، من اليمين إلى اليسار، بعرض 560px. فيها عنوان بحجم 20px، ورقم إيرادات بحجم 30px بأرقام لاتينية، ورقم ثانٍ بالأرقام الهندية (٠١٢٣)، وجدول طلبات من صفين بحجم 14px، وفقرة بحجم 15px في وسطها عبارة «Next.js API»، وزرّان. حمّلنا كل خط من Google Fonts بثلاثة أوزان (عادي ومتوسط وعريض، أو أقرب الأوزان المتاحة فيه)، وحددنا ارتفاع السطر بقيم صريحة حتى تصح المقارنة بين البطاقات.

ثم قسنا ثلاثة أشياء في المتصفح نفسه:

• الأرقام: هل يأخذ «1111» و«0000» العرض نفسه، مع font-variant-numeric: tabular-nums وبدونه، بالأرقام اللاتينية والهندية.
• ارتفاع السطر الافتراضي: ارتفاع سطر عربي واحد مع line-height: normal، منسوبًا إلى حجم الخط.
• الحجم: ملف woff2 الذي يرسله Google Fonts إلى Chrome للحروف العربية بالوزن 400، وعرض الجملة العربية نفسها بحجم الخط نفسه.

أما التراخيص والأوزان والمحاور فمأخوذة من بيانات فهرس Google Fonts ومن ملف الترخيص لكل خط في مستودع google/fonts، بتاريخ 5 نوفمبر 2026.

مقارنة الخطوط العربية للويب

الخطوط الاثنا عشر كلها مجانية للاستخدام التجاري بترخيص SIL Open Font License 1.1، وكلها تدعم اللاتينية إلى جانب العربية. ونقصد بـ«تصطف» أن كل رقم في عمود أسعار لاتيني يأخذ العرض نفسه.

الخط	الأنسب له	الأوزان	متغيّر	الملف العربي، وزن 400	الأرقام اللاتينية تصطف
IBM Plex Sans Arabic	لوحات التحكم والواجهات الكثيفة	7 (من 100 إلى 700)	لا	32.7 KB	نعم، افتراضيًا
Noto Sans Arabic	لوحات التحكم ونصوص المحتوى	من 100 إلى 900	نعم (الوزن والعرض)	47.8 KB	نعم، افتراضيًا
Cairo	العناوين والواجهات الودودة	من 200 إلى 1000	نعم (الوزن والميل)	13.1 KB	نعم، افتراضيًا
Tajawal	صفحات التسويق الخفيفة	7 (من 200 إلى 900، بلا 600)	لا	8.7 KB	لا
Almarai	العناوين والواجهات البسيطة	4 (300 و400 و700 و800)	لا	17.8 KB	لا
Readex Pro	نصوص سهلة القراءة	من 160 إلى 700	نعم (الوزن وHEXP)	9.6 KB	لا
Rubik	هويات بزوايا مستديرة	من 300 إلى 900، مع مائل	نعم	17.0 KB	مع tabular-nums
Alexandria	العناوين العريضة	من 100 إلى 900	نعم	12.1 KB	مع tabular-nums
Vazirmatn	الواجهات، والفارسية أيضًا	من 100 إلى 900	نعم	20.6 KB	نعم، افتراضيًا
El Messiri	العناوين	من 400 إلى 700	نعم	11.8 KB	لا
Noto Kufi Arabic	العناوين والنصوص الكبيرة	من 100 إلى 900	نعم	42.8 KB	نعم، افتراضيًا
Amiri	القراءة الطويلة فقط	400 و700، مع مائل	لا	105.9 KB	نعم، افتراضيًا

أحجام الملفات لوزن واحد. كل وزن ثابت إضافي ملف آخر بحجم قريب، أما الخط المتغيّر فملف واحد أكبر يغطي كل الأوزان.

أفضل 12 خطًا عربيًا لواجهات المواقع

أول أربعة خطوط في البطاقة نفسها:

1. IBM Plex Sans Arabic

يناسب: لوحات التحكم ولوحات الإدارة والجداول والنماذج. كان أضيق الخطوط غير المذيّلة في اختبارنا: الجملة نفسها جاءت أضيق بنحو 20% منها في Alexandria، فيتسع سطر خلية الجدول لنص أكثر قبل أن ينكسر. يُقرأ بوضوح في صفوف جدول بحجم 14px، وارتفاع سطره الافتراضي (1.5) قريب من خطوط الواجهات اللاتينية.

الأوزان: 7 أوزان ثابتة من 100 إلى 700. ليس متغيّرًا، فاطلب الأوزان التي تستخدمها فقط. اللاتيني: يضم حروف IBM Plex Sans اللاتينية، ويتناسق مع IBM Plex Sans أو Inter. الأرقام: الأرقام اللاتينية متساوية العرض افتراضيًا، أما الأرقام الهندية فمتفاوتة حتى مع tabular-nums.

2. Noto Sans Arabic

يناسب: لوحات التحكم ونصوص المحتوى. هو الخط العربي البسيط غير المذيّل من Google، وجزء من مجموعة Noto التي تسعى لتغطية كل أنظمة الكتابة، فتبقى الصفحات متسقة حين تجمع أكثر من لغة.

الأوزان: متغيّر من 100 إلى 900، مع محور للعرض من 62.5 إلى 100. اللاتيني: يتناسق مع Noto Sans أو Inter أو DM Sans. الأرقام: الأرقام اللاتينية والهندية كلتاهما متساوية العرض افتراضيًا، ولم يشاركه في ذلك من الخطوط غير المذيّلة إلا Noto Kufi Arabic. انتبه لارتفاع سطره الافتراضي: 2.11، وهو الأعلى بين الاثني عشر، فحدد قيمتك دائمًا.

3. Cairo

يناسب: العناوين وصفحات الهبوط وواجهات التطبيقات الودودة. صممه محمد جابر بتوسيع الخط اللاتيني Titillium Web إلى العربية، بأسلوب مستوحى من الخط الكوفي مع صواعد ونوازل قصيرة. الأوزان الخفيفة تصلح للنص، والثقيلة للعناوين.

الأوزان: متغيّر من 200 إلى 1000، مع محور ميل (من -11 إلى 11). اللاتيني: لاتينيّه هو Titillium Web، فاستخدمه معه أو وحده. الأرقام: اللاتينية متساوية العرض افتراضيًا، والهندية متفاوتة.

4. Tajawal

يناسب: صفحات التسويق الخفيفة والعناوين القصيرة في الواجهة. تصميم هندسي منخفض التباين من Boutros، وأصغر ملف عربي في اختبارنا (8.7 KB بالوزن 400).

الأوزان: 7 أوزان ثابتة: 200 و300 و400 و500 و700 و800 و900. لا يوجد وزن 600، فيقع font-semibold على وزن مجاور. اللاتيني: حروف لاتينية هندسية خاصة به، صُممت لتجاور خطوطًا لاتينية أخرى. الأرقام: متفاوتة العرض دائمًا في اللغتين. تجنّبه في أعمدة الأرقام.

الخطوط الأربعة التالية:

5. Almarai

يناسب: العناوين والواجهات البسيطة الواسعة. رسمته Boutros للقراءة على الشاشة، بتباين منخفض وفتحات واسعة. يستخدمه قالب SaaS عندنا للعناوين العربية.

الأوزان: 4 أوزان ثابتة: 300 و400 و700 و800. لا يوجد وزن متوسط، فابنِ التدرج بالعادي والعريض. اللاتيني: حروف لاتينية غير مذيّلة خاصة به. الأرقام: متفاوتة العرض دائمًا. وارتفاع سطره الافتراضي هو الأضيق بين الاثني عشر (1.11)، فقد تلامس الحركات السطر الذي فوقها إن تركته دون تحديد.

6. Readex Pro

يناسب: النصوص التي تهم فيها سهولة القراءة، مثل صفحات المساعدة والتعريف بالمنتج. صممته نادين شاهين وThomas Jockin بالمنهجية التي بُني عليها Lexend، الخط اللاتيني الذي صُمم لتقليل التشويش البصري.

الأوزان: متغيّر من 160 إلى 700، مع محور HEXP يوسّع الحروف. اللاتيني: Lexend هو شريكه الطبيعي. الأرقام: متفاوتة العرض دائمًا، فأبعده عن جداول البيانات.

7. Rubik

يناسب: الهويات التي تريد زوايا Rubik المستديرة قليلًا في اللغتين. عائلة واحدة تغطي اللاتينية والعربية والعبرية والسيريلية.

الأوزان: متغيّر من 300 إلى 900، مع مائل. اللاتيني: مدمج، فعائلة واحدة تكفي للغتين. الأرقام: اللاتينية متفاوتة افتراضيًا، لكنها تصبح متساوية مع font-variant-numeric: tabular-nums. والهندية تبقى متفاوتة.

8. Alexandria

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

الأوزان: متغيّر من 100 إلى 900. اللاتيني: استخدمه مع Montserrat. الأرقام: اللاتينية تصبح متساوية مع tabular-nums، والهندية تبقى متفاوتة.

الخطوط الأربعة الأخيرة:

9. Vazirmatn

يناسب: واجهات التطبيقات، خصوصًا المنتجات التي تخدم قرّاء الفارسية أيضًا. بدأ عام 2015 باسم Vazir خطًا فارسيًا وعربيًا لصفحات الويب والتطبيقات.

الأوزان: متغيّر من 100 إلى 900. اللاتيني: لاتينيّه هو Roboto، فيتناسق معه. الأرقام: اللاتينية متساوية افتراضيًا، والهندية تصبح متساوية مع tabular-nums.

10. El Messiri

يناسب: العناوين ذات الشخصية. حروفه العربية منحنية، مستوحاة من النسخ مرسومًا بالفرشاة، فتعطي الصفحة دفئًا بالأحجام الكبيرة.

الأوزان: متغيّر من 400 إلى 700. اللاتيني: حروفه اللاتينية والسيريلية مأخوذة من Philosopher. الأرقام: متفاوتة العرض دائمًا، ويرسم الرقمين الهنديين ٧ و٨ بشكل مستدير يشبه U و∩، فجرّبه على أسعارك الحقيقية قبل استخدامه قرب الأرقام.

11. Noto Kufi Arabic

يناسب: العناوين والنصوص الكبيرة. تصفه Google بأنه كوفي مبسّط مخصص أساسًا للأحجام الكبيرة، ويتكامل طبيعيًا مع Noto Sans Arabic لنص المحتوى.

الأوزان: متغيّر من 100 إلى 900. اللاتيني: يتناسق مع Noto Sans أو Inter. الأرقام: اللاتينية والهندية متساوية العرض افتراضيًا، مثل Noto Sans Arabic.

12. Amiri

يناسب: القراءة الطويلة فقط: المقالات والتوثيق والصفحات القانونية والنصوص الأدبية والدينية. هو خط نسخ كلاسيكي يحيي حروف مطبعة بولاق (المطبعة الأميرية) في القاهرة مطلع القرن العشرين. يبدو مزدحمًا في أحجام الواجهة الصغيرة، كما يظهر في جدول البطاقة وأزرارها.

الأوزان: 400 و700، مع مائل. اللاتيني: فيه حروف لاتينية مذيّلة، فاجمعه مع خط لاتيني مذيّل. الأرقام: الصنفان متساويا العرض افتراضيًا. وتنبيهان: يظهر أصغر من الخطوط غير المذيّلة (الجملة نفسها أضيق بنسبة 12% منها في IBM Plex Sans Arabic)، فكبّره نحو 2px، وملفه العربي هو الأثقل هنا بـ105.9 KB لكل وزن.

أي الخطوط العربية أرقامها متساوية العرض؟

في لوحة التحكم، افحص الأرقام قبل أي شيء. لا يصطف عمود الأسعار إلا إذا أخذ كل رقم العرض نفسه. ستة من الاثني عشر تفعل ذلك افتراضيًا في الأرقام اللاتينية، واثنان يفعلانه مع font-variant-numeric: tabular-nums، وأربعة لا تفعله أبدًا.

• أرقام لاتينية متساوية افتراضيًا: IBM Plex Sans Arabic وNoto Sans Arabic وCairo وVazirmatn وNoto Kufi Arabic وAmiri.
• متساوية مع tabular-nums: Rubik وAlexandria.
• متفاوتة دائمًا: Tajawal وAlmarai وReadex Pro وEl Messiri. في الصورة يظهر «1,111.00» أقصر بوضوح من «8,888.00».
• أرقام هندية متساوية: Noto Sans Arabic وNoto Kufi Arabic وAmiri افتراضيًا، وVazirmatn مع tabular-nums.

أضف tabular-nums (الصنف tabular-nums في Tailwind) إلى كل خلية جدول ورقم رئيسي وسعر على أي حال. لا يكلّف شيئًا في الخطوط المتساوية أصلًا، ويصلح Rubik وAlexandria.

أما أي الأرقام تعرض، فهذا قرار منفصل. كثير من المنتجات العربية تستخدم الأرقام اللاتينية (0 إلى 9) في كل مكان، بينما تعتمد اللغتان المحليتان للسعودية ومصر الأرقام الهندية (٠ إلى ٩) افتراضيًا. واللغة المحلية هي التي تقرر حين تنسّق الأرقام بـIntl.NumberFormat: في Chrome 156 وNode.js 24 تعطي "ar" و"ar-AE" الناتج 1,248.5، وتعطي "ar-SA" و"ar-EG" الناتج ١٬٢٤٨٫٥، وتعطي "ar-DZ" الناتج 1.248,5. أضف -u-nu-latn إلى اللغة ("ar-SA-u-nu-latn") لتفرض الأرقام اللاتينية.

كيف تضيف خطًا عربيًا في Next.js عبر next/font

حمّل خطًا لكل لغة، وأعطِ كل خط متغيّر CSS، ثم بدّل الخط حسب اللغة في CSS. تنزّل next/font/google الملفات وقت البناء وتقدّمها من نطاقك أنت، فلا يرسل المتصفح أي طلب إلى Google. بنينا الكود التالي على Next.js 16.4.5 وفحصنا الـ HTML والـ CSS الناتجين.

// app/fonts.ts
import { Inter, IBM_Plex_Sans_Arabic } from "next/font/google";

// Latin: a variable font, so no weight list is needed.
export const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-latin",
});

// Arabic: a static font, so list only the weights the UI uses.
export const plexArabic = IBM_Plex_Sans_Arabic({
  subsets: ["arabic"],
  weight: ["400", "500", "700"],
  display: "swap",
  variable: "--font-arabic",
  preload: false,
});

// app/[locale]/layout.tsx
import { inter, plexArabic } from "../fonts";
import "../globals.css";

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  return (
    <html
      lang={locale}
      dir={locale === "ar" ? "rtl" : "ltr"}
      className={`${inter.variable} ${plexArabic.variable}`}
    >
      <body>{children}</body>
    </html>
  );
}

/* app/globals.css */
html {
  font-family: var(--font-latin), system-ui, sans-serif;
}

/* Arabic first, Latin second: Latin words inside Arabic text use Inter */
html[lang="ar"] {
  font-family: var(--font-arabic), var(--font-latin), system-ui, sans-serif;
}

ما يفعله كل خيار، وما رأيناه في البناء:

• subsets: ["arabic"]: يحدد المجموعة الفرعية التي تُحمَّل مسبقًا. ويبقى في الـ CSS الناتج بقية المجموعات، كل منها خلف unicode-range، فلا ينزّل المتصفح ملفًا إلا إذا كان في الصفحة حروف من نطاقه.
• weight: مطلوب في الخطوط الثابتة مثل IBM Plex Sans Arabic وTajawal وAlmarai وAmiri. أما الخطوط المتغيّرة (Noto Sans Arabic وCairo وAlexandria وغيرها) فلا تحتاجه: ملف واحد يغطي كل الأوزان.
• display: "swap": هو الافتراضي في next/font، وكتبناه ليكون ظاهرًا. يظهر النص فورًا بخط بديل ثم يُستبدل.
• variable: ينشئ --font-arabic لتستخدمه في CSS أو في @theme في Tailwind.
• preload: false: مع القيمة الافتراضية (true) حمّلت صفحتنا الإنجليزية 4 ملفات خطوط مسبقًا، 3 منها أوزان عربية، أي نحو 101 KB لن يحتاجها قارئ الإنجليزية. ومع preload: false على الخط العربي صارت الصفحتان تحمّلان Inter فقط مسبقًا، وما زالت الصفحات العربية تحمّل الملفات العربية بمجرد ظهور نص عربي. أبقِ القيمة الافتراضية إن كان أغلب زوارك يقرؤون العربية.

الخط المتغيّر ليس أخف دائمًا. أوزان IBM Plex Sans Arabic الثلاثة الثابتة بلغت نحو 101 KB معًا، بينما بلغ ملف Noto Sans Arabic المتغيّر الوحيد (الحروف العربية، محور الوزن فقط) 162 KB. يستحق الخط المتغيّر حين تستخدم أربعة أوزان أو أكثر، أو تحرّك الوزن في رسوم متحركة.

وتكتب next/font أيضًا خطًا بديلًا مبنيًا على Arial بمقاييس معدّلة (في IBM Plex Sans Arabic كانت size-adjust: 101.17%)، فلا يقفز التخطيط حين يصل الخط الحقيقي. وإن أردت استضافة الملفات بنفسك، فـnext/font/local تأخذ مسار src وقائمة declarations لتحديد unicode-range؛ وهذا ما تفعله قوالب العقارات والتأجير السياحي وتذاكر الفعاليات عندنا، فلا يحتاج بناؤها إلى الإنترنت.

ولتخطيط الصفحة من اليمين إلى اليسار نفسه (الخصائص المنطقية، والمتغيّر rtl:، وما لا يجب قلبه)، راجع دليل RTL في Tailwind CSS.

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

حدد ارتفاع السطر بقيمة صريحة، واترك تباعد الحروف على 0، ولا تصغّر العربية عن الحجم الذي تستخدمه للإنجليزية. وهذه الأسباب بأرقام الاختبار.

ارتفاع السطر

line-height: normal تعني «ما يقوله ملف الخط»، والخطوط العربية تختلف في ذلك كثيرًا. بالقياس في Chrome بحجم 100px، كان ارتفاع السطر العربي الواحد:

• 1.11 في Almarai، و1.18 في Rubik، و1.20 في Tajawal، و1.22 في Alexandria، و1.25 في Readex Pro
• 1.50 في IBM Plex Sans Arabic، و1.56 في El Messiri، و1.57 في Vazirmatn، و1.75 في Amiri
• 1.87 في Cairo، و1.90 في Noto Kufi Arabic، و2.11 في Noto Sans Arabic

الانتقال من Almarai إلى Noto Sans Arabic مع normal يضاعف ارتفاع كل سطر تقريبًا. ومع قيم صريحة (1.5 للعناوين، و1.8 للفقرة، و1.5 في صفوف الجدول) جاء ارتفاع البطاقات الاثنتي عشرة كلها بين 448px و460px. نقطة بداية جيدة: من 1.7 إلى 1.8 لنص المحتوى العربي، ومن 1.3 إلى 1.4 للعناوين العربية، وليس 1.1 الشائعة في العناوين اللاتينية الكبيرة، لأن الحركات العربية تقع فوق الحروف وتحتها فتُقص.

تباعد الحروف

اتركه على 0. الحروف العربية متصلة، وتحذّر MDN من أن تباعد الحروف في الكتابة المتصلة قد يجعل النص يبدو مكسورًا. ألغِ أي تباعد ورثته من تنسيقات اللاتينية: html[lang="ar"] { letter-spacing: 0; }، أو rtl:tracking-normal في Tailwind. ولا توجد في العربية حروف كبيرة، فالعنوان الصغير الذي يعتمد على الأحرف الكبيرة في الإنجليزية يحتاج في العربية إلى الوزن أو اللون ليبرز.

حجم الخط

الجملة العربية نفسها بحجم الخط نفسه بلغ عرضها 1,479px في IBM Plex Sans Arabic، و1,628px في Noto Sans Arabic، و1,841px في Alexandria، و1,297px فقط في Amiri. ومن هنا قاعدتان عمليتان. اضبط حجم العربية بالعين لا بنسخ القيمة الإنجليزية: Amiri وخطوط النسخ الأخرى تحتاج نحو 2px إضافية. وافحص أعمدة الجداول بالعربية بعد تغيير الخط، لأن خطًا عريضًا مثل Alexandria يكسر خلايا كانت تتسع بالإنجليزية. في بطاقتنا كان نص الجدول بحجم 14px مقروءًا في كل الخطوط غير المذيّلة، ولا ننصح بأقل منه لنص الواجهة العربية.

ما الخطوط العربية في قوالب Aniq UI؟

لوحات التحكم عندنا موزعة بين IBM Plex Sans Arabic وNoto Sans Arabic، وأغلب المواقع تستخدم Noto Sans Arabic. راجعنا استدعاءات next/font وملفات التنسيق في مستودع كل قالب:

القالب	الخط العربي	الخط اللاتيني
لوحة الإدارة بالذكاء الاصطناعي	IBM Plex Sans Arabic	خطوط النظام
لوحة اللياقة البدنية	IBM Plex Sans Arabic	Inter
اللوحة المالية	Noto Sans Arabic	Inter
منصة التعليم (موقع الطالب ولوحة الإدارة)	IBM Plex Sans Arabic	Inter
المطعم (الموقع ولوحة الإدارة)	IBM Plex Sans Arabic	Inter، وMontserrat للعناوين
واجهة المتجر الإلكتروني	Zain، وIBM Plex Sans Arabic للواجهة الرئيسية	Plus Jakarta Sans
العقارات (الموقع ولوحة الإدارة)	Noto Sans Arabic، وNoto Naskh Arabic للعناوين	Manrope وCormorant Garamond
التأجير السياحي (الموقع ولوحة الإدارة)	Noto Sans Arabic	Outfit
تذاكر الفعاليات (الموقع ولوحة الإدارة)	Noto Sans Arabic، وLalezar للعناوين	DM Sans وArchivo Black
قالب SaaS	Noto Sans Arabic، وAlmarai للعناوين	DM Sans وClash Display
قوالب صفحات الهبوط المجانية	Noto Sans Arabic	Inter
صفحة الهبوط ثلاثية الأبعاد المجانية	Cairo	Anton

هذا IBM Plex Sans Arabic يؤدي عمل لوحة التحكم في قالب المطعم: بطاقات أرقام ورسم بياني وقائمة طلبات وجدول، مع أسعار وأرقام طلبات لاتينية داخل النص العربي.

والخط نفسه بحجم العناوين في موقع المطعم، حيث يحمل الوزن العريض عنوانًا رئيسيًا عربيًا من ثلاثة أسطر:

كل هذه العروض الحية يمكن تحويلها إلى العربية قبل الشراء. وتجد مقارنة لوحات التحكم العربية التسع هنا، وإن كنت تبني موقعًا تسويقيًا فإن دليل تصميم صفحة الهبوط يشرح الأقسام وتفاصيل العربية.

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

ما أفضل خط عربي للمواقع؟

للواجهات: IBM Plex Sans Arabic أو Noto Sans Arabic. كلاهما واضح بالأحجام الصغيرة، وأرقامه اللاتينية متساوية العرض للجداول، ويضم حروفًا لاتينية. للعناوين: Cairo أو Almarai أو Noto Kufi Arabic. وللمقالات الطويلة: Amiri.

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

نعم. الخطوط الاثنا عشر في هذا الدليل كلها بترخيص SIL Open Font License 1.1، الذي يسمح باستخدامها وتضمينها في المواقع والتطبيقات التجارية. الشيء الوحيد الذي يمنعه هو بيع ملفات الخط وحدها.

هل خط Cairo مناسب لنص المحتوى؟

بأوزانه الخفيفة نعم، فمصمموه ينصحون بالأوزان الخفيفة للنص والثقيلة للعناوين. أما في لوحات التحكم الكثيفة فيتسع السطر في IBM Plex Sans Arabic لنص أكثر.

هل يكفي خط واحد للإنجليزية والعربية؟

نعم، فالاثنا عشر كلها تضم اللاتينية. وأكثرها اتساقًا الخطوط التي لاتينيّها عائلة لاتينية معروفة: IBM Plex Sans Arabic (مع IBM Plex Sans)، وCairo (مع Titillium Web)، وVazirmatn (مع Roboto). ومع ذلك تجمع منتجات كثيرة الخط العربي مع خط لاتيني منفصل مثل Inter، كما تفعل أغلب قوالبنا.

هل أستخدم الأرقام الهندية أم اللاتينية؟

كلاهما صحيح؛ اختر واحدًا للمنتج كله ونسّق الأرقام بـIntl.NumberFormat. وإن استخدمت الأرقام الهندية في الجداول فاختر Noto Sans Arabic أو Noto Kufi Arabic أو Amiri أو Vazirmatn، فهي الخطوط التي تصطف أرقامها الهندية.

هل يصلح تباعد الحروف في العربية؟

لا. الحروف العربية تتصل، والتباعد بينها يقطع الوصل. اترك letter-spacing: 0 للنص العربي، واستخدم الوزن أو الحجم أو اللون للتمييز.

الخلاصة

ابدأ بـIBM Plex Sans Arabic للوحة التحكم، وبـNoto Sans Arabic لموقع يجمع لغات كثيرة. وأضف خط عناوين واحدًا إن احتاجت الهوية إليه. ثم ثلاثة أشياء في الكود: tabular-nums على كل رقم، وارتفاع سطر صريح، وletter-spacing: 0 للعربية. حمّل كل لغة عبر next/font، وبدّل الخط تحت html[lang="ar"]، وأوقف التحميل المسبق للغة التي يقرؤها عدد أقل من زوارك.

قوالب عربية جاهزة والخطوط مضبوطة فيها

كل قالب مدفوع من Aniq UI يأتي بالإنجليزية والعربية مع تخطيط حقيقي من اليمين إلى اليسار، وعروض حية يمكنك تحويلها إلى العربية، وطريقة تحميل الخطوط المشروحة أعلاه. الأسعار بدفعة واحدة، مع الكود المصدري:

• المواقع والمتاجر (مطاعم، عقارات، منصات تعليم، متاجر إلكترونية، تأجير سياحي، تذاكر فعاليات): $39.
• صفحات الهبوط (SaaS والشركات): $39.
• لوحات التحكم: $49، ولوحة الإدارة بالذكاء الاصطناعي ولوحة اللياقة بسعر $69.
• Full Stack (الموقع ولوحة التحكم والـ API معًا): $149.
• القوالب العشرة كلها: الحزمة، بسعر قائمة $499. راجع الصفحة لمعرفة العرض الحالي.

تصفّح القوالب أو قارن لوحات التحكم العربية.

أدلة ذات صلة

• دليل RTL في Tailwind CSS: الخصائص المنطقية والمتغيّر rtl:
• قوالب لوحات تحكم عربية بـ Next.js تدعم RTL: 9 لوحات من Aniq UI
• تصميم صفحة هبوط احترافية: الخطوات وقوالب جاهزة
• كيف تطلق موقع SaaS بالإنجليزية والعربية باستخدام Next.js

المصادر

• Next.js: مرجع وحدة الخطوط next/font
• Google Fonts: الخطوط التي تدعم العربية
• مستودع google/fonts: ملفات الترخيص والأوصاف
• ترخيص SIL Open Font License 1.1
• IBM Plex Sans Arabic، Noto Sans Arabic، Cairo، Tajawal، Almarai، Readex Pro
• Rubik، Alexandria، Vazirmatn، El Messiri، Noto Kufi Arabic، Amiri
• MDN: font-variant-numeric
• MDN: letter-spacing (ملاحظات التدويل)
• MDN: Intl.NumberFormat

آخر مراجعة: نوفمبر 2026.