100% Readability Standard

Many websites are filled with small, hard-to-read text. Why is this the case?

Don't say that crowded pages look good.

Crowded websites are never comfortable; they look nauseating.

Don't say that more links are more useful.

Stuffing a page full of content does not help usability. The only reason you're throwing so much at us is laziness. We hope you can think about what's important and make choices in advance; it's not our job.

Don't say that scroll bars are bad.

If that were true, then all websites would be bad. Scroll bars aren't wrong, just like flipping pages when reading a book isn't wrong.

Don't say that text isn't important.

95% of website design work is actually typography.

Don't say "just put on glasses."

And don't say "just lick the screen." Leaning back and finding a comfortable position is better.

There is no reason to cram so much onto the screen. It’s simply a foolish mistake.

1. Long passages should use standard fonts.

The font size on the original site isn't large—it's the default browser size, which is what browsers are designed to display.

We don’t want to press larger or smaller buttons, nor do we want to change browser options. We just want to read directly. We expect you to adjust according to our settings, not through other means.

Designing a good-looking layout with large fonts is difficult, but this difficulty can help you design a simpler and clearer website. Cramming everything onto a website isn't hard, but making it simple and user-friendly is very challenging. At first, you might think the default font is too big, but after a day, you won't want to read anything smaller than 100% or 1em. It may seem large at first, but once you use it, you'll quickly understand why browser designers chose this size as the default.

2. Active white space

Let your text breathe. Let your readers breathe. Using white space isn’t a designer’s quirk; it’s not even about taste. Surrounding text with air reduces tension and makes it easier for people to focus on the important content. You don’t need to fill the entire window. Beautiful white space isn’t a side effect; it’s the natural result of functional design. Who says websites have to be stuffed with content?

Make sure the line width (or column width) isn't too wide. Adding blank space on both sides will ease the strain on the eyes. We don’t want to adjust font sizes or window sizes. When we open a website, we just want to read. Adjustable column widths are nice, but having text span the entire screen is unpleasant.

Basic rule: 10-15 characters per line. For fluid layouts, 100% font size and 50% column width (relative to the screen) works well for most resolutions. (I think it should be around 500-600 pixels wide.)

3. Reader-friendly line spacing

Reading experts say: “Too little line spacing affects reading speed because the eyes see the lines above and below simultaneously, preventing focus... Readers will expend more energy in the wrong places and get tired more easily. Similarly, too much line spacing causes the same problem.”

The default HTML line spacing is too small. If you increase it slightly, the text becomes easier to read. A good benchmark is 140%.

4. Clear color contrast

This goes without saying. But if you're still using these contrasts:

* Light gray text, lighter gray background

* Silver text, snow-white background

* Gray text, yellow background

* Yellow text, red background

* Green text, red background, etc.

Then you’re not a web designer; you're just pretending. If you insist you are, then you must realize that if no one can read what you're saying, no one will know what it is. Stop this absurd design and let us see what you've written. Note: For screen design, overly strong contrast (pure black and white) isn't ideal, nor is flashing text. Benchmark: #333 text, #fff background. (This seems different for Chinese characters; dot matrix fonts are still clearer, and pure black and white are completely acceptable.)

5. Don't embed text in images.

We want to search, copy, save your text, and highlight it while reading. Text embedded in images may look pretty, but beauty isn't what the web needs. What it needs is communication, information, and information that is readable, usable, scalable, quotable, and shareable.

If you can't make your website beautiful without using image-based text, then perhaps you need to start designing from scratch.