Use em to specify the font size

Source: Internet
Author: User

There are several ways to specify the font size on the Web page. First, you can use keywords such as small or large. Second, you can also use fixed metrics such as pixel or point ); you can also use relative measurements, such as em or percentage. Keywords are easy to use, but they lack flexibility and accuracy. Fixed metrics may be more accurate, but for users who want to adjust their font sizes based on their needs and preferences, it may cause some usability problems. Relative measurement can solve this usability problem, but it will also bring their own problems.
Feasible methods
Relative measurements can specify the font size to be greater or smaller than some standard reference sizes. Use percentages to set the font size. The font size can be expressed as a percentage of the character frame height of the reference font (the distance between the top of the letter character and the bottom of the letter character.
Em is a measure based on typographical conversion. It defines 1em as the height of uppercase letters of the reference font. To maintain consistency with other metrics, CSS defines 1em as the height of the character box. The size in em format is a decimal number or a multiple of the reference font size. Therefore, 2em and 200% are the same, and. 75em and 75% are the same size.
Theoretically, using relative measurements to specify the font size is advantageous for both Web developers and Web users. By specifying the font size as a relative variation value of the standard reference size, you can focus on the size relationship without specifying a size for each font style with a specific number.
If you change the size of the reference font, all fonts specified with relative measurements are adjusted accordingly to maintain the size ratio to the reference font. This means that Web developers can change all the font sizes on the entire page by changing the font size at one place of the body tag. Similarly, this method also allows visitors to adjust their browser font size settings to adjust the font size in the browser window without losing any meaning that the relative font size can convey.
Troubles in Heaven
Unfortunately, theoretically sound reasonable things will never be so good in practice. A major problem when using relative measurements to set the font size is the lack of consistent standards by referring to the font size. The traditional default font size of Windows-based browsers is 16 pixels, and the screen resolution is assumed to be 96 pixels per inch. On the Apple machine, the traditional default font size is 12 pixels, and the screen resolution is 72 pixels per inch.
Although the default font size of Windows is the recommended official standard, many hardcore Apple users (including many Web developers) continue to use the traditional Apple default settings. These settings tend to give Apple users an incorrect impression of the "normal" font size. This is a problem for Web developers who use any method to specify the font size, but this problem is especially serious for Web developers who use relative measurements to specify the font size, because when the size of the displayed font is far from the normal size, the differences between the standard reference font size will be exaggerated.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.