Description
I think the Vue 3 docs could use a few readability enhancements. I know these suggestions are subjective, but I there may be consensus on some of them or if not perhaps some alternate proposals that would enhance readability. These ideas are fairly raw, but at very least might spark a discussion on suggestions that could make it a little more clean.
-
Bold text does not stand out significantly from the regular text
-
The typography and font size a little large for the narrow content width and the current line spacing. Making it hard to parse out paragraphs, bullets, and sections.
-
Spacing between code blocks, code pens, call outs, etc is inconsistent and maybe not enough compared to the line spacing. There are multiple images here, its a bit hard to see on the issue.
-
The left table of contents bar is fairly wide and there is no margin on the right of the document so although the main content is centered inside the containing page its pretty far off center from the reader's window. Perhaps increasing the content width on larger screens so this gap is less pronounced, especially with the fairly large default font size. Another idea could be adding a sponsors bar on the right like Vue 2 docs?
-
Font size, vertical spacing, and tab size in the table of contents seem a bit off. It almost looks like there is more vertical spacing than indentation perhaps because of the large font size and larger weight?
-
We may not have much control over this, but the code pen blocks are fairly noisy visually and break the flow of the document.
