Some Thoughts on Article Formatting

·(edited)··

102

reads

This article was last modified on . Some content may be outdated. Feel free to ask the author if you have questions.

AI Translation中文English

Summary:

This article provides some suggestions on layout and formatting, including fonts, layout format, text format, and images. It is recommended to use Microsoft YaHei font or system fonts, set appropriate line spacing and heading sizes, and add spaces and use proper capitalization in text. Images need to be compressed to enhance the web browsing experience. Finally, the articles are licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Recently, I revisited some of my earlier articles and noticed several issues. Some had too many blank lines affecting readability, while others had overly large text that looked odd on mobile devices. There were also font-related problems; certain fonts were unavailable on Apple devices, leading to poor display quality. To avoid future formatting chaos, I'd like to standardize the format.

Fonts

Prefer Microsoft YaHei font for general use, and -apple-system for Apple devices. Helvetica, Roboto, Noto, Arial, sans-serif can be used as fallback fonts.

Layout Format

An article should use no more than 3 text colors.
The margin between the article and the left and right borders should be 20px; a flush layout can feel oppressive.
The line spacing for the main text should be set to 33px.
Paragraphs should not use first-line indentation, as it can make paragraphs look uneven on long-screen mobile devices, making it seem unnecessary.
h1 heading size should be 2.2em; h2, 1.5em; h3, 1.3em; h4, 1.15em; h5, 1em; h6, 0.9em.
The main text size should be 15px. In light mode, the text color should be rgba(0,0,0,0.7), and in dark mode, it should be #d9d9d9.

Text Format

There should be a space between linked and non-linked text.
Text should be clear and unambiguous, with correct usage and no typos or spelling errors.
A space should be added between Chinese characters and English words or numbers, which makes the text look much more comfortable.
Proper capitalization should be used for specific English words, such as Font Awesome, not Fontawesome.

Images

To enhance the web browsing experience, each referenced image should be compressed, except for those that need to maintain clarity. Images should be compressed to less than 200Kb.

Other

All articles are licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.