The problem of web page layout is often ignored. This is a pity. If you can improve your web page layout, the design and readability will also be improved. In this article, I introduced 10 very useful typesetting skills to make your website look better.
1. Set the correct row height
One of the most common mistakes in web page layout is the wrong row height. Line height is used to define the height of the text line, so it must be set according to the font size.
Generally speaking, when I set the height of the text line, I always add 7 pixels of line spacing to the font size (the font size is 12 to 15 pixels).
BODY { Font size: 14px; Row height: 21px;/* 14px + 7px * / }
2. Set the correct space between titles
Another common mistake is the blank space around the title. The title is associated with the paragraph below it. It is not a separator between two paragraphs. This is why the top margin of a title should be wider than the bottom margin.
3. Don't use too many different fonts
In order to ensure the readability and professionalism of the web page, you should not use more than three different fonts. Using too many fonts will confuse readers and make your page look cluttered.
On the other hand, use fewer fonts to make your pages look neat and readable. You can use one font for titles, one font for text, and another font for slogans and subtitles.
4. Use constant width font to display code snippets
If you are a developer, you may want to put some code snippets on your blog. If so, use a constant width font to display your code snippets. So, what is a constant width font? The letters of this font occupy the same amount of horizontal space as each character.
So, what font should be used to display code snippets on a website? Courier font is the most popular at present, but why not try to use the latest font, such as Consolas or Monaco? If you want to choose more fonts, you must look
here
。
5. Pay attention to contrast
If your website is well typeset, another consideration is contrast. If your page background is gray (# 999999), do not use dark gray text (# 333333), otherwise your content may be difficult to recognize, especially for the elderly or people with poor eyesight.
Generally speaking, if your website is related to hackers, black hat SEO or gothic rock, you should use a light background and dark fonts to form a sharp contrast to enhance the readability of your website.
6. Ensure that underlined text can be linked
Since I started using the Internet 12 years ago, the browser's default link format is an underlined blue font text. Although blue often changes to other colors, underlining has always been the accepted link format. This is why underlined text is usually considered linkable rather than other meanings. Otherwise, it will bring great trouble to your readers.
7. Create a style library
A simple and effective way for your website to bring visual shock to readers is to create a specific style for specific users. For example, create a. warning CSS class to display warning messages to readers.
8. The title and text have a sense of hierarchy
In order to improve the readability of the web page, it is very important to create a sense of hierarchy for the title, introduction, paragraph and body. In this way, your article is presented to the readers very vividly, and they will quickly find the part of interest.
9. Don't worry about the blank part of the page
One of the best typesetting advice I know is: "Don't be afraid of blank pages". It can make your page look neat and professional. Many people like Apple's website style. The reason is that although the web page is complex and delicate, it is simple and has a large number of blank areas.
10. Use correct symbols
If you are looking for ways to improve your typography, it is important to use the correct symbols. For example, you can use double quotation marks ("") instead Angular second symbol （""）。 Or you can try HTML character encoding&s; ldquo; „ 。
Original English: 10 useful typography tips to improve your website readability
