10 Useful typographical skills to improve the readability of your website

Typographical layout is often ignored in web design. In fact, this is silly, because the emphasis on web page layout can indeed improve your webpage design level and readability. Below, I listed 10 useful typographical skills to make your website look better. 1. correction

Typographical layout is often ignored in web design. In fact, this is silly, because the emphasis on web page layout can indeed improve your webpage design level and readability. Below, I listed 10 useful typographical skills to make your website look better.

1. correct the row height

One of the most common web page layout errors is that the row height is incorrectly defined. The line height defines the height of a line of text, so we must set the line height according to the text font size.

In general, when setting a text line height, I often add 7 pixels based on the font size (for a 12-17 pixel font)

Body {font-size: 14px; line-height: 21px;/* 14px + 7px */}

2. correct the title margin value.

Another common error is the incorrect margin value around the title. The title is actually associated with the paragraphs below it, not just the cut-off characters of the two paragraphs. This is why the title's margin-top is wider than the margin-bottom.

3. do not use too many fonts.

To ensure readability and professionalism, no more than three fonts should be used on your webpage. Using too many fonts will disturb your users and make your website look messy. On the contrary, fewer fonts make your website clean and easy to read. You can use a font for the title, a font for the body, and another font for the logo or subtitle.

4. use the same width font in the code section

If you are a developer (like most people reading this blog), you may want to paste some code in your blog. If so, use an equal-width font. So what is an equal-width font? It is a font in which letters and characters share the same horizontal width.

What kind of font should you use in the website code segment? So far Courier fonts are the most popular. how about the latest fonts such as Consolas or Monaco? Then you must check it out.

5. focus on comparison

Even if your website has a good typographical layout, you need to pay attention to the comparison. If the background of your page is moderate Gray (#999999), do not use dark gray (#333333) text. Otherwise, your content is hard to see, especially for older people with poor eyesight.

In short, unless your website is about hackers, black hat seo, or Gothic rock, you should use a light background and dark font to ensure a clear contrast to increase the readability of your website.

6. only underline the link text.

During my 12 years of surfing the Internet, the default style used by the browser for links has been blue text and underlined. Although the blue color is often changed to another color, the underline is always regarded as a regular style of the link. This is why you should not underline anything except links. Otherwise, this may cause great confusion to your users.

7. create a style Library

A simple and efficient way to make your website visually shock is to create special styles for special pages. For example, create a. warning CSS class to display "warning" to your users ".

8. arrange titles and text by level

To increase readability, it is important to create a tag level for titles, sections, and general texts, in this way, your users can view the structure of your article and quickly find the part they are interested in.

9. Bold White

I think one of the most important typographical skills is "bold white ". White space is a blank area or unused space. it will make your design neat and professional. The reason many people like Apple's website is that it is simple but exquisite, and has a lot of white space.

10. correct use of punctuation marks

If you want to improve your typographical level, you cannot ignore the correct use of punctuation marks. For example, double quotation marks are often replaced by double quotation marks, just like Chinese and English quotes ).

Note:

He said "Hello ".

Use quotation marks for the same text:

He said "Hello ".

This is better, isn't it? If you are a WordPress user, you may be happy to know that your favorite blog platform will automatically convert the double marker into intelligent quotation marks. Otherwise, you must use HTML character encoding. As follows:

He said & s; ldquo; Hello ".