CSS
Raiting:
7

Which units of measure to choose for the text layout


Units of length are two categories: absolute and relative.
Absolute units include:

• inches (in)
• centimeters (cm)
• millimeters (mm)
• points (pt)
• pica (pc)

In the terms of CSS’ specification: 1pt = 1/72in and 1pc = 12pt.
In the property of font-size specification of negative value in units of length, for example: 25cm is unacceptable.
Why Absolute? Because they represent a real value in the physical world – standards.
These units work with the mechanism of output, which has an actual physical size, for example: printing, we will use such units.
But those units have no meaning for the monitors, there is certain conditionality, but it's really just conditionality.
Relative units include:

• em (font-size)
• x-height (ex)
• px (pixels)

Interest (%) is always the value about which, we discuss separately. It is so important that the W3C carried out it in a separate column. In other words, we cannot use interest (%) in all rules, but only in some, and when we use (%), we should understand from what they are considered.
Pixel is the smallest dot that can be set on the computer’s screen.
Why is pixel the relative value? We take a physical monitor, which has the diagonal; this is a real physical value. But we can set on it any definition, right. The value of a pixel can change depending on the definition of we set. That's why pixel is the relative value. In other words, px has the different size on different monitors.
Em unit refers to the size of a standard font that is set in the global settings of browser.
image
On the table of symbols are some important font sizes. Most of them are not useful to us, but some we need to know.

The number 4 marks the baseline of font elements and the number 13 marks em font-size. So, em - this is the font size, which is determined by the height of capital letter and sizes of ascender and descender lines (on the top may appear diacritical marks).
What is ex? This is the height of a lowercase letter. The number 3 shows it on the table. This correlation has different values for the different fonts. But not all browsers support this correlation.
For example: Microsoft has offered to assume 1em = 2ex for all types of fonts, because the ex can be different in the different browsers, better we do not use it. Some browsers consider ex correctly, and some like IE considers as a half from em. But in reality, it may be 0.46, in small fonts such discrepancy is unnoticed, and in large fonts will be a significant difference.
Now, let us take a look at the use of pt, pc, in on the websites.
If we indicate the size of element using pt on the website, it is still will be taken from something. So how does the browser resolve this issue?
At the origin of computer technology the monitor’s sizes had the small range. Microsoft has offered to take for the distinctness 96px = 1in, and such definition will have our devices.
1in = 96px
Apple said no:) Let us focus on the printing workers and take:
1in = 72pt
But in practice turned out as follows: the lower is resolution, the less opportunity to place information there.
So Apple invented and made 1in = 96px, but it is all nonsense, since the actual physical definition of your devices ranges from 60 - 600px / in.
But still the value of 96 is determinative for the translation. This means that if we use the size of 10pt then the browser will do the following: 96 / 72 * 10. That's the story of translation pt in px.
In practice, I would not recommend to use the absolute units on the monitors. This does not make any difference for the monitors, but when we are going to do the printing job, we better use them. When we print, we better worry that all will be typed in pt.
Siera 15 september 2011, 11:57
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute