Web Design development: How to handle Web page fonts

In the design and development process of Web pages, the most important thing is the visual effects of web pages, designers often spend a lot of energy to adjust the font and font size. With the CSS2 specification, fonts can be adjusted arbitrarily in Web pages or applications. This article explores the font size in depth and describes the best way to adjust fonts in Web pages and Web applications.

How to adjust font size

The CSS2 specification defines the font size by its length, and the larger the length number, the greater the horizontal and vertical length of the font. Before the length number, sometimes the prefix is "+" or "-". In addition, after the font size, it is possible to follow the unit identifier. The CSS2 specification contains two unit identifiers: an absolute unit identifier and a relative unit identifier. The absolute value is used to define the unit, and the relative unit identifier represents the size relative to another value, and several relative unit identifiers are listed below:

EM represents the height of the font, which equals the proportional value of the Font-size property of the font. One exception is that the Font-size property itself uses an EM identifier, in which case it is referenced as the font size of the parent element, and EX (x-height) specifies the height of the lowercase letter x, and px (pixels) is related to the canvas or screen resolution. The pixel values in the Web page display depend entirely on the display resolution, which changes the display to the user's preference for screen resolution.

Another way to implement an absolute font size is to use the zoom feature. You can use the following keywords to reduce or enlarge the font: Xx-small, X-small, small, medium, large, x-large, and Xx-large. Where medium is a benchmark, a parameter with a small typeface shrinks the font, and a parameter with a large typeface expands the font. The scaling ratio defined in the CSS2 specification is 1.2, but different browsers may have different parsing results.

In what way is it used

CSS has a lot of parameters on the font size, then your Web page should be defined by what? There are many drawbacks to determining font sizes with absolute identifiers, such as the impact on consistency and flexibility, and problems with accessibility. Relative font size compared to absolute font size allows the user to adjust the font size in a variety of ways, making it easier to read. In actual development, most designers adopt the relative font size. Now let's take a closer look at the relative font size:

The most common way to use font size is pixels (px), which is supported by most browsers, and the disadvantage of using this approach is that users cannot adjust the font size in IE browsers.

The most common way to define a font size is by using EM or percentages. An em-defined font size can be scaled in any browser, and it also takes care of the user's preference for fonts. However, the performance of EM in IE is not ideal, so for IE browser users, it is best to use the percentage.