Design a high user experience Web text size with CSS

There is nothing more important in developing a Web application than it looks. So, I wouldn't be surprised to find that designers are very concerned about fonts and font sizes!

When designing a network application, you must decide how to edit the font. There are a number of options when using CSS, and each developer has its own preferences. This article mainly discusses the font size and the operation within the network application.

　　Font size

The CSS2 specification defines fonts based on length--Horizontal and vertical dimensions. This length is a numeric value and may be preceded with an optional plus (+) or minus (-) marker. In addition, the value may have an optional unit identifier after it.

In addition, the CSS2 specification defines two unit types: absolute units and relative units. The absolute value specifies the unit, and the relative unit specifies a value that is proportional to another value. The following list lists the relative unit identifiers:

• EM: The height of the element font. It evaluates to the same value as the font size property of the element that uses the font. When it appears in the font Size property value itself, an exception occurs when it refers to the font size of the parent element.
• Ex (x-height): The CSS2 specification describes it as the height of the lowercase letter x.
• PX (pixels): It is related to the resolution of the background or screen. Depending on the display resolution output of different pixels, due to user preferences, the display resolution may vary greatly.

The following are valid absolute unit identifiers:

• In (inches)
• CM (cm)
• MM (mm)
• PT (dot, 1 o ' =1/72 inches)
• PC (12-point movable Type, 1pc=12 point)

Another way to measure absolute size is to apply the following keywords: minimum, small, small, medium, large, large, and minimum, using the proportional factor that measures a value. As the base value, smaller to subtract a factor, to increase a factor, and so on. The scale factor defined by the CSS2 specification is 1.2, and this value may vary depending on the browser.

You can also apply a percentage value to format text. The percent value is an optional marker, which is followed by a percent sign (%). The percent value is always proportional to another value. In the case of a font, it is proportional to the basic font size of the Web page.

As you can see, there are many ways to do this seemingly simple task of rendering text. The following HTML-formatted text (in a paragraph element) applies various unit identifiers. All of these values are equal and are assumed to be displayed in 72dpi.

The following is a reference fragment: <title>font sizing-equal values</title> <p style= "FONT-SIZE:36PT;" >Point</p> <p style= "font-size:3pc;" >Pica</p> <p style= "font-size:0.5in;" >Inches</p> <p style= "font-size:1.27cm;" >Centimeters</p> <p style= "font-size:12.7mm;" >Millimeters</p> <p style= "font-size:300%;" >Percentage</p> </body>

You can add a pixel value to the list, but its value depends on the environment. For example, my laptop with 1280x1024 resolution will display text that is consistent with the 50 pixel values used in the table above.

Read the CSS2 specification mentioned earlier to get more knowledge of font size. Now I'll talk about deciding which method to use in a Web application.