Here's the short version: an easy-to-read article isn't one with a trendy font. It's one where readers know what it's about the moment it opens, can find their place again after getting distracted, don't see it fall apart when they zoom in, and can read it naturally in any language. Readers didn't come to conquer your article. It's the article's job to show them the way.
The 3-line summary:
- A good starting point is body text around 17-18px, line spacing of 1.7-1.9, and a line length that isn't too long. It's a starting point, not a law.
- With WCAG 2.2 (the international web accessibility standard), what matters is not breaking things like contrast, 200% text zoom, reflow at 320 CSS px, overriding text spacing, and keyboard use. [R1-R8]
- For 12 languages, don't paste the same CSS 12 times. Build a shared accessibility base, then tune it for each writing system. [R10-R13]
1. Readability isn't taste. It's a 3-layer design
Readability has at least three layers: can you see the text, can you follow the writing, and can you operate the page. Even 18px text is painful if the writing is a solid wall. Even simple writing is painful if the buttons are tiny. "I just fixed the font size and I'm done" is like polishing the nameplate on your house while tearing out the stairs.
2. Readers don't read everything from the start, so make it readable at 4 depths
On the web, skimming is the norm. So build the article to work at four depths: 5 seconds = title and opening, 30 seconds = the H2 headings and bold text, 3 minutes = the key points, deep dive = the full text. That doesn't mean you can only write short pieces. It means a long piece should have plenty of stops along the way.
If the H2 headings alone tell a coherent story, each section opens with a small conclusion, and tables and bullet lists make comparisons easy to pick up, then people who read everything and people who just want the answer can share one page.
3. Start body text at around 17-18px
There's no absolute best size for web body text. But text that's too small hurts visibility, and in eye-tracking research on real web pages, larger fonts were linked to shorter fixation times. [R14] In practice, start at 17-18px for body text and set it in zoom-friendly units like rem.
What matters is that "I made it 18px" does not mean "it's accessible." The WCAG 2.2 AA Resize Text rule requires that content and functions survive zooming up to 200%. [R3] If the menu vanishes the moment a reader zooms in, that beautiful 18px first screen is just a souvenir photo.
4. Line spacing, paragraph spacing and line length reduce "text traffic"
Line spacing of about 1.7-1.9 as a starting value gives long web articles room to breathe. Also leave clear space between paragraphs. One topic per paragraph is the basic rule; avoid giant blocks with no breaks. [R9]
For Latin-script text, there's research showing that a medium line length of about 55 characters worked well, and in practice 55-70 characters is an easy starting point. [R15] WCAG's AAA Visual Presentation criterion gives 80 characters or fewer, and 40 or fewer for CJK (Chinese, Japanese, Korean). [R8] Again, 55 isn't a universal truth. Adjust for screen, language and text size.
Justified text (flush on both edges) tends to produce wildly uneven word gaps. On the web, left-aligned is basically fine. [R8]
5. Fonts aren't magic. Use something that reads normally and shows up fast
There's no universal winner between serif and sans-serif. A controlled experiment found no big serif effect on reading speed. [R16] And a 2026 meta-analysis found no consistent evidence that special "dyslexia fonts" like OpenDyslexic improve reading performance over standard fonts. [R17]
So accessibility doesn't mean forcing a special font. Enough size, white space, natural letterforms, full character coverage, and letting users zoom are the real foundation. If you prefer the device's system font or a common font for each language, you can skip loading huge web fonts.
6. Background and contrast: pale gray text carries a heavy "stylish tax"
WCAG 2.2 AA sets contrast at 4.5:1 for normal text and 3:1 or more for large text. [R2] There's no need to put light gray on white because it feels "kind of upscale" and hand your readers a debuff.
Several studies found that dark text on a light background (positive polarity) helps with proofreading and seeing small text. [R18] So a light theme is the safe default for general audiences. Some people prefer dark mode, so keep that option. There's no strong evidence for claiming that off-white is always healthier than pure white.
7. H1, H2 and H3 aren't decoration. They're the road signs of your article
H1 is the page's subject. H2 is a major point. H3 is the breakdown of it. Don't fake a heading by making text bold; give it real meaning through HTML heading structure. Screen reader users move around a page by its headings, so headings are both visual design and navigation. [R7][R9]
A good test is simple: if you pull out only the H2s, can you still follow the story? If not, your headings are probably the kind that get readers lost, like "Chapter 2", "Continued" or "More details".
8. Use bold, bullets, tables and conclusion boxes as "information signs"
Bold is for key terms. Bullets are for parallel items. Tables are for comparison. A conclusion box is where a decision lands. Give each one a job. If you bold the whole text, it's like switching on 100 warning lights at once, and none of them stands out.
Don't tell links apart by color alone; give them another cue such as an underline. And don't stop at "it's red, so it's dangerous" for important information; show the meaning with words or icons too.
9. Assume "dopamine-brain" mode, but don't buy the 8-second attention span myth
"Dopamine-brain" here is not a medical term. It's a joking name for the scattered state of the modern web: notification, short video, another tab, back again, "wait, where was I reading?" It's not meant to insult a whole generation or a group of people with disabilities.
The fix isn't turning the whole article into a short video. It's short paragraphs, specific headings, a small conclusion per section, a table of contents if needed, and proper nouns that let readers rebuild the context when they come back. Autoplay, irrelevant carousels, and pop-ups that take over the screen mid-read are like throwing a chair at the reader's concentration, so cut them. [R9]
10. Accessibility for disabilities should be standard equipment, not a "special mode"
Aim for WCAG 2.2 AA as the baseline. The typical items are 200% text zoom, reflow at 320 CSS px with no sideways scrolling, 4.5:1 contrast, pointer targets of at least 24×24 CSS px or enough spacing, keyboard operation, visible focus, and a way to skip repeated blocks. [R1-R7]
The Text Spacing values (line height 1.5, spacing after paragraphs 2, letter spacing 0.12em, word spacing 0.16em) are not an order to make those your default CSS. The AA requirement is that when a user overrides spacing to those values, text doesn't overlap or disappear and functions don't break. [R5]
In practice, making main buttons around 44px is easier to press, but the minimum bar for WCAG 2.2 AA is 24×24 CSS px, with exceptions. [R6]
11. Share one design system across 12 languages, but don't force the same typesetting
What you share is the foundation: contrast, heading hierarchy, zoom, reflow, spacing, operability, accessible names and so on. What you change per language is the writing-system-specific part: fonts, line breaking, hyphenation, punctuation and line height. [R10-R13]
The lang attribute matters too. Don't round zh-Hans, zh-Hant or pt-BR down to zh or pt. It's a cue for browsers, screen readers, hyphenation and font choice.
12. Practical starting values by language
| Group | How to think about the starting values |
|---|---|
| Japanese | Start with 17-18px, line spacing around 1.8, and about 30-40 characters per line. Don't force extra letter spacing. Respect Japanese typesetting. [R10] |
| Simplified and Traditional Chinese | Use separate CJK fonts, and don't break line-breaking rules or punctuation. Keep zh-Hans and zh-Hant separate. [R11] |
| Korean | Use a Hangul font and don't add odd letter spacing. Check that Korean line breaking works. [R12] |
| Thai | Don't break correct text shaping or word-boundary line breaks. A slightly taller line height is safer. Don't use word-break: break-all carelessly. [R13] |
| Vietnamese | Use a font with full coverage of diacritical marks, and don't clip the tops and bottoms with a fixed height. |
| en/es/pt-BR/id/fr/de | Start at about 55-70 characters per line, and consider the correct lang and hyphens:auto. Check for overflow, especially with long German compound words. |
13. On phones, it's not just "readable," it also has to "show up fast"
If you load huge web fonts for all 12 languages, readers leave before any text appears. web.dev explains that web fonts can delay FCP/LCP (how soon the first and main content appear), and that font swapping can cause CLS (layout shift). [R19] The solid approach is system fonts for body text and brand fonts only where needed.
The current Core Web Vitals "good" targets at the 75th percentile are LCP at 2.5 seconds or less, INP at 200ms or less, and CLS at 0.1 or less. [R20] A site where ads or fonts make a paragraph suddenly drop down the screen while you read is like holding your place in a book with your finger while a clerk moves the table.
14. Articles people keep coming back to have the same things in the same place every time
What drives return visits is not flashy effects but predictability. If heading style, link style, table of contents, article width, language switcher, search results and related-article placement are nearly the same every time, readers learn how to use the site.
If you offer an "Aa" setting for text size, line spacing and theme, saving the choice is a good idea. Accessibility isn't about asking people to "please turn on disability mode" every time. It works best when it holds up from the default state and lets only the people who need to tweak things do so.
15. The "reader endurance test" you must not run
Typical things to avoid: 12px body text, pale gray, lines over 100 characters, justified text, paragraphs that fill the whole screen, skipped heading levels, everything in bold, UI that conveys meaning by color alone, autoplay, hard-to-close pop-ups, body text as an image, a horizontal-scroll hell when zoomed, huge web fonts, and meaningless animation.
Readers didn't come to take an exam on whether they have the intelligence and visual tracking to finish your site.
16. When in doubt, start from these baseline values
| Item | Practical starting value | Notes |
|---|---|---|
| Body text | 17-18px | Not an absolute. Make it zoomable |
| Body line spacing | 1.7-1.9 | Adjust by language and font |
| Latin-script line | About 55-70 characters | Research and practical starting point. Avoid too long [R15] |
| CJK line | About 30-40 characters | 40 also matches the WCAG AAA Visual Presentation guideline [R8] |
| H1 | About 32-40px | Make the gap from body text clear |
| H2 | About 25-30px | The H2s alone should convey the flow |
| H3 | About 21-24px | Keep a difference from H2 |
| Normal text contrast | 4.5:1 or more | WCAG 2.2 AA [R2] |
| Large text | 3:1 or more | WCAG 2.2 AA [R2] |
| Pointer target | At least 24×24 CSS px as the baseline | Has exceptions. In practice, consider around 44px too [R6] |
| Text zoom | 200% | No loss of content or function [R3] |
| Reflow | 320 CSS px | No two-direction scrolling in principle [R4] |
17. Build a quality gate. "We'll be careful" is not quality assurance
If you run an article factory or a CMS (content management system), don't leave readability to human memory. Use static checks for lang, H1, heading order, image alt text, accessible names and banned CSS, and use real-browser checks for 320px, 200% zoom, Text Spacing overrides, keyboard use, focus and horizontal scrolling.
Anything that can be fixed safely can be auto-fixed, such as a missing lang or applying the shared CSS. But never make up fixes that change meaning, such as the wording of the text, translations or alt text. If it can't be fixed, mark it FAIL and pass it to a person. A quality gate isn't an angry teacher; it's a ticket gate that doesn't ship broken goods.
18. Summary: a good article doesn't test its readers
The essence of an easy-to-read article isn't giant text or stylish white space. Readers know where to read, can find their way back, can zoom, can tap, can have it read aloud, find it natural in their own language, and it's fast. Put all of that into one design system.
It feels natural to ordinary adults, and it doesn't break for people who are easily distracted, have weak eyesight, struggle with reading, or use a keyboard or assistive technology. That's the strongest result. Rather than building an "accessible version" in a separate room, just make the front door wide from the start.
