The basic knowledge of Western font design and typesetting

In CSS, there is a style called line-height, the style is set row high, after looking at some of the documents found that there is a base-line concept of the font, and did not specifically explain its origin, etc., and I figured out that the layout rules of the browser should be based on the early word typography, Then organized the next part of the content, for the following study reference, first of all, look at this picture:

650) this.width=650; "title=" baseline.jpg "src=" http://s3.51cto.com/wyfs02/M02/5A/DC/ Wkiom1t-gcccna2vaabrzozmtyk016.jpg "alt=" Wkiom1t-gcccna2vaabrzozmtyk016.jpg "/>

1, Baseline: A baseline that refers to the baseline of most letters. , most letters are arranged along a red baseline, and only "P" extends downward beyond the baseline, and the part that exceeds is called "the ministry."

Baseline guidelines:

-Capital letters are located on the baseline. The most common exceptions are J and Q.

--line numbers (see Arabic numerals) are located on the baseline.

--The following misaligned line number has a descending part: 3 4 5 7 9.

--The lower lowercase letter has a descending part: G J P Q Y.

-Characters with rounded upper and lower segments, such as (0 3 6 8 c c G J o o Q), which have a slight sinking (overshoot) over the baseline, resulting in an optical illusion that they are located above the baseline, manufactured by a slightly higher than the X-word height or upper capital level, and flat glyphs such as (H x x 1 5 7) The illusion of the same height. Peter Karowand's digital typefaces suggests that the standard overshoot should be around 1.5%.

There is no baseline for East Asian fonts, and each character is located in a square box with no ascending or descending part. When it is mixed with a font with a low baseline, East Asian characters should be adjusted so that their characters are at the bottom of the baseline and descending height of the lower baseline font.

For "misaligned Numbers" refer to: http://zh.wikipedia.org/wiki/%E4%B8%8D%E9%BD%90%E7%BA%BF%E6%95%B0%E5%AD%97

2, meanline: A thread that determines the size of a lowercase letter with no ascending part, and its distance from the baseline is called the X-word height. Some of the letters of the arc will slightly exceed the range of the main line in some fonts, for the sake of aesthetics.

3,x-height: X-High, in western typography, X-height, (English: x-height or Corpus size) refers to the basic level of letters, precisely, is the baseline (English: baseline) and the distance between the main line. In particular, it refers to the height of the lowercase letter x in a typeface (which is also the source of the word), and in fact it is the same height as the letters A, C, E, M, N, O, R, S, U, V, W, and Z. Nevertheless, in the field of modern font design, the X-height represents a design factor for a font, so in some cases the letter x itself is not exactly equal to the X-word height.

In Latin, in addition to the letters mentioned above, other lowercase letters are taller than the size of X, and divided into two categories, one is the letter containing the descending part, the letter of the strokes downward over the baseline, such as the letter Y, G, Q and P, the other is a letter containing the ascending part, the letter strokes contain upward parts, such as L, K The ratio of X-height and letter-high (English: Body height) is an important factor in examining a font design.

In Latin-specific fonts and typographic terms, the X-height is often referred to as an ex, which is similar to the habit of calling the width of the capital m as an em.

4,capHeight: baseline to uppercase.

650) this.width=650; "title=" 1.jpg "src=" Http://s3.51cto.com/wyfs02/M01/5A/D8/wKioL1T-jMLQT2TKAAB2mjqzqwc733.jpg " alt= "Wkiol1t-jmlqt2tkaab2mjqzqwc733.jpg"/>

5,ascender height: Ascending part, lower case letter x Height beyond lowercase

6,descenderHeight: The high of the portion of the lowercase letter that extends below the baseline, for example: G,j,p,q,y

650) this.width=650; "title=" 2.jpg "src=" Http://s3.51cto.com/wyfs02/M01/5A/DD/wKiom1T-i9Hy0f9cAABZzfMLqAc665.jpg " alt= "Wkiom1t-i9hy0f9caabzzfmlqac665.jpg"/>

The picture in the attachment provides more explanation of the noun ~ ~ ~

This article comes from the "Simple and Easy" blog, so be sure to keep this source http://dengshuangfu.blog.51cto.com/8794650/1618983

The basic knowledge of Western font design and typesetting