How typography improves the comfort of web pages

Focusing on web typography can actually improve your web design and Web page comfort. Here's a list of 10 very useful typography tips to make your site look better.

1, to correct the line high

One of the most common page layout errors is the definition of an incorrect row height. Row height defines the height of a line of text, so we have to set the row height by the text font size.

In general, when I set the line of text, I often add 7 pixels to 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 mistake is the incorrect margin value around the title. The title is actually associated with the paragraph below it, not just the two-paragraph delimiter. This is why the margin-top of the title is wider than the margin-bottom.

3, do not use too many fonts

To ensure readability and professionalism, you should not use more than 3 fonts on your Web page. Using too many fonts can interfere with your users and make your site look messy. Conversely, fewer fonts make your site look clean and readable. You can use a font for headings, text with a font, and a final logo or subtitle with a different font.

4, the code part uses the equal width font

If you're a developer (like most people who read this blog) you might want to put some code on your blog. If so, use the equal-width font. So, what is the equal-width font? It is the same font that the letters and characters share the same horizontal width.

So what kind of font should you use in your site's code snippets? So far courier fonts are the most popular, so try some of the latest fonts like Consolas or Monaco? Then you must see here. Over here

5, pay attention to the comparison

Even if your site has good typography, another need to be aware of is contrast. If your page background is in gray (#999999), do not use dark gray (#333333) text, otherwise your content is difficult to see, especially for some older people with poor eyesight.

In short, unless your site is about hackers, black hat seo or goth rock, you should use light-colored backgrounds and dark fonts to ensure a clear contrast to your site's readability.

6, only to the link text underline

For the 12 years I surfed the internet, the browser used the default style of the link to always be blue text underlined. Although this blue is often changed to another color, the underline is always treated as a regular style of the link. That's why you don't underline other things besides linking. Otherwise, this may cause a lot of confusion to your users.

7. Create Style Gallery

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

8. Arrange headings and text by rank

To increase readability, it is important to create tag levels for headings, introductory paragraphs, and regular text so that your users can see the structure of your article and quickly find the parts that interest them.

9, bold to leave the white

I think one of the most important typography techniques is "bold to stay white". White refers to the blank area or unused space, it will make your design neat and professional. The reason many people like Apple's Web site is that it is simple but exquisite and has a lot of white leaves.

10. Correct use of punctuation marks

If you want to improve your typesetting level, it is important to use punctuation correctly. For example, quotation marks are often substituted with a double apostrophe (translator Note: I think the author wants to express the difference between the full-width and half-width symbols, like the Chinese quotation marks and the English quotation marks).

Note that the double-apostrophe symbol is distinguished:

He said "Hello".

The same text, using quotes:

He said "Hello".

It's better, isn't it? If you are a WordPress user, you may be happy to know that your favorite blog platform automatically converts double apostrophes into smart quotes. Otherwise, you have to use HTML character encoding. As shown below:

He said &s;ldquo; Hello ".