Police arabe pour site web : 12 polices testées (2026)

Pour la plupart des interfaces web, la meilleure police arabe est IBM Plex Sans Arabic ou Noto Sans Arabic : les deux restent nettes à 14px, leurs chiffres s’alignent dans les colonnes d’un tableau, et chacune a un alphabet latin assorti. Prenez Cairo ou Almarai pour un style plus doux, Noto Kufi Arabic ou El Messiri pour les titres, et Amiri seulement pour les longs textes. Les 12 polices ci-dessous sont gratuites sur Google Fonts sous licence SIL Open Font License, et toutes se chargent dans Next.js avec next/font.

Cette liste ne vient pas d’un autre classement. Nous avons composé la même carte de dashboard en arabe (un titre, deux indicateurs, un tableau, un paragraphe et deux boutons) dans chaque police, fait une capture dans Chrome 156, mesuré les chiffres, l’interligne et le poids des fichiers, puis construit la configuration Next.js ci-dessous sur Next.js 16.4.5. Vérifié en novembre 2026.

Comment nous avons testé les polices

Chaque police a reçu la même tâche : une carte de dashboard sombre en arabe, de droite à gauche, large de 560px. Elle contient un titre de 20px, un chiffre d’affaires de 30px en chiffres latins, un second chiffre en chiffres arabes orientaux (٠١٢٣), un tableau de commandes de deux lignes à 14px, un paragraphe de 15px avec « Next.js API » au milieu de la phrase arabe, et deux boutons. Chaque police était chargée depuis Google Fonts en trois graisses (normale, moyenne et grasse, ou les plus proches disponibles), avec un interligne fixé explicitement pour pouvoir comparer les cartes.

Puis nous avons mesuré trois choses dans le même navigateur :

• Les chiffres : « 1111 » et « 0000 » ont-ils la même largeur, avec et sans font-variant-numeric: tabular-nums, en chiffres latins et arabes orientaux.
• L’interligne par défaut : la hauteur d’une ligne arabe avec line-height: normal, en multiple de la taille de police.
• Le poids : le fichier woff2 que Google Fonts envoie à Chrome pour le sous-ensemble arabe en graisse 400, et la largeur de la même phrase arabe à la même taille.

Licences, graisses et axes viennent des données du catalogue Google Fonts et du fichier de licence de chaque police dans le dépôt google/fonts, consultés le 5 novembre 2026.

Polices arabes pour le web : le comparatif

Les 12 sont gratuites pour un usage commercial sous SIL Open Font License 1.1 et gèrent le latin en plus de l’arabe. « S’alignent » signifie que, dans une colonne de prix en chiffres latins, chaque chiffre a la même largeur.

Police	Idéale pour	Graisses	Variable	Fichier arabe, graisse 400	Chiffres latins alignés
IBM Plex Sans Arabic	Dashboards, interfaces denses	7 (100 à 700)	Non	32,7 Ko	Oui, par défaut
Noto Sans Arabic	Dashboards, texte courant	100 à 900	Oui (graisse, largeur)	47,8 Ko	Oui, par défaut
Cairo	Titres, interfaces chaleureuses	200 à 1000	Oui (graisse, inclinaison)	13,1 Ko	Oui, par défaut
Tajawal	Pages marketing légères	7 (200 à 900, sans 600)	Non	8,7 Ko	Non
Almarai	Titres, interfaces simples	4 (300, 400, 700, 800)	Non	17,8 Ko	Non
Readex Pro	Texte facile à lire	160 à 700	Oui (graisse, HEXP)	9,6 Ko	Non
Rubik	Marques aux angles arrondis	300 à 900, avec italiques	Oui	17,0 Ko	Avec tabular-nums
Alexandria	Titres affirmés	100 à 900	Oui	12,1 Ko	Avec tabular-nums
Vazirmatn	Interfaces, persan aussi	100 à 900	Oui	20,6 Ko	Oui, par défaut
El Messiri	Titres	400 à 700	Oui	11,8 Ko	Non
Noto Kufi Arabic	Titres, grands textes	100 à 900	Oui	42,8 Ko	Oui, par défaut
Amiri	Lecture longue uniquement	400 et 700, avec italiques	Non	105,9 Ko	Oui, par défaut

Les poids indiqués sont pour une seule graisse. Chaque graisse statique en plus est un autre fichier de taille proche, alors qu’une police variable est un seul fichier plus lourd qui couvre toute la plage.

Les 12 meilleures polices arabes pour une interface web

Les quatre premières, dans la même carte :

1. IBM Plex Sans Arabic

Pour : dashboards, back-offices, tableaux, formulaires. C’était la plus étroite des sans serif du test : la même phrase était environ 20 % plus étroite qu’en Alexandria, donc une cellule de tableau contient plus de texte avant de passer à la ligne. Elle se lit bien dans des lignes de tableau à 14px, et son interligne par défaut (1,5) est proche de celui d’une police d’interface latine.

Graisses : 7 graisses statiques, de 100 à 700. Pas variable, donc listez seulement les graisses utilisées. Latin : elle inclut le latin d’IBM Plex Sans et s’accorde avec IBM Plex Sans ou Inter. Chiffres : chiffres latins tabulaires par défaut ; ses chiffres arabes orientaux restent proportionnels, même avec tabular-nums.

2. Noto Sans Arabic

Pour : dashboards et texte courant. C’est l’arabe sans contraste de Google, membre de la collection Noto qui vise à couvrir toutes les écritures, ce qui garde la cohérence quand une page mélange les langues.

Graisses : variable, de 100 à 900, avec un axe de largeur de 62,5 à 100. Latin : s’accorde avec Noto Sans, Inter ou DM Sans. Chiffres : chiffres latins et arabes orientaux tabulaires par défaut ; parmi les sans serif, seule Noto Kufi Arabic fait de même. Attention à son interligne par défaut : 2,11, le plus haut des 12, donc fixez toujours le vôtre.

3. Cairo

Pour : titres, landing pages et interfaces chaleureuses. Mohamed Gaber l’a créée en étendant la famille latine Titillium Web à l’arabe, dans un style inspiré du coufique, avec des ascendantes et descendantes courtes. Les graisses fines conviennent au texte, les grasses aux titres.

Graisses : variable, de 200 à 1000, plus un axe d’inclinaison (-11 à 11). Latin : son latin est Titillium Web, à utiliser avec elle ou seule. Chiffres : latins tabulaires par défaut, arabes orientaux proportionnels.

4. Tajawal

Pour : pages marketing légères et libellés courts. Un dessin géométrique à faible contraste signé Boutros, et le plus petit fichier arabe du test (8,7 Ko en graisse 400).

Graisses : 7 graisses statiques : 200, 300, 400, 500, 700, 800 et 900. Pas de 600, donc font-semibold tombe sur une graisse voisine. Latin : son propre latin géométrique, pensé pour cohabiter avec d’autres polices latines. Chiffres : toujours proportionnels, dans les deux écritures. À éviter pour des colonnes de chiffres.

Les quatre suivantes :

5. Almarai

Pour : titres et interfaces simples et aérées. Boutros l’a dessinée pour la lecture à l’écran, avec un faible contraste et de larges ouvertures. Notre SaaS Template l’utilise pour les titres arabes.

Graisses : 4 graisses statiques : 300, 400, 700 et 800. Pas de graisse moyenne, construisez la hiérarchie avec normal et gras. Latin : son propre latin sans serif. Chiffres : toujours proportionnels. Son interligne par défaut est le plus serré des 12 (1,11) : les signes diacritiques peuvent toucher la ligne du dessus si vous ne le fixez pas.

6. Readex Pro

Pour : le texte où la facilité de lecture compte, comme l’aide ou l’onboarding. Nadine Chahine et Thomas Jockin l’ont conçue avec la méthode de Lexend, la famille latine pensée pour réduire le bruit visuel.

Graisses : variable, de 160 à 700, plus un axe HEXP qui élargit les lettres. Latin : Lexend est son partenaire naturel. Chiffres : toujours proportionnels, gardez-la hors des tableaux de données.

7. Rubik

Pour : les marques qui veulent les angles légèrement arrondis de Rubik dans les deux langues. Une seule famille couvre le latin, l’arabe, l’hébreu et le cyrillique.

Graisses : variable, de 300 à 900, avec italiques. Latin : intégré, une seule famille suffit pour les deux écritures. Chiffres : latins proportionnels par défaut, tabulaires avec font-variant-numeric: tabular-nums. Les chiffres arabes orientaux restent proportionnels.

8. Alexandria

Pour : titres affirmés et textes de hero. C’est la compagne arabe de Montserrat, et la police la plus large du test : idéal en grand, coûteux en place dans un tableau.

Graisses : variable, de 100 à 900. Latin : associez-la à Montserrat. Chiffres : latins tabulaires avec tabular-nums, arabes orientaux proportionnels.

Les quatre dernières :

9. Vazirmatn

Pour : interfaces d’applications, surtout si le produit sert aussi des lecteurs persanophones. Elle a commencé en 2015 sous le nom Vazir, comme police persane et arabe pour le web et les applications.

Graisses : variable, de 100 à 900. Latin : son latin est Roboto, elle s’accorde donc avec Roboto. Chiffres : latins tabulaires par défaut, arabes orientaux tabulaires avec tabular-nums.

10. El Messiri

Pour : des titres qui ont du caractère. Son arabe est courbe, inspiré du naskh tracé au pinceau, ce qui réchauffe une page en grand corps.

Graisses : variable, de 400 à 700. Latin : son latin et son cyrillique viennent de Philosopher. Chiffres : toujours proportionnels, et ses sept et huit arabes orientaux ont des formes arrondies en U et en ∩ : testez-la avec vos vrais prix avant de l’utiliser près de chiffres.

11. Noto Kufi Arabic

Pour : titres et grands textes. Google la décrit comme un coufique simplifié destiné surtout aux grandes tailles, et elle se marie naturellement avec Noto Sans Arabic pour le texte.

Graisses : variable, de 100 à 900. Latin : s’accorde avec Noto Sans ou Inter. Chiffres : latins et arabes orientaux tabulaires par défaut, comme Noto Sans Arabic.

12. Amiri

Pour : la lecture longue uniquement : articles, documentation, pages juridiques, textes littéraires ou religieux. C’est un naskh classique qui fait revivre les caractères de l’imprimerie de Boulaq, au Caire, au début du XXe siècle. En petite taille d’interface, elle paraît serrée, comme le montrent le tableau et les boutons de la carte.

Graisses : 400 et 700, avec italiques. Latin : elle a un latin à empattements, associez-la à une serif latine. Chiffres : les deux jeux sont tabulaires par défaut. Deux mises en garde : elle paraît plus petite que les sans serif (la même phrase était 12 % plus étroite qu’en IBM Plex Sans Arabic), donc augmentez-la d’environ 2px, et son fichier arabe est le plus lourd ici, 105,9 Ko par graisse.

Quelles polices arabes ont des chiffres tabulaires ?

Pour un dashboard, vérifiez les chiffres avant tout. Une colonne de prix ne s’aligne que si chaque chiffre a la même largeur. Six des 12 polices le font par défaut pour les chiffres latins, deux le font avec font-variant-numeric: tabular-nums, et quatre jamais.

• Chiffres latins tabulaires par défaut : IBM Plex Sans Arabic, Noto Sans Arabic, Cairo, Vazirmatn, Noto Kufi Arabic, Amiri.
• Tabulaires avec tabular-nums : Rubik, Alexandria.
• Toujours proportionnels : Tajawal, Almarai, Readex Pro, El Messiri. Sur l’image, leur « 1,111.00 » est nettement plus court que « 8,888.00 ».
• Chiffres arabes orientaux tabulaires : Noto Sans Arabic, Noto Kufi Arabic et Amiri par défaut, Vazirmatn avec tabular-nums.

Ajoutez de toute façon tabular-nums (la classe tabular-nums de Tailwind) à chaque cellule, indicateur et prix. Cela ne coûte rien avec les polices déjà tabulaires et corrige Rubik et Alexandria.

Le choix des chiffres affichés est une autre question. Beaucoup de produits arabes utilisent les chiffres latins (0 à 9) partout, alors que les locales saoudienne et égyptienne utilisent par défaut les chiffres arabes orientaux (٠ à ٩). C’est la locale qui décide quand vous formatez avec Intl.NumberFormat : dans Chrome 156 et Node.js 24, "ar" et "ar-AE" donnent 1,248.5, "ar-SA" et "ar-EG" donnent ١٬٢٤٨٫٥, et "ar-DZ" donne 1.248,5. Ajoutez -u-nu-latn à la locale ("ar-SA-u-nu-latn") pour forcer les chiffres latins.

Charger une police arabe dans Next.js avec next/font

Chargez une police par écriture, donnez à chacune une variable CSS, et changez de police selon la langue en CSS. next/font/google télécharge les fichiers au build et les sert depuis votre propre domaine : le navigateur n’envoie aucune requête à Google. Nous avons construit le code ci-dessous sur Next.js 16.4.5 et vérifié le HTML et le CSS produits.

// 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;
}

Ce que fait chaque option, et ce que nous avons vu dans le build :

• subsets: ["arabic"] : désigne le sous-ensemble à précharger. Le CSS généré contient quand même les autres sous-ensembles, chacun derrière un unicode-range : le navigateur ne télécharge un fichier que si la page contient des caractères de cette plage.
• weight : obligatoire pour les polices statiques comme IBM Plex Sans Arabic, Tajawal, Almarai et Amiri. Les polices variables (Noto Sans Arabic, Cairo, Alexandria et les autres) n’en ont pas besoin : un fichier couvre toute la plage.
• display: "swap" : c’est la valeur par défaut de next/font, écrite ici pour être visible. Le texte s’affiche tout de suite dans une police de secours, puis bascule.
• variable : crée --font-arabic, à utiliser en CSS ou dans le @theme de Tailwind.
• preload: false : avec la valeur par défaut (true), notre page anglaise préchargeait 4 fichiers de police, dont 3 graisses arabes, soit environ 101 Ko inutiles pour un lecteur anglophone. Avec preload: false sur la police arabe, les deux pages ne préchargent plus qu’Inter, et les pages arabes chargent toujours les fichiers arabes dès que du texte arabe s’affiche. Gardez la valeur par défaut si la plupart de vos visiteurs lisent l’arabe.

Variable ne veut pas toujours dire plus léger. Les trois graisses statiques d’IBM Plex Sans Arabic pesaient environ 101 Ko ensemble, alors que l’unique fichier variable de Noto Sans Arabic (sous-ensemble arabe, axe de graisse seul) pesait 162 Ko. Une police variable devient rentable à partir de quatre graisses, ou si vous animez la graisse.

next/font écrit aussi une police de secours basée sur Arial avec des métriques ajustées (pour IBM Plex Sans Arabic, size-adjust: 101.17%), ce qui évite que la mise en page saute à l’arrivée de la vraie police. Pour héberger vous-même les fichiers, next/font/local prend un chemin src et une liste declarations pour le unicode-range ; c’est ce que font nos templates immobilier, location de vacances et billetterie, dont le build n’a donc pas besoin du réseau.

Pour la mise en page de droite à gauche elle-même (propriétés logiques, variante rtl:, ce qui ne doit pas s’inverser), voir le guide RTL de Tailwind CSS.

Interligne, interlettrage et taille de police en arabe

Fixez un interligne explicite, laissez l’interlettrage à 0, et ne réduisez pas l’arabe sous la taille utilisée pour l’anglais. Voici pourquoi, chiffres du test à l’appui.

Interligne

line-height: normal veut dire « ce que dit le fichier de police », et les polices arabes ne sont pas du tout d’accord. Mesurée dans Chrome à 100px, une ligne arabe faisait :

• 1,11 en Almarai, 1,18 en Rubik, 1,20 en Tajawal, 1,22 en Alexandria et 1,25 en Readex Pro
• 1,50 en IBM Plex Sans Arabic, 1,56 en El Messiri, 1,57 en Vazirmatn et 1,75 en Amiri
• 1,87 en Cairo, 1,90 en Noto Kufi Arabic et 2,11 en Noto Sans Arabic

Passer d’Almarai à Noto Sans Arabic avec normal doublerait presque la hauteur de chaque ligne. Avec des valeurs explicites (1,5 pour les titres, 1,8 pour le paragraphe, 1,5 dans les lignes du tableau), les 12 cartes du test mesuraient toutes entre 448px et 460px de haut. Bon point de départ : 1,7 à 1,8 pour le texte arabe, 1,3 à 1,4 pour les titres arabes, et jamais le 1,1 courant sur les grands titres latins, car les signes diacritiques arabes se placent au-dessus et en dessous des lettres et se font couper.

Interlettrage

Laissez-le à 0. Les lettres arabes sont liées, et MDN prévient qu’un interlettrage sur une écriture liée peut donner un texte qui semble cassé. Annulez tout espacement hérité des styles latins : html[lang="ar"] { letter-spacing: 0; }, ou rtl:tracking-normal dans Tailwind. L’arabe n’a pas non plus de majuscules : un surtitre en capitales espacées en anglais a besoin de graisse ou de couleur pour ressortir en arabe.

Taille de police

La même phrase arabe à la même taille mesurait 1 479px en IBM Plex Sans Arabic, 1 628px en Noto Sans Arabic, 1 841px en Alexandria et seulement 1 297px en Amiri. Deux règles pratiques en découlent. Réglez la taille de l’arabe à l’œil, sans copier la valeur anglaise : Amiri et les autres naskh demandent environ 2px de plus. Et revérifiez les colonnes de tableau en arabe après un changement de police, car une police large comme Alexandria fait passer à la ligne des cellules qui tenaient en anglais. Dans notre carte, le texte de tableau à 14px restait lisible dans toutes les sans serif ; nous ne descendrions pas plus bas pour du texte d’interface en arabe.

Quelles polices arabes utilisent les templates Aniq UI ?

Nos dashboards se partagent entre IBM Plex Sans Arabic et Noto Sans Arabic, et la plupart de nos sites utilisent Noto Sans Arabic. Nous avons vérifié les appels next/font et les feuilles de style dans le dépôt de chaque template :

Template	Police arabe	Police latine
Dashboard admin avec IA	IBM Plex Sans Arabic	Polices système
Dashboard fitness	IBM Plex Sans Arabic	Inter
Dashboard financier	Noto Sans Arabic	Inter
LMS (site étudiant et admin)	IBM Plex Sans Arabic	Inter
Restaurant (site et admin)	IBM Plex Sans Arabic	Inter, Montserrat pour les titres
Boutique e-commerce	Zain, IBM Plex Sans Arabic pour le hero	Plus Jakarta Sans
Immobilier (site et admin)	Noto Sans Arabic, Noto Naskh Arabic pour les titres	Manrope, Cormorant Garamond
Location de vacances (site et admin)	Noto Sans Arabic	Outfit
Billetterie d’événements (site et admin)	Noto Sans Arabic, Lalezar pour les titres	DM Sans, Archivo Black
SaaS Template	Noto Sans Arabic, Almarai pour les titres	DM Sans, Clash Display
Landing pages gratuites	Noto Sans Arabic	Inter
Landing page 3D gratuite	Cairo	Anton

Voici IBM Plex Sans Arabic au travail dans le dashboard du template restaurant : cartes d’indicateurs, graphique, file de commandes et tableau, avec des prix et numéros de commande latins au milieu du texte arabe.

Et la même police en taille de titre sur le site du restaurant, où la graisse grasse porte un hero arabe sur trois lignes :

Chacune de ces démos peut passer en arabe avant l’achat. Les neuf dashboards en arabe sont comparés ici, et si vous créez un site marketing, le guide pour créer une landing page couvre les sections et les détails de l’arabe.

FAQ

Quelle est la meilleure police arabe pour un site web ?

Pour une interface, IBM Plex Sans Arabic ou Noto Sans Arabic : nettes en petite taille, chiffres latins tabulaires pour les tableaux, latin inclus. Pour les titres, Cairo, Almarai ou Noto Kufi Arabic. Pour les longs articles, Amiri.

Les polices arabes de Google sont-elles gratuites pour un usage commercial ?

Oui. Les 12 polices de ce guide sont sous SIL Open Font License 1.1, qui autorise leur usage et leur intégration dans des sites et applications commerciaux. La seule chose interdite est de vendre les fichiers de police seuls.

Cairo convient-elle au texte courant ?

Dans ses graisses fines, oui : ses auteurs conseillent les graisses fines pour le texte et les grasses pour les titres. Pour un dashboard dense, IBM Plex Sans Arabic fait tenir plus de texte par ligne.

Une seule police peut-elle gérer l’anglais et l’arabe ?

Oui, les 12 incluent le latin. Les résultats les plus homogènes viennent des polices dont le latin est une famille latine connue : IBM Plex Sans Arabic (IBM Plex Sans), Cairo (Titillium Web) et Vazirmatn (Roboto). Beaucoup de produits associent pourtant la police arabe à une police latine séparée comme Inter, comme la plupart de nos templates.

Chiffres arabes orientaux ou chiffres latins ?

Les deux sont corrects ; choisissez-en un pour tout le produit et formatez avec Intl.NumberFormat. Si vous affichez des chiffres arabes orientaux dans des tableaux, prenez Noto Sans Arabic, Noto Kufi Arabic, Amiri ou Vazirmatn, les polices dont ces chiffres s’alignent.

Le letter-spacing fonctionne-t-il en arabe ?

Non. Les lettres arabes se lient, et les espacer casse les liaisons. Gardez letter-spacing: 0 pour l’arabe et jouez sur la graisse, la taille ou la couleur pour l’emphase.

Conclusion

Commencez par IBM Plex Sans Arabic pour un dashboard et Noto Sans Arabic pour un site qui mélange beaucoup d’écritures. Ajoutez une police de titre si la marque l’exige. Puis trois choses dans le code : tabular-nums sur chaque nombre, un interligne explicite et letter-spacing: 0 pour l’arabe. Chargez chaque écriture avec next/font, changez de police sous html[lang="ar"], et coupez le préchargement pour l’écriture que lisent le moins de visiteurs.

Templates prêts pour l’arabe, polices configurées

Chaque template payant d’Aniq UI est livré en anglais et en arabe avec une vraie mise en page de droite à gauche, des démos que vous pouvez passer en arabe, et le chargement de polices décrit plus haut. Prix en un seul paiement, code source inclus :

• Sites et boutiques (restaurant, immobilier, LMS, e-commerce, location de vacances, billetterie) : $39.
• Landing pages (SaaS et entreprise) : $39.
• Dashboards d’administration : $49. Le dashboard admin avec IA et le dashboard fitness coûtent $69.
• Full stack (site, dashboard et API ensemble) : $149.
• Les 10 templates : le pack, prix catalogue $499. Consultez la page pour l’offre en cours.

Parcourir les templates ou comparer les dashboards arabes RTL.

Guides associés

• Guide RTL Tailwind CSS : propriétés logiques et variante rtl:
• Templates de dashboard arabe RTL pour Next.js : 9 dashboards Aniq UI
• Créer une landing page : les étapes et des templates prêts
• Comment lancer un site SaaS en anglais et en arabe avec Next.js

Sources

• Next.js : référence du module de polices next/font
• Google Fonts : polices compatibles avec l’arabe
• Dépôt google/fonts : fichiers de licence et descriptions
• 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

Vérifié en novembre 2026.