Home > Developer > CSS

How does CSS define the text size to reflect the user experience?

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

When designing a network application, you must decide how to edit the font. There are a lot of options when using CSS, and every developer has their own preferences. This article mainly discusses the font size and operations in network applications. When developing a network application, nothing is more important than appearance. So I am not surprised if I find that the designer is very concerned about the font and font size!

Font Size
CSS2 specifications define fonts Based on the length-horizontal and vertical dimensions. This length is a numerical value, which may be preceded by an optional plus (+) or minus (-) Mark. In addition, this value may have an optional unit identifier.
In addition, the CSS2 standard defines two unit types: absolute unit and relative unit. The absolute value specifies the Unit, while the relative unit specifies the value proportional to the other value. The following list lists the relative unit identifiers:
Em: height of the element font. It is equivalent to the font size attribute of the element that uses the font. When it appears in the font size attribute value itself, an exception occurs. In this case, it refers to the font size of the parent element.

Example Source Code [www.bkjia.com]

Ex (x-height): CSS2 Standards describe it as the height of lowercase letter x.
Px (pixel): it is related to the background or screen resolution. Different pixels are output based on the display resolution. The display resolution may vary greatly depending on your preferences.

The following is a valid absolute unit identifier:

Example Source Code [www.bkjia.com]

In (INCHES)
Cm (cm)
Mm (mm)
Pt (point, 1 point = 1/72 inch)
Pc (12 o'clock, 1 pc = 12 o'clock)

Another way to measure the absolute size is to use the proportional factor to measure a value and apply the following keywords: Minimum, small, small, medium, large, large, and minimum. Is the base value. If the value is smaller, a factor is subtracted. If the value is larger, a factor is increased. The ratio defined in the CSS2 specification is 1.2. This value may also vary with the browser.
You can also use the percentage value to format the text. A percent value is an optional identifier, that is, a percent sign (%) after a number ). The percentage value is always proportional to another value. In terms of font, It is proportional to the basic font size of the webpage.
As you can see, there are many ways to complete the seemingly simple task of rendering text. The following HTML text (in section elements) applies various unit identifiers. All values are equal and displayed at 72dpi.
Example Source Code [www.bkjia.com]

<Html> <Title> Font Sizing-equal values </title>
</Head> <body>
<P style = "font-size: 36pt;"> Point </p>
<P style = "font-size: 3 pc;"> Pica </p>
<P style = "font-size: 0.5in;"> Inches </p>
<P style = "font-size: 1.27;"> Centimeters </p>
<P style = "font-size: 12.7;"> Millimeters </p>
<P style = "font-size: 300%;"> Percentage </p>
</Body> You can add a pixel value to this list, but its value depends on the environment. For example, a laptop with a resolution of 1280X1024 will display text that is consistent with the 50-pixel value used in the preceding table.
Read the CSS2 specification carefully to learn more about font size. Now I will discuss how to decide which method to use in network applications.

Method To select
There are many font-related options in CSS, but which one is the most suitable for your network applications? Absolute size has many defects, especially in consistency, flexibility and access. Compared with the absolute font size, users with any visual impairment can use the relative font size to expand the text on the page, which is easier to read. Therefore, developers often use relative sizes.

Let's take a closer look at the relative size:
Pixels are the most common size values. Most browsers support it, but not always. Browsers often treat pixels as screen pixels rather than CSS pixels. One disadvantage of pixel is that it ignores or denies users' preferences and cannot be adjusted in IE.
Many developers prefer to use vertices to measure the font size. However, vertices are mainly used in desktop printing systems and cannot be transplanted to the network. The operating system or browser uses pixels by default when rendering text.
The most common method is to use em or percentage size. EM can be adjusted in all browsers that support resizing. Em is also related to the default user preferred size. The results of applying em in IE are unpredictable. In IE, it is best to use percentages to set the text size.

The following example uses em and percentage values to format the text. The basic text is set with the percentage value, and then adjusted with em.

Example Source Code [www.bkjia.com]

<Html> <Title> Display Test </title>
<Style type = "text/css">
Body {font: Sans Serif, Arial; font-size: 110%}
</Style> <P style = "font-size: 1.0em;"> Basic text. </p>
<P style = "font-size: 1.5em;"> Larger text. </p>
<P style = "font-size: 0.5em;"> smaller text. </p>
</Body> All related to appearance
The existing standards provide many ways to format and present text in network applications. Developers can easily break down text into relative and absolute identifiers. The key lies in consistency and thorough detection of solutions.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field user experience design salary user experience design books user experience software user experience best practices ui means user experience user experience design software
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More