Most Arabic websites are readable in theory and tiring in practice. The font is fine, the colours are fine, but the text sits too tight on the screen and visitors leave after two paragraphs. Sizes and spacing fix more Arabic reading problems than font choice does.
Arabic needs different numbers from Latin. The script is connected, letters carry dots above and below the baseline, and diacritics stack where Latin text leaves empty space. A layout tuned for English is a starting point, not an answer.
Sixteen pixels is the browser default and it works for short labels. For articles, 18px is the safer floor, and 20px is reasonable on pages read mostly on phones. Arabic at 14px is where dots begin to merge and readers lean into the screen.
On responsive layouts, do not let the size drift down on small screens. If you use clamp, keep the lower bound at 17px or above, for example clamp(17px, 4vw, 20px). Shrinking body text to fit more on a phone is the fastest way to lose a reader.
Arabic ascenders, descenders and dots need vertical room that Latin does not. Set line-height between 1.7 and 1.9 for body copy. If the text carries diacritics, push it to 2.0. Headings are short, so 1.3 to 1.5 keeps their lines from drifting apart.
Use a unitless value rather than a fixed pixel height. Unitless numbers scale with font size, so one heading rule covers every heading level without manual adjustment.
Long lines exhaust the eye. Cap Arabic measure at roughly 60 to 75 characters, which in practice means a max-width near 65ch. Apply dir="rtl" on the page container rather than on individual paragraphs, otherwise lists, dates and form fields keep flipping the wrong way.
Numbers need one decision, made once: Eastern Arabic numerals or Latin digits. Whichever you choose, use it everywhere. Mixed numeral styles on the same page make prices and dates look unreliable, which is a trust problem rather than a style preference.
Keep Arabic paragraphs to two or four lines. Space between paragraphs should be clearly larger than space between lines, usually 1em to 1.5em, so the eye registers a new idea instead of a new line. Headings need more space above than below, which ties each heading to the text it introduces.
Then turn the decisions into a scale: 16 / 18 / 20 / 24 / 32, reused on every page. A scale stops typography from being a judgement call that gets renegotiated on each new template.
Q8DM has designed and developed Arabic websites since 1998, and the pattern is consistent: pages that look polished in a screenshot but read badly on a phone lose visitors before the content has a chance. Adjusting size and spacing is usually a small CSS change with a visible effect on time on page.
Open one article on your phone and read it to the end without squinting. If you cannot, your visitors will not either. The Q8DM team can review the typography on your Arabic pages and hand you a short, specific list of fixes. Details at q8dm.com.